/* ==========================================================================
   IntelliTrain — Design Tokens  ·  "Harvard & INSEAD Executive Style"  ·  v3 (2026-09)
   ==========================================================================

   A world-class academic & executive education reset combining:
   - Harvard Crimson (#A51C30): Institutional pedigree, case-method rigour, governance
   - INSEAD Forest Green (#006848): Global business leadership, sustainability, verified compliance
   - Academic Gold (#C5A059): Credentials, honors, distinction seals
   - Warm Cotton Parchment (#FAF8F5): Scholarly paper canvas and alabaster surfaces
   - EB Garamond & Playfair Display typography: Authoritative editorial voice

   EVERY TOKEN NAME FROM v1/v2 SURVIVES so all 377 views and layouts continue
   resolving seamlessly without missing property fallbacks.
   ========================================================================== */

:root {
  color-scheme: light;

  /* -- Neutrals — Warm cotton paper & scholarly book ink ---------------- */
  --n-0:    #FFFFFF;
  --n-25:   #FAF8F5; /* Warm cotton paper canvas */
  --n-50:   #F5F2EB; /* Alabaster light surface */
  --n-100:  #EFECE3; /* Fine parchment */
  --n-150:  #E5E0D6; /* Hairline book-rule border */
  --n-200:  #D8D1C4; /* Distinct border */
  --n-300:  #BCB4A6;
  --n-400:  #9A9182;
  --n-500:  #766E60;
  --n-600:  #595246; /* Muted academic graphite */
  --n-700:  #433C33;
  --n-800:  #2E2721;
  --n-900:  #1C1617; /* Scholarly book-ink */
  --n-950:  #120D0E;
  --n-1000: #080506;

  /* -- Brand — Harvard Crimson -------------------------------------------
     Official Harvard University Crimson (Pantone 187 C). Conveys heritage,
     authoritative governance, and case-method empirical rigor. */
  --accent:        #A51C30;
  --accent-hover:  #851525;
  --accent-active: #680D1A;
  --accent-soft:   #FAF0F2;
  --accent-border: #E8CCD0;
  --accent-text:   #781422;
  --accent-on:     #FFFFFF;
  --accent-rgb:    165, 28, 48;

  /* Dedicated Harvard Crimson tokens */
  --crimson:        #A51C30;
  --crimson-deep:   #851525;
  --crimson-soft:   #FAF0F2;
  --crimson-border: #E8CCD0;
  --crimson-text:   #781422;

  /* Dedicated INSEAD Forest Green tokens (Executive Business Pedigree) */
  --insead-green:        #006848;
  --insead-green-bright: #008264;
  --insead-green-soft:   #EDF7F3;
  --insead-green-border: #A8DBCB;
  --insead-green-text:   #004D36;
  --insead-green-rgb:    0, 104, 72;

  /* Dedicated Academic & Executive Gold (Seals, Honors & Credentials) */
  --gold:        #C5A059;
  --gold-soft:   #FAF6ED;
  --gold-border: #E8D9B5;
  --gold-text:   #7A5C1B;

  /* Retained brand aliases */
  --brand:      var(--accent);
  --brand-soft: var(--accent-soft);
  --brand-text: var(--accent-text);
  --brand-rgb:  var(--accent-rgb);

  --primary:       var(--accent);
  --primary-dark:  var(--accent-hover);
  --primary-light: var(--accent-soft);

  /* -- Semantic status — INSEAD Forest Green for Verified / Compliant ---- */
  --success:        #006848; /* INSEAD Forest Green */
  --success-soft:   #EDF7F3;
  --success-border: #A8DBCB;
  --success-text:   #004D36;

  --warning:        #9E6010;
  --warning-soft:   #FAF0DE;
  --warning-border: #EBD3A2;
  --warning-text:   #7A4A0B;

  --danger:         #A51C30; /* Harvard Crimson */
  --danger-soft:    #FAF0F2;
  --danger-border:  #E8CCD0;
  --danger-text:    #781422;

  --info:           #1C4E80;
  --info-soft:      #EAF1F8;
  --info-text:      #133C66;
  --info-border:    #BAD0E8;


  /* -- Foreground on a filled semantic button -----------------------------
     Added 2026-09 (IntelliTrain 3.0). The button block hardcoded #fff on
     danger and success fills. That is right in light mode and wrong in dark,
     where those tokens become LIGHT tints — white on #E05367 measures ~3.3:1.
     These flip with the theme so a filled status button stays readable. */
  --on-danger:  #FFFFFF;
  --on-success: #FFFFFF;
  --on-warning: #FFFFFF;
  --on-info:    #FFFFFF;

  --neutral-soft:   var(--n-100);
  --neutral-border: var(--n-200);
  --neutral-text:   var(--n-700);

  /* -- Surfaces --------------------------------------------------------- */
  --canvas:        var(--n-25);
  --surface:       var(--n-0);
  --surface-2:     var(--n-50);
  --surface-3:     var(--n-100);
  --surface-inset: var(--n-50);
  --surface-hover: var(--n-50);

  /* -- Text -------------------------------------------------------------- */
  --text:        var(--n-900);
  --text-muted:  var(--n-600);
  --text-subtle: #685F53;
  --text-invert: var(--n-0);
  --muted:       var(--text-muted);

  /* -- Borders ----------------------------------------------------------- */
  --border:        var(--n-200);
  --border-subtle: var(--n-150);
  --border-strong: var(--n-300);

  /* -- Navigation rail — Warm Scholarly Paper ---------------------------- */
  --rail:        var(--n-0);
  --rail-2:      var(--n-50);
  --rail-border: var(--n-150);
  --rail-text:   var(--n-700);
  --rail-text-hi:var(--n-950);
  --rail-text-lo:var(--n-500);
  --rail-w:      272px;
  --rail-w-mini: 72px;

  --sidebar-bg:  var(--rail);
  --sidebar-w:   var(--rail-w);
  --topbar-bg:   rgba(255, 255, 255, .92);
  --topbar-h:    60px;

  /* Executive Oxblood Charcoal Ground — for inverted sections */
  --ink:     #1A1215;
  --ink-fg:  #FAF8F5;
  --dark:    var(--ink);

  /* -- Typography — EB Garamond & Source Serif 4 ------------------------- */
  --font-display: 'EB Garamond', 'Playfair Display', 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-head:    var(--font-display);
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    var(--font-ui);
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* 14px base. Enterprise density: a training matrix is read, not admired. */
  --fs-2xs:  0.6875rem;  /* 11 */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.875rem;   /* 14 */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  2.875rem;   /* 46 */
  --fs-5xl:  3.625rem;   /* 58 */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-display: -0.022em;
  --tracking-tight:   -0.011em;
  --tracking-wide:    0.01em;
  --tracking-caps:    0.085em;

  /* -- Spacing — 8pt ---------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 40px;  --s-8: 48px;  --s-9: 64px;  --s-10: 80px;

  /* -- Radius ------------------------------------------------------------ */
  --r-xs:  3px;
  --r-sm:  5px;
  --radius:8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-full:999px;
  --r-md:  var(--radius);
  --r-pill:var(--r-full);
  --radius-sm: var(--r-sm);
  --radius-lg: var(--r-lg);

  /* -- Elevation --------------------------------------------------------- */
  --e-0: none;
  --e-1: 0 1px 2px rgba(26, 18, 21, .05);
  --e-2: 0 1px 3px rgba(26, 18, 21, .07), 0 1px 2px rgba(26, 18, 21, .04);
  --e-3: 0 4px 14px rgba(26, 18, 21, .08), 0 1px 3px rgba(26, 18, 21, .05);
  --e-4: 0 18px 44px rgba(26, 18, 21, .14), 0 2px 8px rgba(26, 18, 21, .06);
  --e-focus: 0 0 0 3px rgba(165, 28, 48, .22);
  --shadow:    var(--e-2);
  --shadow-sm: var(--e-1);
  --shadow-md: var(--e-3);
  --shadow-lg: var(--e-4);

  /* -- Motion ----------------------------------------------------------- */
  --t-fast: 120ms;
  --t-base: 190ms;
  --t-slow: 280ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* -- Layout ------------------------------------------------------------ */
  --content-max: 1560px;
  --container:   1200px;
  --z-sticky: 100; --z-rail: 200; --z-topbar: 300;
  --z-backdrop: 900; --z-drawer: 1000; --z-modal: 1100; --z-toast: 1200;

  /* -- Data visualisation (Harvard Crimson, INSEAD Green, Academic Gold) - */
  --viz-1: #A51C30; /* Harvard Crimson */
  --viz-2: #006848; /* INSEAD Forest Green */
  --viz-3: #C5A059; /* Executive Academic Gold */
  --viz-4: #680D1A; /* Deep Claret */
  --viz-5: #1C4E80; /* Academic Cobalt */
  --viz-6: #008264; /* INSEAD Emerald */
  --viz-7: #854D0E; /* Bronze Umber */
  --viz-8: #595246; /* Slate Umber */

  /* -- Legacy aliases ---------------------------------------------------- */
  --lms-ink:    var(--text);
  --lms-fg:     var(--text);
  --lms-muted:  var(--text-muted);
  --lms-border: var(--border);
  --lms-primary:var(--accent);
  --tenant-primary: var(--accent);

  --ora:           var(--accent);
  --orange:        var(--accent);
  --orange-bright: var(--accent-hover);
  --al-orange:     var(--accent);
  --primary-bright:var(--accent-hover);
  --primary-glow:  rgba(165, 28, 48, .24);
  --shadow-primary:0 6px 20px rgba(165, 28, 48, .20);

  --navy:      var(--n-900);
  --navy2:     var(--n-800);
  --navy-2:    var(--n-800);
  --navy-deep: var(--n-950);
  --blk:       var(--n-950);
  --grey:      var(--text-muted);
  --line:      var(--border);

  --blue:        var(--accent);
  --blue-bright: var(--accent-hover);
  --blue-deep:   var(--accent-active);
  --blue-tint:   var(--accent-soft);
  --teal:        var(--viz-6);
}

