/* ============================================================
   global-deferred.css — non-critical CSS loaded asynchronously
   after first render. Contains: DGA header visual overrides,
   department theme overrides, and Swiper carousel styles.
   ============================================================ */

/* ── DGA header button / link color overrides (visual only, not layout) ──
   These apply to Stencil web components that hydrate asynchronously.
   Logo sizing lives in global.css (render-blocking) because it affects layout.
   ──────────────────────────────────────────────────────────────────────── */
/* White text on the top action-bar buttons — inherits through shadow root. */
#site-header dga-second-nav-header-actions dga-button,
#site-header dga-second-nav-header-actions dga-icon {
  color: #ffffff !important;
}

/* Content-switcher selected state (language toggle etc.). */
dga-content-switcher .content-switcher__item--selected,
dga-content-switcher .content-switcher__item--selected:hover {
  background-color: var(--color-primary) !important;
  color: var(--colors-2-text-primary_on-color, #fff) !important;
}

/* Keep active nav-link visually pressed even on re-hover/re-press. */
dga-nav-header-link[active] {
  --button-background-primary-hovered: var(--button-background-primary-default);
  --button-background-primary-pressed: var(--button-background-primary-default);
}

/* ══════════════════════════════════════════════════════════════
   About section theme — remap main → lavender, accent → info (blue).
   Blue is analogous to purple on the color wheel and gives an elegant,
   cool, sophisticated pairing (royal purple + deep blue).

   Also remaps the DGA library primary tokens (`--colors-primary-sa-flag-*`
   and derivatives) so DGA web components rendered inside this scope
   inherit lavender colors via CSS variable cascade (works through the
   shadow DOM boundary for inheritable custom properties).
   ══════════════════════════════════════════════════════════════ */
.about-lavender-theme {
  /* Tailwind theme tokens */
  --color-main-25: var(--color-lavender-25);
  --color-main-50: var(--color-lavender-50);
  --color-main-100: var(--color-lavender-100);
  --color-main-200: var(--color-lavender-200);
  --color-main-300: var(--color-lavender-300);
  --color-main-400: var(--color-lavender-400);
  --color-main-500: var(--color-lavender-500);
  --color-main-600: var(--color-lavender-600);
  --color-main-700: var(--color-lavender-700);
  --color-main-800: var(--color-lavender-800);
  --color-main-900: var(--color-lavender-900);
  --color-main-950: var(--color-lavender-950);
  --color-primary: var(--color-lavender-600);
  --color-accent: var(--color-accent-brand);

  /* DGA library primary scale — @platformscode/core uses `--colors-primary-sa-flag-*` */
  --colors-primary-sa-flag-25: var(--color-lavender-25);
  --colors-primary-sa-flag-50: var(--color-lavender-50);
  --colors-primary-sa-flag-100: var(--color-lavender-100);
  --colors-primary-sa-flag-200: var(--color-lavender-200);
  --colors-primary-sa-flag-300: var(--color-lavender-300);
  --colors-primary-sa-flag-400: var(--color-lavender-400);
  --colors-primary-sa-flag-500: var(--color-lavender-500);
  --colors-primary-sa-flag-600: var(--color-lavender-600);
  --colors-primary-sa-flag-600-primary: var(--color-lavender-600);
  --colors-primary-sa-flag-700: var(--color-lavender-700);
  --colors-primary-sa-flag-800: var(--color-lavender-800);
  --colors-primary-sa-flag-900: var(--color-lavender-900);
  --colors-primary-sa-flag-950: var(--color-lavender-950);

  /* DGA semantic aliases — declared at :root by @platformscode/core with the
     green value already substituted at computed-value time, so redefining only
     the scale above isn't enough. We must redefine each alias explicitly. */
  --background-primary: var(--color-lavender-600);
  --background-primary-25: var(--color-lavender-25);
  --background-primary-50: var(--color-lavender-50);
  --background-primary-200: var(--color-lavender-200);
  --background-primary-400: var(--color-lavender-400);
  --background-brand-light: var(--color-lavender-50);
  --border-primary: var(--color-lavender-600);
  --border-primary-light: var(--color-lavender-200);
  --text-primary: var(--color-lavender-600);
  --text-primary-sa-flag: var(--color-lavender-800);
  --text-primary-light: var(--color-lavender-300);
  --alpha-primary-10: rgba(109, 66, 143, 0.10);
  --alpha-primary-20: rgba(109, 66, 143, 0.20);

  /* Primary button states (dga-button variant="primary-brand") */
  --button-background-primary-default: var(--color-lavender-600);
  --button-background-primary-hovered: var(--color-lavender-700);
  --button-background-primary-pressed: var(--color-lavender-900);
  --button-background-primary-selected: var(--color-lavender-800);
  --button-background-primary-focused: var(--color-lavender-600);

  /* Featured icons + notifications that use the brand accent */
  --featuredicons-background-brand-light: var(--color-lavender-50);
  --featuredicons-bg-icon-brand-light: var(--color-lavender-50);
  --notification-background-brand-light: var(--color-lavender-50);
  --notification-background-brand-50: var(--color-lavender-50);
  --notification-background-brand-25: var(--color-lavender-25);
  --notification-text-brand: var(--color-lavender-600);
}

/* Dark mode variants for the About lavender theme. */
html.dark .about-lavender-theme {
  --background-primary-25: var(--color-lavender-950);
  --background-primary-50: rgba(109, 66, 143, 0.10);
  --text-primary-sa-flag: var(--color-lavender-100);
  --border-primary-light: var(--color-lavender-800);
}

/* ══════════════════════════════════════════════════════════════
   Agency section theme — remap main → info (blue), accent → warning
   (orange). Blue + orange is the classic complementary pairing on the
   color wheel — high contrast, professional, and distinct from both
   the default green/gold theme and the About lavender/blue theme.

   Same override strategy as .about-lavender-theme: Tailwind tokens +
   DGA library primary tokens (`--colors-primary-sa-flag-*`) + resolved
   DGA aliases (button/text/border/notification).
   ══════════════════════════════════════════════════════════════ */
.agency-info-theme {
  /* Tailwind theme tokens */
  --color-main-25: var(--color-info-25);
  --color-main-50: var(--color-info-50);
  --color-main-100: var(--color-info-100);
  --color-main-200: var(--color-info-200);
  --color-main-300: var(--color-info-300);
  --color-main-400: var(--color-info-400);
  --color-main-500: var(--color-info-500);
  --color-main-600: var(--color-info-600);
  --color-main-700: var(--color-info-700);
  --color-main-800: var(--color-info-800);
  --color-main-900: var(--color-info-900);
  --color-main-950: var(--color-info-950);
  --color-primary: var(--color-main-agency);
  --color-accent: var(--color-accent-brand);

  /* DGA library primary scale */
  --colors-primary-sa-flag-25: var(--color-info-25);
  --colors-primary-sa-flag-50: var(--color-info-50);
  --colors-primary-sa-flag-100: var(--color-info-100);
  --colors-primary-sa-flag-200: var(--color-info-200);
  --colors-primary-sa-flag-300: var(--color-info-300);
  --colors-primary-sa-flag-400: var(--color-info-400);
  --colors-primary-sa-flag-500: var(--color-info-500);
  --colors-primary-sa-flag-600: var(--color-main-agency);
  --colors-primary-sa-flag-600-primary: var(--color-main-agency);
  --colors-primary-sa-flag-700: var(--color-info-700);
  --colors-primary-sa-flag-800: var(--color-info-800);
  --colors-primary-sa-flag-900: var(--color-info-900);
  --colors-primary-sa-flag-950: var(--color-info-950);

  /* DGA semantic aliases */
  --background-primary: var(--color-main-agency);
  --background-primary-25: var(--color-info-25);
  --background-primary-50: var(--color-info-50);
  --background-primary-200: var(--color-info-200);
  --background-primary-400: var(--color-info-400);
  --background-brand-light: var(--color-info-50);
  --border-primary: var(--color-main-agency);
  --border-primary-light: var(--color-info-200);
  --text-primary: var(--color-main-agency);
  --text-primary-sa-flag: var(--color-info-800);
  --text-primary-light: var(--color-info-300);
  --alpha-primary-10: rgba(21, 112, 239, 0.10);
  --alpha-primary-20: rgba(21, 112, 239, 0.20);

  /* Primary button states */
  --button-background-primary-default: var(--color-info-600);
  --button-background-primary-hovered: var(--color-info-700);
  --button-background-primary-pressed: var(--color-info-900);
  --button-background-primary-selected: var(--color-info-800);
  --button-background-primary-focused: var(--color-info-600);

  /* Featured icons + notifications */
  --featuredicons-background-brand-light: var(--color-info-50);
  --featuredicons-bg-icon-brand-light: var(--color-info-50);
  --notification-background-brand-light: var(--color-info-50);
  --notification-background-brand-50: var(--color-info-50);
  --notification-background-brand-25: var(--color-info-25);
  --notification-text-brand: var(--color-info-600);
}

/* Dark mode variants for the Agency info theme. */
html.dark .agency-info-theme {
  --background-primary-25: var(--color-info-950);
  --background-primary-50: rgba(21, 112, 239, 0.10);
  --text-primary-sa-flag: var(--color-info-100);
  --border-primary-light: var(--color-info-800);
}

/* ══════════════════════════════════════════════════════════════
   Administration section theme — remap main → gold, accent → lavender.
   Gold + purple is the direct complementary pairing on the color wheel
   (yellow ↔ violet) — classic royal/heraldic combination.
   ══════════════════════════════════════════════════════════════ */
.administration-gold-theme {
  /* Tailwind theme tokens */
  --color-main-25: var(--color-gold-25);
  --color-main-50: var(--color-gold-50);
  --color-main-100: var(--color-gold-100);
  --color-main-200: var(--color-gold-200);
  --color-main-300: var(--color-gold-300);
  --color-main-400: var(--color-gold-400);
  --color-main-500: var(--color-gold-500);
  --color-main-600: var(--color-gold-600);
  --color-main-700: var(--color-gold-700);
  --color-main-800: var(--color-gold-800);
  --color-main-900: var(--color-gold-900);
  --color-main-950: var(--color-gold-950);
  --color-primary: var(--color-main-adminstration);
  --color-accent: #384250;

  /* DGA library primary scale */
  --colors-primary-sa-flag-25: var(--color-gold-25);
  --colors-primary-sa-flag-50: var(--color-gold-50);
  --colors-primary-sa-flag-100: var(--color-gold-100);
  --colors-primary-sa-flag-200: var(--color-gold-200);
  --colors-primary-sa-flag-300: var(--color-gold-300);
  --colors-primary-sa-flag-400: var(--color-gold-400);
  --colors-primary-sa-flag-500: var(--color-gold-500);
  --colors-primary-sa-flag-600: var(--color-main-adminstration);
  --colors-primary-sa-flag-600-primary: var(--color-main-adminstration);
  --colors-primary-sa-flag-700: var(--color-gold-700);
  --colors-primary-sa-flag-800: var(--color-gold-800);
  --colors-primary-sa-flag-900: var(--color-gold-900);
  --colors-primary-sa-flag-950: var(--color-gold-950);

  /* DGA semantic aliases */
  --background-primary: var(--color-main-adminstration);
  --background-primary-25: var(--color-gold-25);
  --background-primary-50: var(--color-gold-50);
  --background-primary-200: var(--color-gold-200);
  --background-primary-400: var(--color-gold-400);
  --background-brand-light: var(--color-gold-50);
  --border-primary: var(--color-main-adminstration);
  --border-primary-light: var(--color-gold-200);
  --text-primary: var(--color-main-adminstration);
  --text-primary-sa-flag: var(--color-gold-800);
  --text-primary-light: var(--color-gold-300);
  --alpha-primary-10: rgba(219, 161, 2, 0.10);
  --alpha-primary-20: rgba(219, 161, 2, 0.20);

  /* Primary button states */
  --button-background-primary-default: var(--color-main-adminstration);
  --button-background-primary-hovered: var(--color-gold-700);
  --button-background-primary-pressed: var(--color-gold-900);
  --button-background-primary-selected: var(--color-gold-800);
  --button-background-primary-focused: var(--color-main-adminstration);

  /* Featured icons + notifications */
  --featuredicons-background-brand-light: var(--color-gold-50);
  --featuredicons-bg-icon-brand-light: var(--color-gold-50);
  --notification-background-brand-light: var(--color-gold-50);
  --notification-background-brand-50: var(--color-gold-50);
  --notification-background-brand-25: var(--color-gold-25);
  --notification-text-brand: var(--color-main-adminstration);
}

/* Dark mode variants for the Administration gold theme. */
html.dark .administration-gold-theme {
  --background-primary-25: var(--color-gold-950);
  --background-primary-50: rgba(219, 161, 2, 0.10);
  --text-primary-sa-flag: var(--color-gold-100);
  --border-primary-light: var(--color-gold-800);
}

/* ══════════════════════════════════════════════════════════════
   College section theme — remap main → error (crimson/burgundy).
   Traditional academic color (regalia, gowns, hoods); distinct
   from the university green, agency blue, administration gold,
   and About lavender palettes.
   ══════════════════════════════════════════════════════════════ */
.college-crimson-theme {
  /* Tailwind theme tokens */
  --color-main-25: var(--color-gray-25);
  --color-main-50: var(--color-gray-50);
  --color-main-100: var(--color-gray-100);
  --color-main-200: var(--color-gray-200);
  --color-main-300: var(--color-gray-300);
  --color-main-400: var(--color-gray-400);
  --color-main-500: var(--color-gray-500);
  --color-main-600: var(--color-gray-600);
  --color-main-700: var(--color-gray-700);
  --color-main-800: var(--color-gray-800);
  --color-main-900: var(--color-gray-900);
  --color-main-950: var(--color-gray-950);
  --color-primary: var(--color-gray-700);
  --color-accent: var(--color-main-agency);

  /* DGA library primary scale */
  --colors-primary-sa-flag-25: var(--color-gray-25);
  --colors-primary-sa-flag-50: var(--color-gray-50);
  --colors-primary-sa-flag-100: var(--color-gray-100);
  --colors-primary-sa-flag-200: var(--color-gray-200);
  --colors-primary-sa-flag-300: var(--color-gray-300);
  --colors-primary-sa-flag-400: var(--color-gray-400);
  --colors-primary-sa-flag-500: var(--color-gray-500);
  --colors-primary-sa-flag-600: var(--color-gray-700);
  --colors-primary-sa-flag-600-primary: var(--color-gray-700);
  --colors-primary-sa-flag-700: var(--color-gray-700);
  --colors-primary-sa-flag-800: var(--color-gray-800);
  --colors-primary-sa-flag-900: var(--color-gray-900);
  --colors-primary-sa-flag-950: var(--color-gray-950);

  /* DGA semantic aliases */
  --background-primary: var(--color-gray-700);
  --background-primary-25: var(--color-gray-25);
  --background-primary-50: var(--color-gray-50);
  --background-primary-200: var(--color-gray-200);
  --background-primary-400: var(--color-gray-400);
  --background-brand-light: var(--color-gray-50);
  --border-primary: var(--color-gray-700);
  --border-primary-light: var(--color-gray-200);
  --text-primary: var(--color-gray-700);
  --text-primary-sa-flag: var(--color-gray-800);
  --text-primary-light: var(--color-gray-300);
  --alpha-primary-10: rgba(180, 35, 24, 0.10);
  --alpha-primary-20: rgba(180, 35, 24, 0.20);

  /* Primary button states */
  --button-background-primary-default: var(--color-gray-700);
  --button-background-primary-hovered: var(--color-gray-800);
  --button-background-primary-pressed: var(--color-gray-900);
  --button-background-primary-selected: var(--color-gray-800);
  --button-background-primary-focused: var(--color-gray-700);

  /* Featured icons + notifications */
  --featuredicons-background-brand-light: var(--color-gray-50);
  --featuredicons-bg-icon-brand-light: var(--color-gray-50);
  --notification-background-brand-light: var(--color-gray-50);
  --notification-background-brand-50: var(--color-gray-50);
  --notification-background-brand-25: var(--color-gray-25);
  --notification-text-brand: var(--color-gray-700);
}

/* Dark mode variants for the College crimson theme. */
html.dark .college-crimson-theme {
  --background-primary-25: var(--color-gray-950);
  --background-primary-50: rgba(180, 35, 24, 0.10);
  --text-primary-sa-flag: var(--color-gray-100);
  --border-primary-light: var(--color-gray-800);
}

/* ══════════════════════════════════════════════════════════════
   Academic Calendar theme — mint identity built around #B8EACB
   (== --color-main-200). Keeps the mint as the light/accent hue
   for hero + surfaces while using the deeper main-600/700 values
   for buttons and body text so contrast stays legible.
   ══════════════════════════════════════════════════════════════ */
.calendar-warning-theme {
  /* Tailwind theme tokens — kept on the main (green) scale so
     bg-main-200 = #B8EACB, but darker tones remain usable. */
  --color-main-25: #F7FDF9;
  --color-main-50: #F3FCF6;
  --color-main-100: #DFF6E7;
  --color-main-200: #B8EACB;
  --color-main-300: #88D8AD;
  --color-main-400: #54C08A;
  --color-main-500: #25935F;
  --color-main-600: #1B8354;
  --color-main-700: #166A45;
  --color-main-800: #14573A;
  --color-main-900: #104631;
  --color-main-950: #092A1E;
  --color-primary: var(--color-main-600);
  --color-accent: var(--color-accent-brand);

  /* DGA library primary scale */
  --colors-primary-sa-flag-25: var(--color-main-25);
  --colors-primary-sa-flag-50: var(--color-main-50);
  --colors-primary-sa-flag-100: var(--color-main-100);
  --colors-primary-sa-flag-200: var(--color-main-200);
  --colors-primary-sa-flag-300: var(--color-main-300);
  --colors-primary-sa-flag-400: var(--color-main-400);
  --colors-primary-sa-flag-500: var(--color-main-500);
  --colors-primary-sa-flag-600: var(--color-main-600);
  --colors-primary-sa-flag-600-primary: var(--color-main-600);
  --colors-primary-sa-flag-700: var(--color-main-700);
  --colors-primary-sa-flag-800: var(--color-main-800);
  --colors-primary-sa-flag-900: var(--color-main-900);
  --colors-primary-sa-flag-950: var(--color-main-950);

  /* DGA semantic aliases — mint (#B8EACB) as the light accent,
     dark green for text/borders/interactive primary. */
  --background-primary: var(--color-main-600);
  --background-primary-25: var(--color-main-25);
  --background-primary-50: var(--color-main-50);
  --background-primary-200: var(--color-main-200);
  --background-primary-400: var(--color-main-400);
  --background-brand-light: var(--color-main-200);
  --border-primary: var(--color-main-600);
  --border-primary-light: var(--color-main-200);
  --text-primary: var(--color-main-700);
  --text-primary-sa-flag: var(--color-main-800);
  --text-primary-light: var(--color-main-300);
  --alpha-primary-10: rgba(184, 234, 203, 0.35);
  --alpha-primary-20: rgba(184, 234, 203, 0.55);

  /* Primary button states */
  --button-background-primary-default: var(--color-main-600);
  --button-background-primary-hovered: var(--color-main-700);
  --button-background-primary-pressed: var(--color-main-900);
  --button-background-primary-selected: var(--color-main-800);
  --button-background-primary-focused: var(--color-main-600);

  /* Featured icons + notifications */
  --featuredicons-background-brand-light: var(--color-main-200);
  --featuredicons-bg-icon-brand-light: var(--color-main-200);
  --notification-background-brand-light: var(--color-main-100);
  --notification-background-brand-50: var(--color-main-50);
  --notification-background-brand-25: var(--color-main-25);
  --notification-text-brand: var(--color-main-700);
}

/* Dark mode variants for the Academic Calendar mint theme. */
html.dark .calendar-warning-theme {
  --background-primary-25: var(--color-main-950);
  --background-primary-50: rgba(184, 234, 203, 0.10);
  --text-primary-sa-flag: var(--color-main-100);
  --border-primary-light: var(--color-main-800);
}

/* ══════════════════════════════════════════════════════════════
   Contact Us theme — light-blue identity built around #84CAFF
   (== --color-info-300). Uses info-300 as the light/accent hue
   for hero + surfaces, with info-600/700 for buttons and text
   so contrast stays legible.
   ══════════════════════════════════════════════════════════════ */
.contact-info-theme {
  /* Tailwind theme tokens — kept on the info (blue) scale so
     bg-main-300 = #84CAFF, but darker tones remain usable. */
  --color-main-25: var(--color-info-25);
  --color-main-50: var(--color-info-50);
  --color-main-100: var(--color-info-100);
  --color-main-200: var(--color-info-200);
  --color-main-300: var(--color-info-300);
  --color-main-400: var(--color-info-400);
  --color-main-500: var(--color-info-500);
  --color-main-600: var(--color-info-600);
  --color-main-700: var(--color-info-700);
  --color-main-800: var(--color-info-800);
  --color-main-900: var(--color-info-900);
  --color-main-950: var(--color-info-950);
  --color-primary: var(--color-info-600);
  --color-accent: var(--color-accent-brand);

  /* DGA library primary scale */
  --colors-primary-sa-flag-25: var(--color-info-25);
  --colors-primary-sa-flag-50: var(--color-info-50);
  --colors-primary-sa-flag-100: var(--color-info-100);
  --colors-primary-sa-flag-200: var(--color-info-200);
  --colors-primary-sa-flag-300: var(--color-info-300);
  --colors-primary-sa-flag-400: var(--color-info-400);
  --colors-primary-sa-flag-500: var(--color-info-500);
  --colors-primary-sa-flag-600: var(--color-info-600);
  --colors-primary-sa-flag-600-primary: var(--color-info-600);
  --colors-primary-sa-flag-700: var(--color-info-700);
  --colors-primary-sa-flag-800: var(--color-info-800);
  --colors-primary-sa-flag-900: var(--color-info-900);
  --colors-primary-sa-flag-950: var(--color-info-950);

  /* DGA semantic aliases — #84CAFF (info-300) as the light accent,
     darker info-600/700 for text/borders/interactive primary. */
  --background-primary: var(--color-info-600);
  --background-primary-25: var(--color-info-25);
  --background-primary-50: var(--color-info-50);
  --background-primary-200: var(--color-info-200);
  --background-primary-400: var(--color-info-400);
  --background-brand-light: var(--color-info-300);
  --border-primary: var(--color-info-600);
  --border-primary-light: var(--color-info-300);
  --text-primary: var(--color-info-700);
  --text-primary-sa-flag: var(--color-info-800);
  --text-primary-light: var(--color-info-300);
  --alpha-primary-10: rgba(132, 202, 255, 0.35);
  --alpha-primary-20: rgba(132, 202, 255, 0.55);

  /* Primary button states */
  --button-background-primary-default: var(--color-info-600);
  --button-background-primary-hovered: var(--color-info-700);
  --button-background-primary-pressed: var(--color-info-900);
  --button-background-primary-selected: var(--color-info-800);
  --button-background-primary-focused: var(--color-info-600);

  /* Featured icons + notifications */
  --featuredicons-background-brand-light: var(--color-info-300);
  --featuredicons-bg-icon-brand-light: var(--color-info-300);
  --notification-background-brand-light: var(--color-info-100);
  --notification-background-brand-50: var(--color-info-50);
  --notification-background-brand-25: var(--color-info-25);
  --notification-text-brand: var(--color-info-700);
}

/* Dark mode variants for the Contact Us info theme. */
html.dark .contact-info-theme {
  --background-primary-25: var(--color-info-950);
  --background-primary-50: rgba(132, 202, 255, 0.10);
  --text-primary-sa-flag: var(--color-info-100);
  --border-primary-light: var(--color-info-800);
}

/* ══════════════════════════════════════════════════════════════
   Deanship theme — deep-green identity built around #085D3A
   (== --color-success-800 == --color-main-dean-ship). Uses the
   success scale for surfaces and the deep green as the primary
   interactive / text / border color.
   ══════════════════════════════════════════════════════════════ */
.deanship-green-theme {
  /* Tailwind theme tokens — success scale so bg-main-* utilities
     map onto the green palette. */
  --color-main-25: var(--color-success-25);
  --color-main-50: var(--color-success-50);
  --color-main-100: var(--color-success-100);
  --color-main-200: var(--color-success-200);
  --color-main-300: var(--color-success-300);
  --color-main-400: var(--color-success-400);
  --color-main-500: var(--color-success-500);
  --color-main-600: var(--color-success-600);
  --color-main-700: var(--color-success-700);
  --color-main-800: var(--color-success-800);
  --color-main-900: var(--color-success-900);
  --color-main-950: var(--color-success-950);
  --color-primary: var(--color-main-dean-ship);
  --color-accent: var(--color-accent-brand);

  /* DGA library primary scale */
  --colors-primary-sa-flag-25: var(--color-success-25);
  --colors-primary-sa-flag-50: var(--color-success-50);
  --colors-primary-sa-flag-100: var(--color-success-100);
  --colors-primary-sa-flag-200: var(--color-success-200);
  --colors-primary-sa-flag-300: var(--color-success-300);
  --colors-primary-sa-flag-400: var(--color-success-400);
  --colors-primary-sa-flag-500: var(--color-success-500);
  --colors-primary-sa-flag-600: var(--color-main-dean-ship);
  --colors-primary-sa-flag-600-primary: var(--color-main-dean-ship);
  --colors-primary-sa-flag-700: var(--color-success-700);
  --colors-primary-sa-flag-800: var(--color-success-800);
  --colors-primary-sa-flag-900: var(--color-success-900);
  --colors-primary-sa-flag-950: var(--color-success-950);

  /* DGA semantic aliases — deep green (#085D3A) as the primary
     interactive/text/border color; light success tints as surfaces. */
  --background-primary: var(--color-main-dean-ship);
  --background-primary-25: var(--color-success-25);
  --background-primary-50: var(--color-success-50);
  --background-primary-200: var(--color-success-200);
  --background-primary-400: var(--color-success-400);
  --background-brand-light: var(--color-success-50);
  --border-primary: var(--color-main-dean-ship);
  --border-primary-light: var(--color-success-200);
  --text-primary: var(--color-main-dean-ship);
  --text-primary-sa-flag: var(--color-success-900);
  --text-primary-light: var(--color-success-300);
  --alpha-primary-10: rgba(8, 93, 58, 0.10);
  --alpha-primary-20: rgba(8, 93, 58, 0.20);

  /* Primary button states */
  --button-background-primary-default: var(--color-main-dean-ship);
  --button-background-primary-hovered: var(--color-success-900);
  --button-background-primary-pressed: var(--color-success-950);
  --button-background-primary-selected: var(--color-success-900);
  --button-background-primary-focused: var(--color-main-dean-ship);

  /* Featured icons + notifications */
  --featuredicons-background-brand-light: var(--color-success-50);
  --featuredicons-bg-icon-brand-light: var(--color-success-50);
  --notification-background-brand-light: var(--color-success-50);
  --notification-background-brand-50: var(--color-success-50);
  --notification-background-brand-25: var(--color-success-25);
  --notification-text-brand: var(--color-main-dean-ship);
}

/* Dark mode variants for the Deanship green theme. */
html.dark .deanship-green-theme {
  --background-primary-25: var(--color-success-950);
  --background-primary-50: rgba(8, 93, 58, 0.15);
  --text-primary-sa-flag: var(--color-success-100);
  --border-primary-light: var(--color-success-800);
}


/* ── Swiper carousel overrides ── */
.swiper-3d {
  perspective: 1000px !important;
  transform-style: preserve-3d !important; 
}

.colleges-swiper--coverflow.swiper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.colleges-swiper--coverflow .swiper-wrapper {
  align-items: center;
  transform-style: preserve-3d;
}

/* 
 * Swiper يضبط transition كـ inline بـ ease — !important فقط هنا لفرض منحنى “صفحة”
 * دون تغيير المدة (تأتي من speed + --colleges-swiper-dur)
 */
.colleges-swiper--coverflow.colleges-swiper--page-turn {
  /* fallback إن لم تُضبط من الـ style في TSX */
  --colleges-swiper-dur: 1.6s;
}

.colleges-swiper--coverflow.colleges-swiper--page-turn .swiper-wrapper,
.colleges-swiper--coverflow.colleges-swiper--page-turn .swiper-slide,
.colleges-swiper--coverflow.colleges-swiper--page-turn.swiper-3d .swiper-slide-shadow-left,
.colleges-swiper--coverflow.colleges-swiper--page-turn.swiper-3d .swiper-slide-shadow-right {
  transition-timing-function: cubic-bezier(0.1, 0.72, 0.1, 1) !important;
  /* طبقة GPU + حواف انسيابية */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* مع slidesPerView: auto — عرض الشريطة نسبي لإظهار ~ثلث الجارين (مع الدوران) */
.colleges-swiper--coverflow .colleges-coverflow-slide {
  box-sizing: border-box;
  width: 75% !important;
  max-width: 22.5rem;
  transition:
    filter var(--colleges-swiper-dur, 1.6s) cubic-bezier(0.1, 0.72, 0.1, 1),
    box-shadow var(--colleges-swiper-dur, 1.6s) cubic-bezier(0.1, 0.72, 0.1, 1);
}


@media (min-width: 640px) {
  .colleges-swiper--coverflow .colleges-coverflow-slide {
    width: 70% !important;
    max-width: 26.5rem;
  }
}

@media (min-width: 1024px) {
  .colleges-swiper--coverflow .colleges-coverflow-slide {
    width: 68% !important;
    max-width: 30rem;
  }
}