/* ══════════════════════════════════════════════════════════════════════════
   kim-x design tokens — KAM's copy of the shared family layer
   --------------------------------------------------------------------------
   SOURCE: kim/frontend/src/design-system/{tokens.js, theme.css}, itself
   vendored from @vijay/kim-design-system@0.2.0. Re-sync from the package on
   upgrade; do not hand-edit values here without pushing them back.

   WHY A SEPARATE FILE. KIM keeps its variant in an overlay that @imports the
   base stylesheet, because KIM has two coexisting themes to switch between.
   KAM has one, so an @import would buy nothing but a second round trip.
   Instead the token layer lives here and loads BEFORE styles.css, which
   keeps a single source of truth for colour and makes the vendored boundary
   explicit — styles.css holds rules, this file holds values.

   WHAT KAM CONTRIBUTES BACK. --kim-accent-5 (violet) and --kim-accent-6
   (magenta) are promoted from KAM's own entity palette; the family had four
   accents and the six personas need six. The dark-surface text variants are
   also new: KIM's theme.css has no dark theme, so the -text variants it
   ships are light-surface only. Measured on the dark panel all six score
   2.54–3.42, none reaching AA. A third change is --muted-2 on light,
   darkened from the family's #837B72 to clear AA for the small meta text it
   carries (see the ink block). All three are flagged for KIM's next
   design-system sync.

   CONTRAST — WHAT A -text TOKEN GUARANTEES. Every -text value below clears
   AA 4.5 as small text on EVERY background its own family produces: all
   three plain surfaces (--panel, --panel-2, --bg) AND its own tint at each
   strength the stylesheet mixes (7/9/10/12/13/14%, i.e. pills, badges, the
   nav active state, the platform banner). Both themes.

   That contract is wider than it used to be. The values were originally
   tuned against ONE surface — #FAF9F7 light, #221F1B dark — which left 20
   distinct AA failures in light and 15 in dark, because the elements that
   use them mostly sit on --panel-2 or on a tint, not on the surface they
   were measured against. Tune against the worst background a colour lands
   on, never the most convenient one.

   The base accents are for fills, borders and graphics (>=3.0) and mostly
   do NOT pass as small text — that is why the variants exist. Rule: any
   `color:` takes the -text variant; `background:`/`border-color:` take the
   base. A filled control that carries a label uses the -text variant as its
   FILL, with --accent-ink / --pa-ink on top.

   Re-check with tools/tests/contrast.js after touching any value here.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;

  /* ── typography ──────────────────────────────────────────────────────────
     Oswald stands in for Gunplay, which is licensed and unavailable on the
     web — the same substitution KIM documents. JetBrains Mono already
     matched before the retheme. */
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Oswald','Arial Narrow',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;

  /* ── surfaces ────────────────────────────────────────────────────────────
     Content sits on light; the ramp is warm, not cool. This single shift is
     the main thing that made KAM and KIM read as two different products.
     --panel-3 is a KAM extension: the family ships three surfaces and KAM's
     layout needs a fourth step below sunken. */
  --bg:#F1EFEB;          /* surfaceSunken — the page ground */
  --panel:#FFFFFF;       /* surface */
  --panel-2:#FAF9F7;     /* surfaceRaised */
  --panel-3:#EDE9E3;     /* KAM extension */

  /* ── ink ─────────────────────────────────────────────────────────────────
     --muted-2 is a KAM DEVIATION from the family value #837B72, and the
     reason is contrast. That tone carries the entire meta layer — panel
     overlines, table headers, counter badges, date fields — all of it small
     text at 10-11px, and the family value missed AA on every light surface:
     4.17 on white, 3.96 on raised, 3.63 on the page ground.

     PICK THE VALUE AGAINST THE SURFACE IT ACTUALLY LANDS ON, not the
     lightest one. A first attempt at #7D756C cleared white (4.53) and was
     wrong: counting the rendered DOM across all 105 persona x view
     combinations, this tone sits on --panel-2 #FAF9F7 6052 times, on
     --panel #FFFFFF 353 times and on --bg #F1EFEB 8 times, so white is the
     rarest case. #7D756C scored 4.31 where it mattered most.
     #736B62 clears all three: 5.24 / 4.98 / 4.56. (--panel-3 would need
     #70685F, but no muted-2 text renders on it.)

     The dark theme needed the mirror-image fix for the mirror-image reason:
     #948B80 scored 4.43 on the dark --panel-2, so it was LIGHTENED to
     #A9A198. Flagged for KIM's next design-system sync with accent-5/-6. */
  --ink:#16130F;
  --muted:#4B453E;
  --muted-2:#736B62;
  --ink-inverse:#F7F5F1;

  /* ── lines ───────────────────────────────────────────────────────────────
     The family's --line is full ink (#16130F) for heavy frames. KAM uses
     --line for ordinary borders, so it maps to lineSubtle. */
  --line:#E2DDD5;
  --line-2:#EFEBE4;

  /* ── accents ─────────────────────────────────────────────────────────────
     --accent is the product accent until the persona layer lands, at which
     point the persona owns this slot. Teal, because it is both the family's
     accent-2 and the closest thing to KAM's previous #0E9C8F. */
  --accent:#1F8A8A;      --accent-text:#1A7373;   --accent-ink:#FFFFFF;
  --accent-2:#E0A92E;    --accent-2-text:#7A5C18;
  --accent-3:#5A6B7B;    --accent-3-text:#596A7A;
  --warning:#E0A92E;     --warning-text:#7A5C18;
  --danger:#C8381F;      --danger-text:#B0311B;
  --good:#2E7D4F;        --good-text:#286C45;
  --violet:#7C5FC9;      --violet-text:#7257B8;

  /* ── persona accents ─────────────────────────────────────────────────────
     One accent per view: whichever persona is active owns the accent slot.
     Consumed by personas.js in Phase 2. */
  /* Label colour for a filled persona accent. One value covers all six:
     fills use the -text variant, and white clears AA on every one of them
     in light (4.75–5.49 measured). */
  --pa-ink:#FFFFFF;

  --pa-business:#7C5FC9;     --pa-business-text:#7257B8;
  --pa-data:#B84E85;         --pa-data-text:#A54676;
  --pa-technology:#1F8A8A;   --pa-technology-text:#1A7373;
  --pa-governance:#5A6B7B;   --pa-governance-text:#596A7A;
  --pa-leadership:#E0A92E;   --pa-leadership-text:#7A5C18;
  --pa-platform:#E8462B;     --pa-platform-text:#BA3822;

  /* ── entity signal colours ───────────────────────────────────────────────
     KAM-specific, warmth-corrected against the new ground. The cool blues
     (--proc, --ai, --ctl) moved furthest: they were the ones that clashed
     hardest with a warm surface. */
  --cap:#A87715;--app:#1F8A8A;--tech:#2E7E76;--proc:#4A6FA5;--req:#7C5FC9;
  --art:#BC5A7E;--ai:#3E7E9C;--prn:#8A7248;--dec:#2E7D4F;--rsk:#C8381F;
  --stk:#B84E85;--ctl:#6A66A8;--std:#7A8228;--wvr:#B86A24;--wpk:#24847A;
  --goal:#7C5FC9;--dob:#37796F;--ifc:#B84E85;
  --canv:#5F86A8;--rev:#8367B5;

  /* Designer sticky note. The fill is the family's accent-3-soft, which is
     what an ochre sticky should have been all along. */
  --dz-sticky:#FAF0D6;--dz-sticky-ink:#4A3B12;

  /* ── shape ───────────────────────────────────────────────────────────── */
  /* KIM's radius scale is sharper than a single value: 2px on controls and
     labels, 4px on cards. --radius stays as the alias the existing rules
     already use. */
  --r1:2px;--r2:2px;--r3:4px;
  --radius:4px;

  /* Two shadow families, and the distinction carries the brand.
     --shadow is the soft card lift. --shadow-hard-sm is the stencil offset:
     solid ink, no blur, no spread — the device that makes a KIM button look
     pressable, and the most recognisable thing in the whole system. */
  --shadow:0 2px 8px rgba(22,19,15,.08);
  --shadow-hard-sm:2px 2px 0 rgba(22,19,15,1);
  --shadow-hard:4px 4px 0 rgba(22,19,15,1);
  --shadow-soft:0 14px 40px rgba(22,19,15,.18);
  --line-soft:#ECE7DE;
  --grid-line:rgba(22,19,15,.05);
  --svg-bg:#FAF9F7;
}