/* == Dark — system preference (only when no explicit light choice) ====== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --n-0:    #1A1215; /* Deep oxblood charcoal */
    --n-25:   #130C0E;
    --n-50:   #22181C;
    --n-100:  #2C2025;
    --n-150:  #372A30;
    --n-200:  #46363E;
    --n-300:  #5B4951;
    --n-400:  #78646C;
    --n-500:  #99848C;
    --n-600:  #BDB0B6;
    --n-700:  #D8CFD3;
    --n-800:  #EDE7E9;
    --n-900:  #FAF6F7;
    --n-950:  #FFFFFF;
    --n-1000: #FFFFFF;

    --accent:        #E05367; /* Vibrant Crimson on dark */
    --accent-hover:  #EB6F81;
    --accent-active: #F58C9B;
    --accent-soft:   #38151B;
    --accent-border: #6B232E;
    --accent-text:   #F5A3AE;
    --accent-on:     #1A1215;
    --accent-rgb:    224, 83, 103;

    --crimson:        #E05367;
    --crimson-deep:   #C83C50;
    --crimson-soft:   #38151B;
    --crimson-border: #6B232E;
    --crimson-text:   #F5A3AE;

    --insead-green:        #32BE92; /* Luminous Emerald on dark */
    --insead-green-bright: #4FDBAD;
    --insead-green-soft:   #0E3326;
    --insead-green-border: #1B5842;
    --insead-green-text:   #79E6C3;

    --gold:        #E5C07B;
    --gold-soft:   #362B15;
    --gold-border: #614D23;
    --gold-text:   #F3D89D;

    --success:        #32BE92;
    --success-soft:   #0E3326;
    --success-border: #1B5842;
    --success-text:   #79E6C3;

    --warning:        #E5B25D;
    --warning-soft:   #362710;
    --warning-border: #664A1D;
    --warning-text:   #F5CF87;

    --danger:         #E05367;
    --danger-soft:    #38151B;
    --danger-border:  #6B232E;
    --danger-text:    #F5A3AE;

    --info:           #68A2E0;
    --info-soft:      #122438;
    --info-text:      #9BC2ED;
    --info-border:    #23466B;

    --on-danger:  #2A0E10;
    --on-success: #06180F;
    --on-warning: #1F1405;
    --on-info:    #08131C;

    --canvas:      #130C0E;
    --surface:     var(--n-0);
    --surface-2:   var(--n-50);
    --surface-3:   var(--n-100);
    --surface-inset: var(--n-50);
    --surface-hover: var(--n-100);

    --text:        var(--n-900);
    --text-muted:  var(--n-600);
    --text-subtle: var(--n-500);
    --text-invert: #130C0E;

    --border:        var(--n-200);
    --border-subtle: var(--n-150);
    --border-strong: var(--n-300);

    --rail:        #181013;
    --rail-2:      #20161A;
    --rail-border: #302227;
    --rail-text:   #BDB0B6;
    --rail-text-hi:#FFFFFF;
    --rail-text-lo:#78646C;
    --topbar-bg:   rgba(24, 16, 19, .92);

    --e-1: 0 1px 2px rgba(0,0,0,.45);
    --e-2: 0 1px 3px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45);
    --e-3: 0 4px 14px rgba(0,0,0,.60), 0 1px 3px rgba(0,0,0,.45);
    --e-4: 0 18px 44px rgba(0,0,0,.70), 0 2px 8px rgba(0,0,0,.50);
    --e-focus: 0 0 0 3px rgba(224, 83, 103, .3);

    --primary-glow:  rgba(224, 83, 103, .3);
    --shadow-primary:0 6px 20px rgba(0,0,0,.5);

    --viz-1: #E05367; --viz-2: #32BE92; --viz-3: #E5C07B; --viz-4: #F58C9B;
    --viz-5: #68A2E0; --viz-6: #4FDBAD; --viz-7: #D89858; --viz-8: #BDB0B6;
  }
}

