/* ═══════════════════════════════════════════════
   DESIGN TOKENS — PyxTech Delivery Command Center
   "Refined Authority" — Linear meets Bloomberg

   Typography: Plus Jakarta Sans (display), Inter Tight (body), JetBrains Mono (data)
   Themes: Warm light (#FAFAF8) + Refined dark (#0B0D10)
   ═══════════════════════════════════════════════ */

:root {
  /* ─── Surfaces ─── */
  --white: #ffffff;
  --base: #fafaf8;
  --base2: #f1f0ec;
  --card: #ffffff;
  --card-hover: #fdfdfb;

  /* ─── Borders ─── */
  --bdr: #e4e3dd;
  --bdr-lt: #edece7;
  --bdr-dk: #d0cfc8;

  /* ─── Text ─── */
  --tx: #1e293b;
  --tx2: #475569;
  --tx3: #94a3b8;
  --tx4: #cbd5e1;

  /* ─── Brand & Accent ─── */
  --sapphire: #2746c2;
  --sapphire-bg: #eef1fb;
  --sapphire-dk: #1e3a9f;
  --navy: #0f172a;

  /* ─── Status Semantic ─── */
  --emerald: #059669;
  --emerald-bg: #ecfdf5;
  --emerald-bdr: rgba(5,150,105,0.25);
  --amber: #d97706;
  --amber-bg: #fffbeb;
  --amber-bdr: rgba(217,119,6,0.25);
  --ruby: #e11d48;
  --ruby-bg: #fff1f2;
  --ruby-bdr: rgba(225,29,72,0.2);
  --violet: #7c3aed;
  --violet-bg: #f5f3ff;
  --violet-bdr: rgba(124,58,237,0.2);
  --sapphire-bdr: rgba(39,70,194,0.25);

  /* ─── Business Priority (P0 highest → P5 lowest) ─── */
  --bp0: #991b1b;
  --bp0-bg: #fef2f2;
  --bp1: #dc2626;
  --bp1-bg: #fef2f2;
  --bp2: #f97316;
  --bp2-bg: #fff7ed;
  --bp3: #eab308;
  --bp3-bg: #fefce8;
  --bp4: #64748b;
  --bp4-bg: #f1f5f9;
  --bp5: #94a3b8;
  --bp5-bg: #f8fafc;

  /* ─── Typography ─── */
  --fd: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif;
  --f:  'Inter Tight', 'Plus Jakarta Sans', system-ui, sans-serif;
  --fm: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  --fs: 'Fraunces', 'Georgia', serif;

  /* ─── Spacing & Radius ─── */
  --r: 12px;
  --rs: 8px;

  /* ─── Shadows ─── */
  --sh: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
  --sh-md: 0 4px 20px rgba(15,23,42,.07);
  --sh-lg: 0 12px 40px rgba(15,23,42,.1);
  --sh-card: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);

  /* ─── Focus ─── */
  --focus-ring: 0 0 0 2px var(--sapphire-bg), 0 0 0 3px var(--sapphire);
}

/* ─── Dark Theme ─── */
[data-theme="dark"] {
  --white: #16181d;
  --base: #0b0d10;
  --base2: #1a1d24;
  --card: #16181d;
  --card-hover: #1c1f26;

  --bdr: #2a2d35;
  --bdr-lt: #22252c;
  --bdr-dk: #3a3d45;

  --tx: #e4e4e7;
  --tx2: #a1a1aa;
  --tx3: #71717a;
  --tx4: #3f3f46;

  --sapphire: #6380f5;
  --sapphire-bg: rgba(99,128,245,.1);
  --sapphire-dk: #4f6df5;
  --navy: #0b0d10;

  --emerald: #34d399;
  --emerald-bg: rgba(52,211,153,.1);
  --emerald-bdr: rgba(52,211,153,.25);
  --amber: #fbbf24;
  --amber-bg: rgba(251,191,36,.1);
  --amber-bdr: rgba(251,191,36,.25);
  --ruby: #fb7185;
  --ruby-bg: rgba(251,113,133,.1);
  --ruby-bdr: rgba(251,113,133,.2);
  --violet: #a78bfa;
  --violet-bg: rgba(167,139,250,.12);
  --violet-bdr: rgba(167,139,250,.2);
  --sapphire-bdr: rgba(99,128,245,.25);

  --bp0: #fca5a5;
  --bp0-bg: rgba(252,165,165,.12);
  --bp1: #f87171;
  --bp1-bg: rgba(248,113,113,.1);
  --bp2: #fb923c;
  --bp2-bg: rgba(251,146,60,.1);
  --bp3: #facc15;
  --bp3-bg: rgba(250,204,21,.1);
  --bp4: #94a3b8;
  --bp4-bg: rgba(148,163,184,.08);
  --bp5: #71717a;
  --bp5-bg: rgba(113,113,122,.06);

  --sh: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.15);
  --sh-md: 0 4px 20px rgba(0,0,0,.3);
  --sh-lg: 0 12px 40px rgba(0,0,0,.4);
  --sh-card: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.15);

  --focus-ring: 0 0 0 2px rgba(99,128,245,.2), 0 0 0 3px var(--sapphire);
}