/* ============================================================================
   DLC design tokens — shared by the Practicum Portal and the Student Dashboard.
   Import this in BOTH. Never redefine a value locally; add a token instead.

   Brand:  navy #103952 · gold #fcb525 · Praktika (display) · SF Pro Text (UI)
   Source: DLC Brand Guide. Ramps derived in OKLCH from the two brand hexes.

   Colour rules that are NOT negotiable:
     - Gold on white is 1.78:1. NEVER gold text on a light surface — use
       --gold-700 (#9c6500, 4.91:1). Gold on navy is 6.81:1 and is the
       intended pairing.
     - The six domain hues are a categorical palette. Validated ADJACENT in
       both modes (worst CVD ΔE 9.1 light / 8.4 dark; normal-vision 19.6 /
       19.3). Six hues cannot clear an all-pairs gate — so every coloured
       element MUST carry a visible text label. Colour never carries meaning
       alone.
     - Three light-mode domain hues sit below 3:1 on white. They are fills
       behind labelled content, never text and never a lone icon.
   ========================================================================== */

:root {
  /* ---- brand primitives ---- */
  --brand-navy:#103952;
  --brand-gold:#fcb525;

  /* ---- navy ramp (hue 239.8) ---- */
  --navy-950:#010f1a; --navy-900:#041d2d; --navy-850:#0a2c40; --navy-800:#133c55;
  --navy-700:#274f69; --navy-600:#426882; --navy-500:#65859c; --navy-400:#8aa2b4;
  --navy-300:#b0c0cd; --navy-200:#cfd9e1; --navy-100:#e6ecf1; --navy-50:#f4f7f9;

  /* ---- gold ramp (hue 78.6) ---- */
  --gold-700:#9c6500; --gold-600:#c18100; --gold-500:#efa800; --gold-400:#fec25a;
  --gold-300:#ffd793; --gold-200:#ffe9c3; --gold-100:#fff4e0;

  /* ---- type ---- */
  --font-display:'Praktika','Praktika Bold',system-ui,sans-serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  --font-num:var(--font-ui);

  /* Praktika is a DISPLAY face: uppercase, tracked, headings and the wordmark
     only. Everything at or below 15px wears --font-ui. */
  --track-display:.075em;   /* brand guide: tracking 75  */
  --track-caption:.1em;     /* brand guide: tracking 100 */

  --step--1:12px; --step-0:14px; --step-1:16px; --step-2:20px;
  --step-3:26px;  --step-4:34px; --step-5:44px;

  --radius-sm:6px; --radius:10px; --radius-lg:16px; --radius-pill:999px;
}

/* ---------------------------------------------------------------- LIGHT --- */
:root, :root[data-theme="light"] {
  color-scheme:light;

  --plane:var(--navy-50);          /* page background      */
  --surface:#ffffff;               /* cards, panels        */
  --surface-2:var(--navy-50);      /* inset / striped rows */
  --hairline:var(--navy-100);
  --line:var(--navy-200);

  --ink:var(--brand-navy);
  --ink-2:var(--navy-700);
  /* MEASURED 2026-08-12, was var(--navy-500): #65859c is 3.90:1 on --surface (#ffffff) and 3.62:1
     on --plane — below the 4.5:1 AA floor for normal text, and this token carries captions, helper
     lines and every "none yet" placeholder in the portal. navy-600 is 5.94:1 / 5.52:1. Dark mode
     was already fine (navy-400 = 6.49:1) and is unchanged. Raised here rather than aliased around
     in the portal, so the Student Dashboard inherits the fix too. */
  --ink-muted:var(--navy-600);
  --ink-on-accent:#ffffff;

  --accent:var(--brand-navy);      /* primary action, nav, headings */
  --accent-hover:var(--navy-800);
  --accent-soft:var(--navy-100);
  --highlight:var(--brand-gold);   /* emphasis ON navy only */
  --highlight-ink:var(--gold-700); /* gold-flavoured TEXT on light */
  --highlight-soft:var(--gold-200);
  --focus-ring:var(--brand-gold);

  /* domain hues — Production teaching tracks. Labels mandatory. */
  --d-audio:#2a78d6; --d-video:#e87ba4; --d-lighting:#eda100;
  --d-systems:#1baf7a; --d-heart:#eb6834; --d-leading:#4a3aa7;

  /* MEASURED 2026-09-21. The status four were stated ONCE, here, and the dark blocks never restated
     them - so the same #d03b3b sat on --surface dark (#041d2d) at 3.60:1, under the AA floor for
     the 13px text three surfaces paint with it. Dark values now live beside the domain hues in
     both dark blocks (Dillon, 2026-09-21: "yes - you can edit the css yourself"). On #041d2d:
     good 7.7:1, warning 9.4:1, serious 6.6:1, critical 6.8:1. Light values unchanged. */
  --status-good:#0ca30c; --status-warning:#fab219;
  --status-serious:#ec835a; --status-critical:#d03b3b;
}

/* ----------------------------------------------------------------- DARK --- */
/* Navy-derived, not neutral charcoal — so navy chrome still reads. Selected
   steps, not an automatic flip. */
@media (prefers-color-scheme:dark) {
  :root:where(:not([data-theme="light"])) { color-scheme:dark;
    --plane:var(--navy-950); --surface:var(--navy-900); --surface-2:var(--navy-850);
    --hairline:var(--navy-850); --line:var(--navy-800);
    --ink:#ffffff; --ink-2:var(--navy-200); --ink-muted:var(--navy-400);
    --ink-on-accent:var(--navy-950);
    --accent:var(--brand-gold); --accent-hover:var(--gold-400);
    --accent-soft:var(--navy-800);
    --highlight:var(--brand-gold); --highlight-ink:var(--brand-gold);
    --highlight-soft:var(--navy-800);
    --d-audio:#3987e5; --d-video:#d55181; --d-lighting:#c98500;
    --d-systems:#199e70; --d-heart:#d95926; --d-leading:#9085e9;
    --status-good:#34c759; --status-warning:#fab219; --status-serious:#ec835a; --status-critical:#f28b82;
  }
}
:root[data-theme="dark"] { color-scheme:dark;
  --plane:var(--navy-950); --surface:var(--navy-900); --surface-2:var(--navy-850);
  --hairline:var(--navy-850); --line:var(--navy-800);
  --ink:#ffffff; --ink-2:var(--navy-200); --ink-muted:var(--navy-400);
  --ink-on-accent:var(--navy-950);
  --accent:var(--brand-gold); --accent-hover:var(--gold-400);
  --accent-soft:var(--navy-800);
  --highlight:var(--brand-gold); --highlight-ink:var(--brand-gold);
  --highlight-soft:var(--navy-800);
  --d-audio:#3987e5; --d-video:#d55181; --d-lighting:#c98500;
  --d-systems:#199e70; --d-heart:#d95926; --d-leading:#9085e9;
  --status-good:#34c759; --status-warning:#fab219; --status-serious:#ec835a; --status-critical:#f28b82;
}

/* Tint behind a domain-coloured card. Replaces the portal's --*bg vars. */
.d-tint{background:color-mix(in srgb,var(--d) 14%,var(--surface));border-left:3px solid var(--d)}