/* ================================================================
   @quoriam/ui — tokens.css
   SYNCED COPY of showcase/brand/quoriam-ui-standard-tokens.css
   (the canonical standard). DO NOT EDIT HERE — edit the source,
   then run `node scripts/sync-tokens.mjs`. CI/`--check` mode
   fails on drift, same pattern as the landing @uikit sync.
   ================================================================ */
/* ================================================================
   QUORIAM UI STANDARD — design tokens (P2.0)
   Extracted from the APPROVED flagship (V1 Quiet Industrial ×
   V3 Modern Ops SaaS + interactivity layer), 2026-06-12.
   Source artifacts: showcase/design/uiux-variants/flagship-dashboard.html
                     + flagship-landing.html
   Spec: showcase/brand/quoriam-ui-standard.md

   Ready for @quoriam/ui adoption. Two blocks:
   1) THEME TOKENS  — as-built flagship values (ground truth).
   2) SYSTEM TOKENS — NORMATIVE type / spacing / radii / motion
      ladders (the flagship's one-offs snap to these on adoption).

   Hard rules: no colored borders/dividers (separation = surface
   tint + low-alpha hairlines); status color in dots/chips only;
   --accent is fills-only on light surfaces (use --accent-ink for
   accent text/icons); text on accent fills = --accent-contrast;
   both themes WCAG AA at rendered pixels; honor
   prefers-reduced-motion everywhere.
   ================================================================ */

/* ----------------------------------------------------------------
   1) THEME TOKENS
   ---------------------------------------------------------------- */
/* Theme activation is keyed on BOTH the data-theme attribute (kit-native) and the
   .light/.dark class (next-themes `attribute="class"`, used across the app fleet —
   Forge/Bedrock/DocIQ/Vantage), so importing these tokens works under either wiring.
   Central gap #14, P1. (P2 — :root token-name collision — is handled app-side by the
   .qui-scope bridge until the kit scopes its palette; see INTERIM-VENDORING-STANDARD.) */
