/* =====================================================================
   ILAHIA TRUST — DESIGN SYSTEM  ·  tokens.css
   ---------------------------------------------------------------------
   The single source of truth for the unified Ilahia Trust ecosystem.
   Every institution inherits these tokens and may override only its
   accent + a small set of "identity" variables (see institution themes).

   Palette rationale
   -----------------
   Ilahia Green  — the shared family colour. Dignified, timeless, rooted
                   in the trust's heritage; signals growth & trust.
   Heritage Gold — accent for excellence, achievement, prestige.
   Ink           — a near-black with a green undertone for warm authority.
   ===================================================================== */

:root {
  /* ---- Brand · Ilahia Green scale --------------------------------- */
  --green-50:  #ecf7f3;
  --green-100: #d3ede4;
  --green-200: #a7dbc9;
  --green-300: #71c2aa;
  --green-400: #3fa587;
  --green-500: #1d8a6c;
  --green-600: #0e7458;  /* ← primary brand */
  --green-700: #0b5c47;
  --green-800: #0b4a3a;
  --green-900: #0a3d31;
  --green-950: #052620;

  /* ---- Accent · Heritage Gold ------------------------------------- */
  --gold-300: #f0d090;
  --gold-400: #e8b65a;
  --gold-500: #d69e3c;  /* ← accent */
  --gold-600: #b67f27;
  --gold-700: #8f621d;

  /* ---- Neutrals · warm, faint green undertone --------------------- */
  --ink-950: #0a1512;
  --ink-900: #12211d;   /* headings */
  --ink-800: #1d302a;
  --ink-700: #2c403a;
  --slate-600: #46564f; /* body text */
  --slate-500: #5c6b64;
  --slate-400: #616f68; /* muted text — WCAG AA (≥4.5:1 on white & surface) */
  --line-300: #d7e0db;  /* strong hairline (decorative) */
  --line-200: #e5ece8;  /* hairline (decorative) */
  --line-100: #eef3f0;  /* hairline */
  --field-border: #7e918a; /* form-control boundary — WCAG 1.4.11 (≥3:1) */
  --surface:  #ffffff;
  --surface-2:#f6faf8;  /* raised alt surface */
  --bg:       #f8fbf9;  /* page background */
  --bg-tint:  #eef5f1;  /* tinted band */
  --white:    #ffffff;

  /* ---- Semantic --------------------------------------------------- */
  --success-600: #17805d;
  --success-50:  #e9f6f0;
  --warning-600: #b67f27;
  --warning-50:  #fbf3e2;
  --error-600:   #c0453b;
  --error-50:    #fbeceb;
  --info-600:    #2f6fb0;
  --info-50:     #eaf2fa;

  /* ---- Role tokens (semantic aliases used across components) ------- */
  --color-primary:        var(--green-600);
  --color-primary-hover:  var(--green-700);
  --color-primary-active: var(--green-800);
  --color-accent:         var(--gold-500);
  --color-accent-hover:   var(--gold-600);
  --color-heading:        var(--ink-900);
  --color-body:           var(--slate-600);
  --color-muted:          var(--slate-400);
  --color-link:           var(--green-700);
  --color-border:         var(--line-200);
  --color-bg:             var(--bg);
  --color-surface:        var(--surface);

  /* Identity accent — overridden per institution (default = family) */
  --brand-accent:      var(--green-600);
  --brand-accent-soft: var(--green-50);
  --brand-accent-ink:  var(--green-800);

  /* ---- Typography ------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --text-xs:   0.75rem;                              /* 12 */
  --text-sm:   0.875rem;                             /* 14 */
  --text-base: 1rem;                                 /* 16 */
  --text-lg:   1.125rem;                             /* 18 */
  --text-xl:   1.25rem;                              /* 20 */
  --text-2xl:  clamp(1.4rem, 1.2rem + 0.9vw, 1.6rem);
  --text-3xl:  clamp(1.7rem, 1.4rem + 1.4vw, 2.05rem);
  --text-4xl:  clamp(2.05rem, 1.6rem + 2.1vw, 2.7rem);
  --text-5xl:  clamp(2.5rem, 1.9rem + 3vw, 3.5rem);
  --text-6xl:  clamp(3rem, 2.2rem + 4.2vw, 4.5rem);

  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.62;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.14em;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Spacing scale (4px base) ----------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  /* Section rhythm — fluid vertical padding for major bands (tightened) */
  --section-y: clamp(3rem, 2.2rem + 3.4vw, 5.25rem);

  /* ---- Layout ----------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --gutter: clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);

  /* ---- Radii ------------------------------------------------------ */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-full: 999px;

  /* ---- Shadows · soft, green-tinted, layered ---------------------- */
  --shadow-xs: 0 1px 2px rgba(10, 61, 49, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 61, 49, 0.06), 0 1px 2px rgba(10, 61, 49, 0.05);
  --shadow-md: 0 10px 24px -8px rgba(10, 61, 49, 0.14), 0 4px 8px -4px rgba(10, 61, 49, 0.08);
  --shadow-lg: 0 24px 48px -16px rgba(10, 61, 49, 0.20), 0 8px 16px -8px rgba(10, 61, 49, 0.10);
  --shadow-xl: 0 40px 80px -24px rgba(10, 61, 49, 0.28), 0 12px 24px -12px rgba(10, 61, 49, 0.12);
  --ring: 0 0 0 4px rgba(14, 116, 88, 0.16);

  /* ---- Motion ----------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-slower: 640ms;

  /* ---- Elevation / z-index ---------------------------------------- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Institutions keep the shared frame but claim their own accent.
   Attach one of these classes (or set the vars) on <body>.            */
.theme-icet {
  --brand-accent:      #1b4db1;   /* engineering blue */
  --brand-accent-soft: #eaf0fb;
  --brand-accent-ink:  #14357c;
}
.theme-icas  { --brand-accent:#7a3ea8; --brand-accent-soft:#f2ecf8; --brand-accent-ink:#5a2b7e; }
.theme-poly  { --brand-accent:#c2571f; --brand-accent-soft:#fbeee4; --brand-accent-ink:#8f4218; }
.theme-pharm { --brand-accent:#1f8f7a; --brand-accent-soft:#e6f5f1; --brand-accent-ink:#136353; }
.theme-school{ --brand-accent:#2f6fb0; --brand-accent-soft:#eaf2fa; --brand-accent-ink:#204f80; }
.theme-kmlps { --brand-accent:#c0453b; --brand-accent-soft:#fbecea; --brand-accent-ink:#8f302a; }