/* Shared design tokens. Imported by styles.css (the guide) and linked
   directly by admin.html and the pm/*.html pages, so all surfaces share one
   source of truth for color, typography, radii, motion, and the dark palette.

   REDESIGN: true black & white + a single orange accent (#ED7534). Danger stays red.
   The legacy multi-hue tokens (--g/--gr/--bl/--vi/--te/--iv) are removed — their few
   usages migrated to neutral material tokens (--tint / --muted).
   Phase 0 adds: spacing (--sp-*), elevation/material (--elev-*, --ring, --glow-accent,
   --hairline), a type-size scale (--fs-*), refined radii, springs (--spring-*), and the
   hue-quarantined front-door layer (--fx-*). See docs/redesign/00-discovery-and-spec.md. */
@import url('primitives.css');   /* shared nc-* UI primitives (must precede rules) */
:root {
  /* neutrals — true white, no warmth */
  --bg:#ffffff;--bg1:#ffffff;--bg2:#f5f5f5;--bg3:#e9e9e9;
  --bg-glass:rgba(255,255,255,.72);   /* frosted sticky bars (backdrop-filter) */
  --border:rgba(0,0,0,.10);--b2:rgba(0,0,0,.14);--b3:rgba(0,0,0,.22);
  --text:#0a0a0a;--muted:#666666;--dim:#8a8a8a;   /* dim darkened for AA on white (#999 was 2.85:1) */
  --tint:rgba(0,0,0,.05);--tint2:rgba(0,0,0,.09);

  /* accent — single orange (the only hue) */
  --s:#ED7534;--s2:rgba(237,117,52,.10);--s3:rgba(237,117,52,.20);
  --s-text:#B85410;                   /* AA-safe orange TEXT on white (#ED7534 fails on white) */
  --on-accent:#0a0a0a;                /* near-black text on orange fills — white on #ED7534 is only 2.9:1 (fails AA) */

  /* danger — red only */
  --red:#c62f1e;--red2:rgba(198,47,30,.10);

  /* elevation — the tactile material. Composite box-shadows applied as var(--elev-N).
     Redefined per mode in body.dark because rgba(0,0,0) drop shadows are invisible on
     true black — dark leans on an inset top-highlight + surface step + border instead. */
  --elev-1:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.08);
  --elev-2:0 2px 8px rgba(0,0,0,.06),0 8px 20px rgba(0,0,0,.10);
  --elev-3:0 4px 18px rgba(0,0,0,.10),0 18px 40px rgba(0,0,0,.14);
  --elev-4:0 30px 60px -24px rgba(0,0,0,.28);          /* modal / overlay */
  --hairline:inset 0 1px 0 rgba(255,255,255,.55);      /* top light edge (≈invisible on white; fine) */
  --ring:0 0 0 3px var(--s2);                          /* focus / input ring (tracks --s2 per mode) */
  --glow-accent:0 8px 24px var(--s3);                  /* primary button hover halo (tracks --s3 per mode) */
  --border-raised:var(--b2);                           /* border brightens one step on raised material */

  /* material — glass blur/saturation (--tint/--tint2 above already flip per mode = hover/row wash) */
  --blur:12px;--blur-sm:6px;--blur-lg:20px;--glass-sat:1.3;

  /* layout + radii */
  --sidebar-w:250px;
  --r-xs:4px;--r-sm:6px;--r:8px;--rl:12px;--r-xl:16px;--r-pill:999px;

  /* spacing scale — hybrid 2/4 base; 6/10/14 half-steps match the dense legacy rhythm so
     adopting a token never shifts layout. Preferred new rhythm: 4/8/12/16/24/32. */
  --sp-0:0;--sp-2:2px;--sp-4:4px;--sp-6:6px;--sp-8:8px;--sp-10:10px;--sp-12:12px;
  --sp-14:14px;--sp-16:16px;--sp-20:20px;--sp-24:24px;--sp-32:32px;--sp-40:40px;
  --sp-48:48px;--sp-64:64px;--sp-72:72px;--sp-80:80px;

  /* type */
  --fd:'Cormorant Garamond',serif;
  --fb:'Inter',sans-serif;
  --fm:'Space Mono',monospace;

  /* motion (mode-agnostic) */
  --d1:.14s;--d2:.28s;--d3:.55s;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* spring fallback — overridden by the @supports linear() block below on modern browsers */
  --spring-1:var(--ease-out);--spring-2:var(--ease-out);
  --spring-dur-1:var(--d2);--spring-dur-2:var(--d3);

  /* type sizes — role-named UI scale (the ~200 literal 10–16px values live here);
     coexists with the display clamp() sizes. */
  --fs-micro:10px;--fs-label:11px;--fs-caption:12px;--fs-body-sm:13px;--fs-body:14px;
  --fs-body-lg:15px;--fs-lead:16px;--fs-h6:18px;--fs-h5:20px;--fs-h4:22px;
  --fs-d-sec:clamp(26px,4vw,34px);--fs-d-stat:clamp(30px,4vw,42px);
  --fs-d-nav:clamp(30px,5.4vw,58px);--fs-d-hero:clamp(56px,10vw,120px);

  /* front-door kinetic — hue-quarantined; ONLY read by [data-surface="canvas"] / .nc-panel--glow,
     never by base surface/text tokens, so orange can't leak into the neutral system. */
  --fx-canvas:radial-gradient(120% 90% at 50% -10%,#fafafa,#ffffff 55%);
  --fx-glow:radial-gradient(60% 50% at 50% 0%,rgba(237,117,52,.10),transparent 70%);
  --fx-accent-glow:0 0 60px rgba(237,117,52,.14);
  --fx-hairline:rgba(0,0,0,.06);
}