[data-theme="dark"]{
  color-scheme:dark;

  /* Canvas #1C1A18 / canvasElevated #2A2724 from the family, extended
     downward for the page ground. */
  --bg:#16130F;
  --panel:#221F1B;
  --panel-2:#2A2724;
  --panel-3:#332F2A;

  --ink:#F7F5F1;
  --muted:#C6BEB4;
  --muted-2:#A9A198;
  --ink-inverse:#16130F;

  --line:#3A352F;
  --line-2:#2E2A25;

  /* Dark-surface text variants — lightened from the BASE accent, not from
     the light variant. Ochre needs none: it scores 7.72 on the dark panel,
     the mirror image of its 2.02 on light. */
  --accent:#339494;      --accent-text:#64AEAE;   --accent-ink:#0E1A1A;
  --accent-2:#E0A92E;    --accent-2-text:#E0A92E;
  --accent-3:#7B8895;    --accent-3-text:#98A2AC;
  --warning:#E0A92E;     --warning-text:#E0A92E;
  --danger:#E9543B;      --danger-text:#EF8371;
  --good:#4FA87A;        --good-text:#64B28A;
  --violet:#9078D1;      --violet-text:#AB98DC;

  /* Dark flips it: the accents are lightened here, so the label goes dark.
     Every persona scores >=5.11 against near-black. */
  --pa-ink:#16130F;

  --pa-business:#9078D1;     --pa-business-text:#AB98DC;
  --pa-data:#C36A98;         --pa-data-text:#D18CAF;
  --pa-technology:#339494;   --pa-technology-text:#64AEAE;
  --pa-governance:#7B8895;   --pa-governance-text:#98A2AC;
  --pa-leadership:#E0A92E;   --pa-leadership-text:#E0A92E;
  --pa-platform:#E9543B;     --pa-platform-text:#EF8371;

  --cap:#D4A03C;--app:#339494;--tech:#4FA39B;--proc:#7E9DC9;--req:#9078D1;
  --art:#D982A3;--ai:#6FA6C2;--prn:#B49A70;--dec:#4FA87A;--rsk:#E9543B;
  --stk:#C36A98;--ctl:#8E8AC8;--std:#A3AC55;--wvr:#D08B4C;--wpk:#4FA89C;
  --goal:#9078D1;--dob:#4FA39B;--ifc:#C36A98;
  --canv:#86A9C6;--rev:#A98FD4;
  --dz-sticky:#4A3B12;--dz-sticky-ink:#F5E5A8;

  --shadow:0 2px 8px rgba(0,0,0,.35);
  --shadow-hard-sm:2px 2px 0 rgba(0,0,0,.85);
  --shadow-hard:4px 4px 0 rgba(0,0,0,.85);
  --shadow-soft:0 18px 50px rgba(0,0,0,.55);
  --line-soft:#332F2A;
  --grid-line:rgba(247,245,241,.045);
  --svg-bg:#1B1815;
}