/* == Dark — explicit choice ============================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --n-0:    #1A1215;
  --n-25:   #130C0E;
  --n-50:   #22181C;
  --n-100:  #2C2025;
  --n-150:  #372A30;
  --n-200:  #46363E;
  --n-300:  #5B4951;
  --n-400:  #78646C;
  --n-500:  #99848C;
  --n-600:  #BDB0B6;
  --n-700:  #D8CFD3;
  --n-800:  #EDE7E9;
  --n-900:  #FAF6F7;
  --n-950:  #FFFFFF;
  --n-1000: #FFFFFF;

  --accent:        #E05367;
  --accent-hover:  #EB6F81;
  --accent-active: #F58C9B;
  --accent-soft:   #38151B;
  --accent-border: #6B232E;
  --accent-text:   #F5A3AE;
  --accent-on:     #1A1215;
  --accent-rgb:    224, 83, 103;

  --crimson:        #E05367;
  --crimson-deep:   #C83C50;
  --crimson-soft:   #38151B;
  --crimson-border: #6B232E;
  --crimson-text:   #F5A3AE;

  --insead-green:        #32BE92;
  --insead-green-bright: #4FDBAD;
  --insead-green-soft:   #0E3326;
  --insead-green-border: #1B5842;
  --insead-green-text:   #79E6C3;

  --gold:        #E5C07B;
  --gold-soft:   #362B15;
  --gold-border: #614D23;
  --gold-text:   #F3D89D;

  --success:        #32BE92;
  --success-soft:   #0E3326;
  --success-border: #1B5842;
  --success-text:   #79E6C3;

  --warning:        #E5B25D;
  --warning-soft:   #362710;
  --warning-border: #664A1D;
  --warning-text:   #F5CF87;

  --danger:         #E05367;
  --danger-soft:    #38151B;
  --danger-border:  #6B232E;
  --danger-text:    #F5A3AE;

  --info:           #68A2E0;
  --info-soft:      #122438;
  --info-text:      #9BC2ED;
  --info-border:    #23466B;

  --on-danger:  #2A0E10;
  --on-success: #06180F;
  --on-warning: #1F1405;
  --on-info:    #08131C;

  --canvas:      #130C0E;
  --surface:     var(--n-0);
  --surface-2:   var(--n-50);
  --surface-3:   var(--n-100);
  --surface-inset: var(--n-50);
  --surface-hover: var(--n-100);

  --text:        var(--n-900);
  --text-muted:  var(--n-600);
  --text-subtle: var(--n-500);
  --text-invert: #130C0E;

  --border:        var(--n-200);
  --border-subtle: var(--n-150);
  --border-strong: var(--n-300);

  --rail:        #181013;
  --rail-2:      #20161A;
  --rail-border: #302227;
  --rail-text:   #BDB0B6;
  --rail-text-hi:#FFFFFF;
  --rail-text-lo:#78646C;
  --topbar-bg:   rgba(24, 16, 19, .92);

  --e-1: 0 1px 2px rgba(0,0,0,.45);
  --e-2: 0 1px 3px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45);
  --e-3: 0 4px 14px rgba(0,0,0,.60), 0 1px 3px rgba(0,0,0,.45);
  --e-4: 0 18px 44px rgba(0,0,0,.70), 0 2px 8px rgba(0,0,0,.50);
  --e-focus: 0 0 0 3px rgba(224, 83, 103, .3);

  --primary-glow:  rgba(224, 83, 103, .3);
  --shadow-primary:0 6px 20px rgba(0,0,0,.5);

  --viz-1: #E05367; --viz-2: #32BE92; --viz-3: #E5C07B; --viz-4: #F58C9B;
  --viz-5: #68A2E0; --viz-6: #4FDBAD; --viz-7: #D89858; --viz-8: #BDB0B6;
}

/* Motion is a courtesy, never a dependency. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}

/* ==========================================================================
   IntelliTrain v4 — blue/orange product identity
   The supplied IntelliTrain mark is now the visual source of truth across
   the product and public site. These late-bound tokens intentionally replace
   the short-lived crimson/academic treatment without changing component APIs.
   ========================================================================== */