body.dark {
  /* neutrals — true black */
  --bg:#000000;--bg1:#0d0d0d;--bg2:#161616;--bg3:#222222;
  --bg-glass:rgba(0,0,0,.72);
  --border:rgba(255,255,255,.10);--b2:rgba(255,255,255,.14);--b3:rgba(255,255,255,.22);
  --text:#f2f2f2;--muted:#9a9a9a;--dim:#5c5c5c;
  --tint:rgba(255,255,255,.06);--tint2:rgba(255,255,255,.10);

  /* accent */
  --s:#ED7534;--s2:rgba(237,117,52,.14);--s3:rgba(237,117,52,.26);
  --s-text:#ED7534;                   /* bright orange text is fine on black (~7.2:1) */
  --on-accent:#0a0a0a;

  /* danger */
  --red:#ff6b6b;--red2:rgba(255,107,107,.12);

  /* elevation — dark relies on inset top-highlight + surface step + border, not black shadow */
  --elev-1:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.6);
  --elev-2:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.7);
  --elev-3:inset 0 1px 0 rgba(255,255,255,.08),0 18px 48px rgba(0,0,0,.8);
  --elev-4:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.85);
  --hairline:inset 0 1px 0 rgba(255,255,255,.07);   /* THE tactile lift cue in dark */

  /* front-door kinetic — dark */
  --fx-canvas:radial-gradient(120% 90% at 50% -10%,#0d0d0d,#000000 55%);
  --fx-glow:radial-gradient(60% 50% at 50% 0%,rgba(237,117,52,.20),transparent 70%);
  --fx-accent-glow:0 0 80px rgba(237,117,52,.22);
  --fx-hairline:rgba(255,255,255,.06);
}

/* springs — CSS linear() approximations for tactile press/settle. The :root fallback
   above is --ease-out, so browsers without linear() stay smooth (no bounce). */
@supports (transition-timing-function: linear(0,1)) {
  :root {
    --spring-1:linear(0,.55,.92,1.03,1,.995,1);      /* snappy, tiny overshoot — presses/toggles */
    --spring-2:linear(0,.42,.86,1.08,1,1.02,.998,1); /* bouncier settle — drops / pop-in */
    --spring-dur-1:.38s;--spring-dur-2:.52s;
  }
}