/* Hello Kindred house tokens — DataFlow's own copy.
   ==========================================================================
   PROVENANCE. Lines 1-146 of the Employment Equity Tool's stylesheet
   (D:\Kindred\Employment Equity\web\css\ee.css), which is the visual source
   of truth for the Hello Kindred software family: the token block and its two
   dark-mode blocks, copied verbatim below this header. Copied rather than
   imported, following EE's own note — two applications should not be able to
   restyle each other by accident, and a file shared across application roots
   would make an EE deploy a DataFlow deploy.

   TOKENS ONLY, AND THAT IS DELIBERATE. EE's component rules are NOT here, and
   importing them would break this app rather than rebrand it. The two
   stylesheets share a large class vocabulary by coincidence — .shell, .card,
   .panel, .chip, .btn, .stat, .field-label, .eyebrow, .hint — and the words
   mean different things in each. EE's .shell is the flex page frame; here it
   is the centred content column. Bringing the component layer across turned
   every DataFlow page into a row of columns, with the survey's questions
   shouting in uppercase, because the theme's .shell and .field-label quietly
   won. DataFlow already owns a complete component set; what it needed from EE
   was the palette, the type ramp, the spacing scale and the shadows.

   dataflow.css is loaded after this file, aliases its own token names onto
   these, and restates its furniture in EE's shapes in the alignment layer at
   the end. Read that section next.

   EDITING. If EE's tokens move, re-copy lines 1-146 rather than hand-patching,
   and re-check the alignment layer.
   ========================================================================== */

/* Employment Equity Tool — Hello Kindred / Kin OS theme.
   Self-contained: no imports, no remote fonts, no CDN. CIH holds its own copy
   of the house tokens rather than importing, because CIH and Command Centre
   are separate applications and neither should be able to restyle the other
   by accident.

   Two rules govern everything below and are worth stating once:

   1. FRESH LIME (#cbff02) IS A FILL, NEVER INK. Lime text on paper is ~1.2:1.
      `--accent` is only ever a background; `--accent-ink` is what you colour
      text with. Anything sitting on lime takes `--on-accent` (#09262d).
   2. THE CHROME IS BASALT IN BOTH THEMES. The rail and topbar do not invert
      with the theme toggle, so they carry their own `--rail-*` token set that
      the dark-mode blocks deliberately leave alone. Only the content column
      flips. */

:root{
  /* Paper ramp. --bg is Paper 2, the page ground. */
  --bg:#eff1f4; --surface:#fff; --surface-2:#f7f8fa; --surface-3:#e5e8ec;

  /* Ink. #9ea8ab is the measured "Basalt 40% subdued" but only clears contrast
     ON DARK, so it lives in --ink-subdued and is used by the rail and topbar.
     On paper the same role is carried by --text-faint at an accessible value:
     #5f6d70 is 5.4:1 on Paper 0 and 4.8:1 on the Paper 2 page ground, where the
     eyebrows actually sit. #9ea8ab there would be 2.3:1 and fail outright. */
  --text:#16202c; --text-muted:#4c5766; --text-faint:#5f6d70;
  --heading-ink:#09262d;
  --ink-subdued:#9ea8ab;
  --border:#e5e8ec; --border-strong:rgba(9,38,45,.18);
  /* The measured Kin OS line (rgba(9,38,45,.18)) is 1.44:1 on white, which is
     fine for a decorative frame and illegal for the edge of a UI control
     (WCAG 1.4.11 wants 3:1). --border-strong keeps the measured value for
     frames; --control-line carries the accessible one and is what every
     input, quiet button, suggestion and state-bearing outline uses.
     .55 over #fff = #78888c = 3.70:1, and 3.26:1 on the Paper 2 page ground. */
  --control-line:rgba(9,38,45,.55);

  /* Always-Basalt chrome. Not overridden by either dark block. */
  --sidebar-bg:#09262d; --topbar-bg:#09262d;
  --rail-ink:rgba(255,255,255,.82); --rail-ink-strong:#fff;
  --rail-ink-muted:#9ea8ab;
  --rail-hover:rgba(255,255,255,.06); --rail-active:rgba(255,255,255,.08);
  --rail-line:rgba(255,255,255,.10);

  /* Accent. Fill vs ink, kept apart on purpose — see rule 1 above. */
  --accent:#cbff02; --accent-hover:#b8e800;
  --accent-ink:#09262d; --on-accent:#09262d;
  --accent-soft:rgba(9,38,45,.06); --accent-ring:rgba(9,38,45,.14);

  /* Focus. Two-tone: a Basalt line does the contrast work, the lime halo does
     the brand. Inside the Basalt chrome the two swap (see .sidebar/.topbar). */
  --focus-ring:#09262d; --focus-halo:rgba(203,255,2,.55);

  /* Status triplets: ink / background / line. */
  --success:#17603c; --success-soft:#e6f4ec; --success-line:#b6ddc7;
  --warning:#6a4a12; --warning-soft:#fbf2e0; --warning-line:#e8d7ad;
  --danger:#8f2d2d;  --danger-soft:#fbecec;  --danger-line:#eecccc;
  --info:#1c4f7c;    --info-soft:#e8f1f9;    --info-line:#b9d4ea;
  --draft:#4c5766;   --draft-soft:#eef1f4;   --draft-line:#d3dae2;

  --shadow-sm:0 1px 2px rgba(24,32,46,.05);
  --shadow:0 1px 2px rgba(24,32,46,.04),0 4px 16px rgba(24,32,46,.06);
  --shadow-lift:0 2px 4px rgba(24,32,46,.05),0 10px 28px rgba(24,32,46,.10);
  --shadow-lg:0 4px 10px rgba(24,32,46,.08),0 24px 60px rgba(24,32,46,.16);

  /* Names kept from the previous theme (~70 usages) and repointed to the Kin OS
     values, rather than renamed to --radius-* for no visual gain. */
  --r-sm:4px; --r:7px; --r-lg:12px; --r-xl:18px; --r-pill:999px;

  --sidebar-w:234px; --topbar-h:54px;
  /* RESERVED. --rail-secondary-width, --text-hero and --ease-doors are carried
     from the Kin OS token set for parity and are deliberately unused here: CIH
     has no secondary rail, no hero page head and no door transition. Nothing
     reads those three — editing one will not change anything on screen.
     --rail-width-collapsed is NOT reserved: the collapsed-rail block reads it
     and it is the sole definition of the collapsed rail's width. */
  --rail-secondary-width:212px;
  --rail-width-collapsed:64px; /* read by the collapsed-rail block */
  --content-max:1440px;

  /* .72rem is the measured Kin OS xs, but it resolves to 11.52px and this token
     carries every chip, eyebrow, field label and table header in the product —
     below the ~12px legibility floor. Raised the half-pixel to .75rem (12px);
     every other value is the measured one. */
  --text-xs:.75rem; --text-sm:.8125rem; --text-base:.9375rem; --text-md:1.0625rem;
  --text-lg:1.35rem; --text-xl:1.8rem;
  --text-hero:clamp(2.1rem,1.3rem + 2.2vw,3.1rem);
  --leading-tight:1.22; --leading-normal:1.55;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-rail:cubic-bezier(.32,.72,0,1);
  --ease-doors:cubic-bezier(.72,0,.16,1);
  --fast:140ms; --normal:200ms;
  --mono:Consolas,"Cascadia Mono","SF Mono",Menlo,monospace;
}

