/* ==========================================================================
   DIST-17 — Design Tokens
   Light, dense, enterprise operations UI.
   Rationale: managers read this screen for hours at a time and scan numbers
   vertically down a column. So: (a) neutral surfaces carry the page and colour
   is spent only where it carries meaning, (b) every numeric run is tabular so
   digits align down the column, (c) density is a token, not a one-off value.
   ========================================================================== */

:root {
  /* --- Neutral ramp: cool grey, faint blue undertone. Institutional, not stark. */
  --c-canvas:      #eef1f5;  /* app background behind panels */
  --c-surface:     #ffffff;  /* panels, grid body */
  --c-surface-2:   #f7f9fb;  /* grid header, zebra, inset blocks */
  --c-surface-3:   #e9edf2;  /* hover, pressed, track behind bars */
  --c-surface-4:   #dde3ea;  /* selected row, active tab underline */
  --c-line:        #dde3ea;  /* hairline divider */
  --c-line-2:      #c8d0d9;  /* visible border on inputs/panels */
  --c-line-3:      #aab4c0;  /* strong divider, table group rule */

  /* --- Ink ramp */
  --c-ink:         #0f151c;  /* primary text */
  --c-ink-2:       #414d5a;  /* secondary text */
  --c-ink-3:       #6b7784;  /* labels, column headers */
  --c-ink-4:       #97a1ac;  /* placeholder, disabled */
  --c-ink-inv:     #ffffff;

  /* --- Interaction accent. Deliberately NOT teal: teal is reserved as the
         "collection in progress" semantic (see --s-* below). */
  --c-accent:        #1a5fb4;
  --c-accent-2:      #14488c;  /* hover */
  --c-accent-3:      #0f3a72;  /* active */
  --c-accent-soft:   #e7eff9;  /* chip / selected background */
  --c-accent-line:   #b9d0ec;
  --c-accent-ring:   rgba(26, 95, 180, 0.26);
  --c-focus:         #1a5fb4;

  /* --- Semantic families.
         Colour is used as a small area (a 3px bar, a chip tint, a 4px number
         underline) — never as a cell fill. That is what keeps a 14-column grid
         readable when a third of the rows are "bad". */
  --s-ok-text:   #0d6b3f;  --s-ok-bar:  #1f9d55;  --s-ok-bg:  #e3f4ea;  --s-ok-line: #b6e0c6;
  --s-warn-text: #8a5a06;  --s-warn-bar: #d99413;  --s-warn-bg: #fdf3e0;  --s-warn-line: #f2ddb0;
  --s-bad-text:  #a3231b;  --s-bad-bar:  #d93a2b;  --s-bad-bg:  #fdecea;  --s-bad-line: #f6cbc7;
  --s-info-text: #0b6470;  --s-info-bar: #1594a5;  --s-info-bg: #e2f3f5;  --s-info-line: #b6dfe4;
  --s-promise-text: #5b3aa8; --s-promise-bar: #7c5cd6; --s-promise-bg: #eee9fb; --s-promise-line: #d5c9f2;
  --s-mute-text: #5d6874;  --s-mute-bar:  #8b96a2;  --s-mute-bg:  #eef1f4;  --s-mute-line: #d8dee5;

  /* --- Typography. IBM Plex: designed for enterprise/data products, strong
         tabular figures, real condensed/mono companion for reference codes. */
  --f-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --t-micro: 10px;   /* eyebrow / column super-label, uppercase +tracked */
  --t-xs:    11px;   /* chips, table meta, axis labels */
  --t-sm:    12px;   /* workhorse: table cells, inputs, nav */
  --t-md:    13px;   /* card titles, prose */
  --t-lg:    15px;   /* page title */
  --t-xl:    17px;   /* section title */
  --t-kpi:   22px;   /* KPI value */
  --t-hero:  28px;   /* single hero KPI */

  --lh-tight: 1.15;
  --lh-body:  1.45;
  --tr-wide:  0.08em;  /* tracking for uppercase micro labels */
  --tr-tight:-0.005em;

  /* --- Spacing: 4px baseline */
  --s-1: 2px;  --s-2: 4px;  --s-3: 6px;  --s-4: 8px;  --s-5: 12px;
  --s-6: 16px; --s-7: 20px; --s-8: 24px; --s-9: 32px; --s-10: 40px; --s-11: 48px;

  /* --- Radius: small. Enterprise chrome reads as machined, not rounded. */
  --r-xs: 2px;  --r-sm: 3px;  --r-md: 4px;  --r-lg: 6px;  --r-pill: 999px;

  /* --- Elevation: borders first, shadow second. Almost no shadow. */
  --sh-1: 0 1px 2px rgba(15, 21, 28, 0.06);
  --sh-2: 0 2px 6px rgba(15, 21, 28, 0.08);
  --sh-3: 0 8px 24px rgba(15, 21, 28, 0.12);
  --sh-drawer: -2px 0 16px rgba(15, 21, 28, 0.10);
  --ring: 0 0 0 3px var(--c-accent-ring);

  /* --- Density. One switch rescales every row, control and gap in the app. */
  --row-h:    30px;   /* comfortable */
  --row-h-sm: 25px;   /* compact */
  --ctl-h:    26px;
  --ctl-h-sm: 23px;
  --grid-fs:  var(--t-sm);
  --gap:      var(--s-4);

  /* --- Structure */
  --topbar-h: 44px;
  --nav-w:    216px;
  --nav-w-collapsed: 48px;
  --drawer-w: 420px;

  --z-sticky: 20;
  --z-nav:    40;
  --z-topbar: 45;
  --z-drawer: 60;
  --z-modal:  70;
  --z-toast:  80;
}

/* Compact density — the "I have 1,373 rows to get through" mode. */
[data-density="compact"] {
  --row-h:    25px;
  --row-h-sm: 22px;
  --ctl-h:    23px;
  --ctl-h-sm: 21px;
  --gap:      var(--s-3);
}

/* Comfortable density */
[data-density="comfortable"] {
  --row-h:    34px;
  --row-h-sm: 28px;
  --ctl-h:    28px;
  --ctl-h-sm: 25px;
  --gap:      var(--s-5);
}