/* ============================================================================
   tokens.css — the single source of truth for the WMS PRO design contract.

   Loaded FIRST, before base.css / pro-theme.css, so it can define every name
   those sheets rely on without changing any current rendering. Phase 4 moves
   the legacy `:root` blocks out of base.css and into this file.

   Rules for this file:
     • variables only — no element selectors, no visual side effects
     • one name per decision; semantic names win over literal ones
     • never define --request-bg / --request-color / --score: those are injected
       per element at runtime from PHP and JS
   ========================================================================= */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────────── */
  --brand:         #13324f;   /* sampled from the user's approved navy reference */
  --brand-ink:     #ffffff;
  --brand-deep:    #102b44;
  --brand-tint:    #edf3f8;

  /* ── Neutrals: light surfaces ───────────────────────────────────────────── */
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --surface-3:     #eef2f7;
  --canvas:        #f2f4f7;
  --line:          #e2e8f0;
  --line-2:        #dbe4ef;
  --line-strong:   #cbd5e1;

  /* ── Ink: text on light surfaces ────────────────────────────────────────── */
  --ink:           #172b4d;   /* headings, primary text                        */
  --ink-2:         #334155;   /* body                                          */
  --ink-3:         #4a5568;   /* secondary                                     */
  --ink-4:         #6b7280;   /* muted labels                                  */
  --ink-5:         #94a3b8;   /* faintest / placeholders                       */

  /* ── Deep panels: dark hero, KPI strips, modals, overlays ───────────────── */
  --navy-900:      #102b44;
  --navy-800:      #143655;
  --navy-700:      #17375b;
  --navy-600:      #1e3a5f;
  --on-navy:       #eaf2fb;   /* strong text on navy                           */
  --on-navy-2:     #a8c6dc;   /* muted text on navy                            */
  --on-navy-line:  rgba(148, 163, 184, .26);
  --on-navy-fill:  rgba(255, 255, 255, .10);

  /* ── State: each state ships bg + ink + line so pills stay consistent ───── */
  --ok:            #10b981;
  --ok-bg:         #ecfdf5;
  --ok-ink:        #047857;
  --ok-line:       #86efac;

  --warn:          #f59e0b;
  --warn-bg:       #fffbeb;
  --warn-ink:      #a16207;
  --warn-line:     #fcd34d;

  --danger-2:      #f43f5e;   /* legacy alias kept for compatibility           */
  --danger:        #ef4444;
  --danger-bg:     #fef2f2;
  --danger-ink:    #b91c1c;
  --danger-line:   #fca5a5;

  --info:          #315d7e;
  --info-bg:       #edf3f8;
  --info-ink:      #173b59;
  --info-line:     #b9cddd;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  /* Manrope carries dense UI and tables; Unbounded carries display headings.
     Both are self-hosted (assets/fonts) and both ship full Cyrillic. */
  --font-ui:       'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;

  /* Four real steps. Manrope's usable range is 200–800, so 900+ does not exist
     for the UI font; display headings get their weight from Unbounded instead. */
  --fw-regular:    400;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-display:    700;

  --fs-2xs:        10px;
  --fs-xs:         11px;
  --fs-sm:         12px;
  --fs-base:       13px;
  --fs-md:         14px;
  --fs-lg:         16px;
  --fs-xl:         20px;
  --fs-2xl:        26px;
  --fs-3xl:        32px;
  --fs-4xl:        38px;

  --lh-tight:      1.1;
  --lh-snug:       1.3;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  --ls-display:    -.02em;
  --ls-tight:      -.01em;
  --ls-eyebrow:    .12em;

  /* ── Spacing — 4px base ─────────────────────────────────────────────────── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;   --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-7: 32px;   --sp-8: 40px;
  --sp-9: 48px;   --sp-10: 64px;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --r-xs:   6px;   --r-sm:  10px;   --r-md:  12px;   --r-lg:  14px;
  --r-xl:  18px;   --r-2xl: 22px;   --r-pill: 999px;

  /* ── Elevation — four steps, light to lifted ────────────────────────────── */
  --sh-1:          0 1px 2px rgba(15, 23, 42, .06);
  --sh-2:          0 4px 12px rgba(15, 23, 42, .08);
  --sh-3:          0 8px 24px rgba(15, 23, 42, .10);
  --sh-4:          0 16px 40px rgba(15, 23, 42, .14);
  --sh-panel:      0 10px 30px rgba(26, 26, 26, .07);
  --sh-brand:      0 3px 8px rgba(19, 50, 79, .12);

  /* ── Z-index — one ladder; every layer in the app maps onto these ───────── */
  --z-base:        0;
  --z-sticky:      100;
  --z-dropdown:    200;
  --z-nav:         1200;
  --z-modal:       9999;
  --z-overlay:     100004;
  --z-toast:       100010;

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --dur-fast:      120ms;
  --dur:           180ms;
  --dur-slow:      260ms;
  --ease:          cubic-bezier(.2, .7, .3, 1);

  /* ── Legacy names ───────────────────────────────────────────────────────────
     These are defined today in base.css and pro-theme.css. They are repeated
     here so this file is the complete contract; the later sheets still win the
     cascade until Phase 4 removes their duplicate :root blocks. Values are
     copied verbatim — do not "improve" them here, or rendering will shift. */
  --gold:          var(--brand);
  --dark: var(--navy-900);
  --dark-light: var(--navy-800);
  --white:         #ffffff;
  --gray-bg:       #f2f4f7;
  --gray-text:     #6b7280;
  --success:       #10b981;
  --glass:         rgba(255, 255, 255, .92);
  --glass-border:  rgba(255, 255, 255, .5);
  --shadow-soft:   0 8px 30px rgba(26, 26, 26, .08);
  --shadow-hover:  0 15px 40px rgba(26, 26, 26, .15);

  --pro-bg-1:      var(--navy-900);
  --pro-bg-2:      var(--navy-800);
  --pro-card:      rgba(255, 255, 255, .86);
  --pro-line:      rgba(148, 163, 184, .26);
  --pro-green:     #bfdbfe;
  --pro-blue:      #38bdf8;
  --pro-orange:    #fb923c;
  --pro-red:       #f43f5e;
}