:root, [data-theme="light"], .light {
  color-scheme: light;

  /* surfaces (cool-neutral — re-toned 2026-06-17 to share the dark theme's
     temperature; never pure white) */
  --bg:        #eef1f5;
  --surface:   #f8fafc;
  --surface-2: #e7ecf2;
  --surface-3: #dbe2ea;

  /* ink (cool slate — never pure black) */
  --ink:    #1b2430;
  --muted:  #4b5868;
  --subtle: #586675; /* cool; AA on --bg / --surface */

  /* hairlines — low-alpha ink only, never a hue */
  --hair:      rgba(27,36,48,.12);
  --hair-soft: rgba(27,36,48,.06);

  /* accent triad */
  --accent:          #FF6B00;  /* fills/graphics only on light (2.67:1) */
  --accent-ink:      #9e4300;  /* accent as text/icon on light; focus ring. Darkened from #b34a00 so it clears AA (4.5) on the darkest light surface --surface-3 #dbe2ea (≈4.93; higher on lighter surfaces) */
  --accent-contrast: #21130a;  /* text ON accent fills (#fff fails at 2.86:1) */
  --accent-soft:     rgba(255,107,0,.10);
  --accent-soft-2:   rgba(255,107,0,.055);

  /* status (hue / text-on-soft / soft wash) */
  --ok:    #22C55E; --ok-ink:   #11713a; --ok-soft:   rgba(34,197,94,.13);
  --warn:  #F59E0B; --warn-ink: #854d0e; --warn-soft: rgba(245,158,11,.16);
  --bad:   #EF4444; --bad-ink:  #b42323; --bad-soft:  rgba(239,68,68,.11);
  --bad-strong: #DC2626; /* darker destructive-action FILL: white text clears AA (4.83:1) where --bad #EF4444 fails (3.76). Kept distinct from machine --fault #D90429 (value-judgment vs machine-state axis). */
  --off:   #7b766c;

  /* machine-state family (asset STATE — a SEPARATE axis from the ok/warn/bad
     value-judgment set above; run~ok-green & down~bad-red for consistency but
     DISTINCT names; setup/idle/maint are net-new) */
  --run:   #34C27A; --run-soft:   rgba(52,194,122,.14);
  --idle:  #647A93; --idle-soft:  rgba(100,122,147,.14);
  --setup: #2596C7; --setup-soft: rgba(37,150,199,.14);
  --fault: #D90429; --fault-soft: rgba(217,4,41,.14);
  --maint-ink: #4f3b8f; /* maint as text-on-soft (reserved badge): clears AA on --maint-soft (light) (0.6.1 a11y) */
  --down:  #EF4655; --down-soft:  rgba(239,70,85,.14);
  --maint: #7C5CD6; --maint-soft: rgba(124,92,214,.14);

  /* data chrome */
  --bar-track: rgba(27,36,48,.09);

  /* status glows are DARK-ONLY — zeroed in light */
  --glow-ok:   0 0 0 rgba(0,0,0,0);
  --glow-warn: 0 0 0 rgba(0,0,0,0);
  --glow-bad:  0 0 0 rgba(0,0,0,0);

  /* elevation (hover-lift + floating chrome only — cards are flat) */
  --lift-shadow:     0 10px 26px rgba(27,36,48,.10); /* app surfaces */
  --lift-shadow-mkt: 0 12px 30px rgba(27,36,48,.11); /* marketing surfaces */

  /* chrome */
  --blur-bg: rgba(248,250,252,.74); /* + backdrop-filter: blur(14px) */
  --scrim:   rgba(27,36,48,.38);    /* + blur(3px) */
  --shimmer: linear-gradient(100deg, transparent 30%, rgba(27,36,48,.06) 50%, transparent 70%);

  /* landing hero fade */
  --hero-fade: linear-gradient(to bottom, rgba(238,241,245,0), rgba(238,241,245,.14) 55%, var(--bg));
}

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

  /* surfaces — CANONICAL dark base sourced from the forge-v2 bar (cool
     #0d1117 canvas, "the bar that won the leads"). The bar's 6-step
     --bg-0..--bg-5 ladder collapses to these 4 semantic steps (void --bg-0 and
     track --bg-5 are not separately consumed). Do NOT warm-drift this. */
  --bg:        #0d1117;
  --surface:   #11161f;
  --surface-2: #161d28;
  --surface-3: #1c2531;

  --ink:    #e8eef5;
  --muted:  #a6b6c8;
  --subtle: #6f8298;

  --hair:      rgba(232,238,245,.10);
  --hair-soft: rgba(232,238,245,.06);

  --accent:          #FF6B00;
  --accent-ink:      #ff8a3d;  /* lightened for dark text use */
  --accent-contrast: #21130a;  /* unchanged: text on accent fills */
  --accent-soft:     rgba(255,107,0,.13);
  --accent-soft-2:   rgba(255,107,0,.07);

  --ok:    #22C55E; --ok-ink:   #4ade80; --ok-soft:   rgba(34,197,94,.16);
  --warn:  #F59E0B; --warn-ink: #fbbf24; --warn-soft: rgba(245,158,11,.16);
  --bad:   #EF4444; --bad-ink:  #f87171; --bad-soft:  rgba(239,68,68,.15);
  --bad-strong: #DC2626; /* darker destructive-action FILL: white clears AA (4.83:1); distinct from machine --fault */
  --off:   rgba(240,239,236,.45);

  /* machine-state family (SEPARATE axis from ok/warn/bad — see light block) */
  --run:   #34C27A; --run-soft:   rgba(52,194,122,.16);
  --idle:  #647A93; --idle-soft:  rgba(100,122,147,.16);
  --setup: #38BDF8; --setup-soft: rgba(56,189,248,.16);
  --fault: #D90429; --fault-soft: rgba(217,4,41,.16);
  --maint-ink: #c4b0f9; /* maint text-on-soft, lightened for dark (0.6.1 a11y) */
  --down:  #EF4655; --down-soft:  rgba(239,70,85,.16);
  --maint: #A98BF5; --maint-soft: rgba(169,139,245,.16);

  --bar-track: rgba(232,238,245,.10);

  /* V2 status-glow heritage — dark only */
  --glow-ok:   0 0 7px rgba(34,197,94,.55);
  --glow-warn: 0 0 7px rgba(245,158,11,.55);
  --glow-bad:  0 0 8px rgba(239,68,68,.65);

  --lift-shadow:     0 10px 28px rgba(0,0,0,.32);
  --lift-shadow-mkt: 0 12px 32px rgba(0,0,0,.34);

  --blur-bg: rgba(13,17,23,.72);
  --scrim:   rgba(5,7,10,.62);
  --shimmer: linear-gradient(100deg, transparent 30%, rgba(232,238,245,.07) 50%, transparent 70%);

  --hero-fade: linear-gradient(to bottom, rgba(13,17,23,0), rgba(13,17,23,.16) 55%, var(--bg));
}

/* ----------------------------------------------------------------
   2) SYSTEM TOKENS (theme-invariant)
   ---------------------------------------------------------------- */