:root {
  --n-0:#FFFFFF;
  --n-25:#FBFDFF;
  --n-50:#F5F9FE;
  --n-100:#ECF3FB;
  --n-150:#DDE9F6;
  --n-200:#CADCED;
  --n-300:#ADC5DD;
  --n-400:#7F9AB5;
  --n-500:#5E7691;
  --n-600:#405875;
  --n-700:#243C5B;
  --n-800:#102C50;
  --n-900:#071E43;
  --n-950:#04152F;
  --n-1000:#020D20;

  --accent:#0865C3;
  --accent-hover:#0755A6;
  --accent-active:#06488C;
  --accent-soft:#EAF4FF;
  --accent-border:#BBD9F7;
  --accent-text:#0755A6;
  --accent-on:#FFFFFF;
  --accent-rgb:8,101,195;

  --brand:#FF7A16;
  --brand-soft:#FFF2E8;
  --brand-text:#C95000;
  --brand-rgb:255,122,22;

  --crimson:var(--accent);
  --crimson-deep:var(--accent-hover);
  --crimson-soft:var(--accent-soft);
  --crimson-border:var(--accent-border);
  --crimson-text:var(--accent-text);

  --insead-green:#079669;
  --insead-green-bright:#087D5B;
  --insead-green-soft:#E9F8F2;
  --insead-green-border:#B7E6D4;
  --insead-green-text:#067252;
  --insead-green-rgb:7,150,105;

  --gold:var(--brand);
  --gold-soft:var(--brand-soft);
  --gold-border:#FFD1AD;
  --gold-text:#B94A00;

  --canvas:#F7FAFE;
  --surface:#FFFFFF;
  --surface-2:#F2F7FC;
  --surface-3:#E8F1FA;
  --surface-inset:#EDF4FB;
  --surface-hover:#F5F9FE;

  --text:#071E43;
  --text-muted:#405875;
  --text-subtle:#596F8A;   /* was #7188A1 = 3.4-3.66:1, below WCAG AA 4.5. This is the lightest value clearing 4.5 on surface/canvas/surface-2. */
  --text-invert:#FFFFFF;
  --border:#D8E5F1;
  --border-subtle:#E7EFF7;
  --border-strong:#BDD1E4;

  --rail:#061B38;
  --rail-2:#0A294F;
  --rail-border:rgba(255,255,255,.09);
  --rail-text:rgba(255,255,255,.68);
  --rail-text-hi:#FFFFFF;
  --rail-text-lo:rgba(255,255,255,.42);
  --topbar-bg:rgba(255,255,255,.94);

  --ink:#061B38;
  --ink-fg:#FFFFFF;
  --dark:var(--ink);
  --font-display:'Sora','Inter',system-ui,sans-serif;
  --font-head:var(--font-display);
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:var(--font-ui);

  --r-xs:5px;
  --r-sm:8px;
  --radius:10px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:20px;

  --e-1:0 1px 2px rgba(7,30,67,.05);
  --e-2:0 3px 12px rgba(7,30,67,.07);
  --e-3:0 10px 28px rgba(7,30,67,.11);
  --e-4:0 24px 60px rgba(7,30,67,.16);
  --e-focus:0 0 0 3px rgba(8,101,195,.22);
  --primary-glow:rgba(8,101,195,.22);
  --shadow-primary:0 8px 22px rgba(8,101,195,.20);

  --viz-1:#0865C3;
  --viz-2:#079669;
  --viz-3:#FF7A16;
  --viz-4:#5B67D7;
  --viz-5:#0C9AC6;
  --viz-6:#E8A113;
  --viz-7:#C64278;
  --viz-8:#60758A;

  --primary:var(--accent);
  --primary-dark:var(--accent-hover);
  --primary-light:var(--accent-soft);
  --orange:var(--brand);
  --orange-bright:#FF9138;
  --ora:var(--brand);
  --al-orange:var(--brand);
  --blue:var(--accent);
  --blue-bright:#2686DF;
  --blue-deep:var(--accent-active);
  --blue-tint:var(--accent-soft);
  --teal:#0C9AC6;
}

