/* ============================================================
   LENS DESIGN LANGUAGE v1 — TOKENS
   Source of truth: OMX Standards v1.2 (Slate-Blue / Coral)
   Lifted from D:\20-PROJECTS\officemax\brand-guidelines\Current\build_pack_helpers.py
   ============================================================ */
:root {
  /* === COLOR — Ink === */
  --ink-pri: #1A1915;
  --ink-sec: #5C5850;
  --ink-mut: #8A8A85;
  --ink-fnt: #B5B0A8;          /* faintest legible */

  /* === COLOR — Surfaces (warm neutrals) === */
  --srf-page: #F5F3EE;         /* page background */
  --srf-card: #FBFAF6;         /* card surface */
  --srf-deep: #FFFFFF;         /* highest-elevation panel */
  --srf-inkd: #1A1915;         /* dark-mode kiosk surface */
  --srf-slate-tint: #ECF1F4;   /* callout / hover */
  --srf-coral-tint: #FFEFEA;   /* alert / pull-quote */
  --srf-coral-soft: #FFF9F7;
  --srf-border: #E5E0D8;
  --srf-rule:   #DCD6CB;

  /* === COLOR — Accents === */
  --acc-slate:       #94AABA;
  --acc-slate-mid:   #6F8595;
  --acc-slate-deep:  #4F6373;
  --acc-slate-ink:   #2C3D4B;
  --acc-coral:       #DA7756;
  --acc-coral-deep:  #B85E40;
  --acc-sand:        #C9A074;

  /* === COLOR — Semantic === */
  --sem-gain: #1A7A2E;         /* used SPARINGLY — only on the figure */
  --sem-loss: #A14B30;
  --sem-warn: #B57D27;
  --sem-info: #4F6373;         /* aliases slate-deep */

  /* === DATA SERIES — categorical (max 6 series at once) === */
  /* The chart never paints more than six distinct hues; anything beyond becomes "Other". */
  --d1: #4F6373;   /* slate-deep      — primary series  */
  --d2: #DA7756;   /* coral           — comparative     */
  --d3: #6F8595;   /* slate-mid       — secondary       */
  --d4: #C9A074;   /* sand            — tertiary        */
  --d5: #94AABA;   /* slate           — historical / LY */
  --d6: #B85E40;   /* coral-deep      — alerted        */

  /* Sequential — for heatmaps + maps */
  --seq-0: #ECF1F4;
  --seq-1: #C7D4DC;
  --seq-2: #94AABA;
  --seq-3: #6F8595;
  --seq-4: #4F6373;
  --seq-5: #2C3D4B;

  /* Diverging — for variance maps centred on 0 */
  --div-neg-2: #A14B30;
  --div-neg-1: #DA7756;
  --div-zero:  #ECEAE3;
  --div-pos-1: #6F8595;
  --div-pos-2: #2C3D4B;

  /* === TYPOGRAPHY === */
  --font-sans: "Arial", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
  --font-num:  "Arial", system-ui, sans-serif;  /* tabular-nums applied at site */

  --fz-h1: 28px;
  --fz-h2: 20px;
  --fz-h3: 13px;        /* eyebrow */
  --fz-h4: 12px;
  --fz-lede: 13px;
  --fz-body: 11px;
  --fz-caption: 9px;
  --fz-kicker: 9px;
  --fz-kpi-figure: 28px;
  --fz-kpi-figure-lg: 40px;
  --fz-kpi-figure-hero: 56px;
  --fz-kpi-label: 9px;

  --lh-tight: 1.15;
  --lh-snug:  1.30;
  --lh-body:  1.55;

  --ls-eyebrow: 0.10em;
  --ls-kicker:  0.06em;

  /* === SPACING — 4px base, double-stepping === */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* === RADIUS === */
  --r-0: 0;
  --r-1: 2px;          /* default tile corner */
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* === BORDER / LINE === */
  --bw-hair: 0.5px;
  --bw-1:    1px;
  --bw-2:    2px;
  --bw-rule-eyebrow: 2px solid var(--acc-coral);

  /* === ELEVATION (subtle — no blue-shadow drama) === */
  --el-0: none;
  --el-1: 0 1px 0 var(--srf-rule);
  --el-2: 0 1px 2px rgba(26,25,21,0.04), 0 0 0 1px var(--srf-border);
  --el-3: 0 4px 12px rgba(26,25,21,0.06), 0 0 0 1px var(--srf-border);

  /* === GRID === */
  --grid-cols: 12;
  --grid-gap:  16px;
  --tile-min-h: 200px;
  --tile-kpi-h: 120px;
  --tile-hero-h: 360px;

  /* === MOTION === */
  --t-fast: 120ms cubic-bezier(.2,.0,.2,1);
  --t-base: 200ms cubic-bezier(.2,.0,.2,1);
  --t-slow: 320ms cubic-bezier(.2,.0,.2,1);
}

/* Dark / kiosk mode — DC wall display, control rooms */
[data-mode="kiosk"] {
  --srf-page: #0F0E0C;
  --srf-card: #1A1915;
  --srf-deep: #25231F;
  --srf-border: #2F2D27;
  --srf-rule:   #2F2D27;
  --ink-pri: #F5F3EE;
  --ink-sec: #B5B0A8;
  --ink-mut: #8A8A85;
  --acc-slate:       #B5C6D4;
  --acc-slate-mid:   #94AABA;
  --acc-slate-deep:  #6F8595;
  --srf-slate-tint:  #1F2A33;
  --srf-coral-tint:  #2E1E18;
  --d1: #94AABA;
  --d2: #DA7756;
  --d3: #C9A074;
  --d4: #6F8595;
  --d5: #4F6373;
  --d6: #B85E40;
}