:root {
  /* ---------- typography ---------- */
  --font-display: "Bricolage Grotesque", sans-serif;          /* 400/500/600, opsz 12..96 */
  --font-body:    "Inter", system-ui, sans-serif;             /* 400/500/600 */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;  /* 400/500, tabular-nums */

  /* NORMATIVE 8-step ladder (as-built one-offs snap here) */
  --text-micro:   0.625rem;   /* 10px — mono meta, chips, provenance, axis labels */
  --text-caption: 0.6875rem;  /* 11px — sub-labels, deltas, seg controls */
  --text-body-sm: 0.75rem;    /* 12px — secondary body, alert titles, toasts */
  --text-body:    0.8125rem;  /* 13px — DASHBOARD base, tables, nav */
  --text-body-lg: 0.9375rem;  /* 15px — LANDING base, panel h2, large buttons */
  --text-title:   1.0625rem;  /* 17px — lockups, card h3, hero sub */
  --text-heading: 1.4375rem;  /* 23px — page h1 (dashboard) */
  --text-display: 2.125rem;   /* 34px — landing section h2 */

  /* numeral / display extensions */
  --num-kpi:      1.75rem;    /* 28px — KpiCard value (mono) */
  --num-stat:     2.625rem;   /* 42px — metrics-band stats, final h2 */
  --num-hero:     3rem;       /* 48px — hero KpiCard value */
  --display-hero: clamp(2.5rem, 5.4vw, 4.125rem); /* landing h1 */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;     /* ceiling — never heavier */

  --leading-numeral: 1.05;
  --leading-heading: 1.1;
  --leading-ui:      1.5;
  --leading-prose:   1.6;

  --tracking-display: -0.02em;  /* −.025…−.035em as size grows */
  --tracking-label:    0.06em;  /* uppercase th / labels */
  --tracking-kicker:   0.16em;  /* mono kickers */

  /* ---------- spacing (NORMATIVE: 4px base + 2px micro-step <16) ---------- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-9:  20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 32px;
  --space-13: 40px;
  --space-14: 48px;
  --space-15: 64px;
  --space-16: 80px;
  --space-17: 96px;

  /* structural rhythm */
  --gap-card:        16px;    /* card-grid gap (as-built 14 snaps up) */
  --pad-content:     24px;
  --maxw-app:        1420px;
  --maxw-marketing:  1140px;
  --section-rhythm:  96px;    /* landing vertical section padding */

  /* ---------- radii tiers ---------- */
  --radius-xs:    4px;    /* focus ring, kbd */
  --radius-sm:    6px;    /* inline mono tokens (asset-id) */
  --radius-md:    8px;    /* small controls, list rows, menu items */
  --radius-lg:    10px;   /* buttons, inputs, tooltips, toast */
  --radius-xl:    12px;   /* cards, panels, popovers, palette, squircles */
  --radius-2xl:   14px;   /* device/browser frames only */
  --radius-pill:  100px;  /* chips, deltas, badges */
  --radius-round: 50%;    /* dots, avatars */

  /* ---------- motion vocabulary ---------- */
  --dur-press:    .12s;
  --dur-hover:    .18s;   /* .15–.2s band */
  --dur-lift:     .2s;
  --dur-popover:  .24s;   /* .22–.28s band */
  --dur-toast:    .25s;
  --dur-entrance: .6s;    /* NORMATIVE ceiling for entrances */
  --dur-draw:     .6s;    /* micro-scene trace draws (main chart mount ≤1.1s) */
  --dur-countup:  1.4s;   /* 1.3–1.5s band */

  --ease-state:    ease;                            /* hover/press */
  --ease-entrance: cubic-bezier(.22,1,.36,1);       /* ≈ gsap power3.out */
  --ease-fade:     cubic-bezier(.33,1,.68,1);       /* ≈ gsap power2.out */
  --ease-draw:     cubic-bezier(.45,0,.55,1);       /* ≈ gsap power2.inOut */
  --ease-pop:      cubic-bezier(.34,1.56,.64,1);    /* ≈ back.out(2) dot pops */

  /* live pulses — live/alerting signals ONLY */
  --pulse-crit:  1.4s;
  --pulse-warn:  2s;
  --pulse-fresh: 2.2s;

  /* ---------- z scale ---------- */
  --z-topbar:  40;
  --z-corner:  50;
  --z-popover: 60;
  --z-scrim:   90;
  --z-toast:   95;
}

/* ----------------------------------------------------------------
   Baseline a11y / brand plumbing every adopter must keep
   ---------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
[data-theme="light"] :focus-visible, .light :focus-visible {
  outline-color: var(--accent-ink); /* ≥4.9:1 on light surfaces */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}