/* ===========================================================
   KIT Portal Design System v1.0
   Structure : KIT Indigo #0F145B / KIT Sky #74C0EB
   Ground    : Pantone 11-4201 Cloud Dancer
   Categories: five Powdered Pastels anchors

   The system of record for every colour in this portal. Nothing
   downstream may hard-code a hex: if a screen needs a colour that
   is not here, that is a system decision, and the answer is to add
   a token rather than inline the value.

   Three blocks, in this order, and the order is load-bearing:

     1. bare :root          the complete light palette
     2. prefers-color-scheme  guarded, so an explicit light choice
                              still wins on a dark operating system
     3. [data-theme="dark"]   so the toggle wins in the other direction

   ⚠ Never declare a colour only inside the media query or the
   attribute block. A token whose sole definition sits behind
   [data-theme] does not exist in the un-stamped state — which is
   what most people see — and the page then renders one theme's
   text on the other theme's ground.
   =========================================================== */

:root{
  /* Brand and Pantone constants. ⚠ Deliberately NOT theme-dependent: these are the
     colours themselves, not roles. --cloud-dancer is what the logo plate is made of,
     in both themes, because the mark's indigo strokes vanish on the dark ground. */
  --kit-indigo:#0F145B;
  --kit-sky:#74C0EB;
  --cloud-dancer:#F0EEE9;

  /* ground */
  --bg:#F0EEE9;
  --surface:#FAF9F6;
  --surface-2:#FFFFFF;
  --surface-sunk:#E7E4DC;

  /* lines */
  --border:#DFDBD2;
  --border-strong:#857E70;

  /* ink */
  --ink:#14183C;
  --ink-2:#585B72;
  --ink-3:#63667C;

  /* accent — the KIT mark. Primary action, active navigation,
     selection. Budget it at roughly 5% of any screen. */
  --accent:#0F145B;
  --accent-hover:#1C2478;
  --accent-soft:#E4E7F5;
  --on-accent:#F0EEE9;

  /* status — reserved. Never a brand colour, never a category,
     never a chart series. */
  --good:#0C6E50;  --good-soft:#DCEDE6;
  --warn:#8A5008;  --warn-soft:#F4E7D5;
  --bad:#B4232A;   --bad-soft:#F7E0E0;

  /* categories — fill + paired ink, for a fixed labelled taxonomy.
     These sit 1.12–1.34:1 against the ground, so a tag carries a
     hairline to read as a chip and must always show its name. */
  --c1:#D4E4F1; --c1i:#45667F;   /* Ice Melt     */
  --c2:#D5D5D7; --c2i:#59587A;   /* Nimbus Cloud */
  --c3:#DBD3DC; --c3i:#6D5370;   /* Orchid Tint  */
  --c4:#F0D9CC; --c4i:#81563D;   /* Peach Dust   */
  --c5:#C9D3C0; --c5i:#4A5C37;   /* Almost Aqua  */

  /* chart: categorical, fixed order — assign in sequence, never
     cycle a sixth */
  --s1:#4250B5; --s2:#C75F0B; --s3:#0D8FB0; --s4:#B02C77; --s5:#4A8A1E;

  /* chart: sequential, dark to light */
  --q1:#0F145B; --q2:#193778; --q3:#295895; --q4:#3E7AB2; --q5:#589DCF;

  --tag-line:rgba(0,0,0,.09);
  --shadow:0 1px 2px rgba(20,24,60,.06), 0 8px 24px -12px rgba(20,24,60,.14);

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* system dark; an explicit light choice still wins */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0C1F;
    --surface:#12162E;
    --surface-2:#1B2040;
    --surface-sunk:#070917;

    --border:#262C4E;
    --border-strong:#707BB6;

    --ink:#ECEAE4;
    --ink-2:#A8ADC4;
    --ink-3:#767C99;

    --accent:#74C0EB;
    --accent-hover:#92CFF0;
    --accent-soft:#16283C;
    --on-accent:#0A0C1F;

    --good:#3ED598;  --good-soft:#0F2E26;
    --warn:#F5B544;  --warn-soft:#2E2413;
    --bad:#FF6B6B;   --bad-soft:#33161B;

    --c1:#1A242C; --c1i:#738EA4;
    --c2:#22212C; --c2i:#8989A7;
    --c3:#282029; --c3i:#9B859E;
    --c4:#2D1F17; --c4i:#A48573;
    --c5:#1F2519; --c5i:#829074;

    --s1:#0092D2; --s2:#BC7400; --s3:#00A062; --s4:#986DD0; --s5:#D05A6E;
    --q1:#295895; --q2:#3E7AB2; --q3:#589DCF; --q4:#75C0EB; --q5:#9ED3F1;

    --tag-line:rgba(255,255,255,.10);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}

/* explicit dark choice wins over a light operating system */
:root[data-theme="dark"]{
  --bg:#0A0C1F;
  --surface:#12162E;
  --surface-2:#1B2040;
  --surface-sunk:#070917;

  --border:#262C4E;
  --border-strong:#707BB6;

  --ink:#ECEAE4;
  --ink-2:#A8ADC4;
  --ink-3:#767C99;

  --accent:#74C0EB;
  --accent-hover:#92CFF0;
  --accent-soft:#16283C;
  --on-accent:#0A0C1F;

  --good:#3ED598;  --good-soft:#0F2E26;
  --warn:#F5B544;  --warn-soft:#2E2413;
  --bad:#FF6B6B;   --bad-soft:#33161B;

  --c1:#1A242C; --c1i:#738EA4;
  --c2:#22212C; --c2i:#8989A7;
  --c3:#282029; --c3i:#9B859E;
  --c4:#2D1F17; --c4i:#A48573;
  --c5:#1F2519; --c5i:#829074;

  --s1:#0092D2; --s2:#BC7400; --s3:#00A062; --s4:#986DD0; --s5:#D05A6E;
  --q1:#295895; --q2:#3E7AB2; --q3:#589DCF; --q4:#75C0EB; --q5:#9ED3F1;

  --tag-line:rgba(255,255,255,.10);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

/* The page must paint its own ground. A transparent body borrows
   whatever is behind it, which in a re-themed portal is the wrong
   theme half the time. */
html, body{ background: var(--bg); color: var(--ink); }