/* ═══════════════════════════════════════════════════════════════════
   SOJ Analytics / OperArch Platform — Design Tokens
   Single source of truth for all visual values.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Color primitives (reference only — use semantic tokens below) ── */
:root {
  --color-slate-950: #0f172a;
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;
  --color-slate-50:  #f8fafc;
  --color-amber-500: #f59e0b;
  --color-amber-400: #fbbf24;
  --color-amber-600: #d97706;
  --color-red-500:   #ef4444;
  --color-red-400:   #f87171;
  --color-orange-400:#fb923c;
  --color-green-500: #10b981;
  --color-green-400: #34d399;
  --color-blue-500:  #3b82f6;
  --color-blue-400:  #60a5fa;
  --color-cyan-500:  #06b6d4;
  --color-purple-500:#8b5cf6;
  --color-purple-400:#a78bfa;
  --color-gray-500:  #6b7280;
}

/* ── Semantic color tokens (dark theme — default) ── */
:root,
[data-theme="dark"] {
  --bg:        #0f172a;
  --surface:   #1e293b;
  --surface2:  #334155;
  --surface3:  #475569;
  --border:    #475569;
  --text:      #e2e8f0;
  --text2:     #94a3b8;
  --text3:     #64748b;

  --confirmed: #f59e0b;
  --special:   #8b5cf6;
  --reserved:  #6b7280;
  --total:     #06b6d4;
  --critical:  #ef4444;
  --warning:   #fb923c;
  --ok:        #10b981;
  --blue:      #3b82f6;

  --text-on-accent: #000;
  --focus-ring:     #f59e0b;
}

/* ── Light theme ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #f8fafc;
    --surface:   #ffffff;
    --surface2:  #f1f5f9;
    --surface3:  #e2e8f0;
    --border:    #cbd5e1;
    --text:      #0f172a;
    --text2:     #475569;
    --text3:     #94a3b8;
    --text-on-accent: #000;
    --focus-ring:     #d97706;
  }
}

/* ── Typography ── */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-2xs: 9px;
  --text-xs:  10px;
  --text-sm:  11px;
  --text-base:13px;
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 26px;
  --text-4xl: 32px;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold:  600;
  --font-bold:     700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
}

/* ── Spacing (4px grid) ── */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
}

/* ── Border radius ── */
:root {
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-pill:  9999px;
}

/* ── Shadows (dark-optimised) ── */
:root {
  --shadow-sm:  0 1px 2px  rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.4);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.5);
}

/* ── Transitions ── */
:root {
  --transition-fast:   0.15s ease;
  --transition-normal:  0.2s ease;
  --transition-slow:   0.3s ease;
}

/* ── Z-index layers ── */
:root {
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   50;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    500;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0s;
    --transition-normal:  0s;
    --transition-slow:   0s;
  }
}