:root[data-theme="dark"] {
  --canvas:#06101F;
  --surface:#0B1B31;
  --surface-2:#102541;
  --surface-3:#17304F;
  --surface-inset:#07172A;
  --surface-hover:#132B49;
  --text:#EDF6FF;
  --text-muted:#A9BDD2;
  --text-subtle:#8AA3BC;   /* was #7791AC = 4.09:1 on surface-3, below WCAG AA 4.5. */
  --border:#203B59;
  --border-subtle:#172E49;
  --border-strong:#315274;
  --accent:#53A4F1;
  --accent-hover:#77B8F5;
  --accent-active:#96C9F8;
  --accent-soft:rgba(83,164,241,.15);
  --accent-border:rgba(83,164,241,.34);
  --accent-text:#9CCDFC;
  --accent-on:#031326;
  --brand:#FF923E;
  --brand-soft:rgba(255,146,62,.14);
  --brand-text:#FFB176;
  --gold:var(--brand);
  --gold-soft:var(--brand-soft);
  --gold-border:rgba(255,146,62,.34);
  --gold-text:#FFC292;
  --rail:#031020;
  --rail-2:#071A31;
  --topbar-bg:rgba(6,16,31,.94);
  --ink:#031020;
  --ink-fg:#FFFFFF;
}