/* Dark mode. The two blocks below are byte-identical bodies behind different
   wrappers — the media query covers "system dark, no explicit choice", the
   attribute selector covers the toggle. EDIT THEM IN LOCKSTEP.
   Note what is absent: --sidebar-bg, --topbar-bg, --rail-*, --accent and
   --on-accent. The chrome is already Basalt and a lime button already carries
   Basalt ink, so re-inverting them here would undo the design. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#04161b; --surface:#0c2b33; --surface-2:#123640; --surface-3:#18414c;
    --text:#e7edee; --text-muted:#9ea8ab; --text-faint:#929ea1;
    --heading-ink:#eef3f4;
    --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.22);
    --control-line:rgba(255,255,255,.42);
    --accent-ink:#dbe5e7;
    --accent-soft:rgba(255,255,255,.07); --accent-ring:rgba(203,255,2,.30);
    --focus-ring:#cbff02; --focus-halo:rgba(9,38,45,.65);
    --success:#7fe0aa; --success-soft:rgba(127,224,170,.14); --success-line:rgba(127,224,170,.34);
    --warning:#f0c86a; --warning-soft:rgba(240,200,106,.14); --warning-line:rgba(240,200,106,.34);
    --danger:#ff9a9a;  --danger-soft:rgba(255,154,154,.14);  --danger-line:rgba(255,154,154,.32);
    --info:#8ec6ee;    --info-soft:rgba(142,198,238,.14);    --info-line:rgba(142,198,238,.32);
    --draft:#a8b2b5;   --draft-soft:rgba(158,168,171,.12);   --draft-line:rgba(158,168,171,.26);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow:0 1px 2px rgba(0,0,0,.30),0 4px 16px rgba(0,0,0,.40);
    --shadow-lift:0 2px 4px rgba(0,0,0,.30),0 10px 28px rgba(0,0,0,.48);
    --shadow-lg:0 4px 10px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.55);
  }
}
[data-theme=dark]{
  --bg:#04161b; --surface:#0c2b33; --surface-2:#123640; --surface-3:#18414c;
  --text:#e7edee; --text-muted:#9ea8ab; --text-faint:#929ea1;
  --heading-ink:#eef3f4;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.22);
  --control-line:rgba(255,255,255,.42);
  --accent-ink:#dbe5e7;
  --accent-soft:rgba(255,255,255,.07); --accent-ring:rgba(203,255,2,.30);
  --focus-ring:#cbff02; --focus-halo:rgba(9,38,45,.65);
  --success:#7fe0aa; --success-soft:rgba(127,224,170,.14); --success-line:rgba(127,224,170,.34);
  --warning:#f0c86a; --warning-soft:rgba(240,200,106,.14); --warning-line:rgba(240,200,106,.34);
  --danger:#ff9a9a;  --danger-soft:rgba(255,154,154,.14);  --danger-line:rgba(255,154,154,.32);
  --info:#8ec6ee;    --info-soft:rgba(142,198,238,.14);    --info-line:rgba(142,198,238,.32);
  --draft:#a8b2b5;   --draft-soft:rgba(158,168,171,.12);   --draft-line:rgba(158,168,171,.26);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.30),0 4px 16px rgba(0,0,0,.40);
  --shadow-lift:0 2px 4px rgba(0,0,0,.30),0 10px 28px rgba(0,0,0,.48);
  --shadow-lg:0 4px 10px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.55);
}