/* css/tokens.css — SoftSapien design tokens */
:root {
  /* Core surface (fixed dark enterprise theme) */
  --color-obsidian-900: #0A0D14;
  --color-obsidian-800: #10141D;
  --color-obsidian-700: #171C27;

  /* Brand accent */
  --color-sapphire-500: #2563EB;
  --color-sapphire-400: #3B82F6;
  --color-sapphire-glow: rgba(37, 99, 235, 0.35);

  --color-emerald-500: #10B981;
  --color-emerald-400: #34D399;

  /* Neutral slate scale */
  --color-slate-50:  #F8FAFC;
  --color-slate-200: #E2E8F0;
  --color-slate-400: #94A3B8;
  --color-slate-600: #475569;
  --color-slate-800: #1E293B;

  /* Semantic */
  --color-bg-primary: var(--color-obsidian-900);
  --color-bg-surface: var(--color-obsidian-800);
  --color-bg-surface-2: var(--color-obsidian-700);
  --color-text-primary: var(--color-slate-50);
  --color-text-muted: var(--color-slate-400);
  --color-accent-primary: var(--color-sapphire-500);
  --color-accent-success: var(--color-emerald-500);
  --color-border-subtle: rgba(148, 163, 184, 0.14);

  /* Spacing scale (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-6: 1.5rem; --space-8: 2rem;   --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;  --space-24: 6rem;  --space-32: 8rem;

  /* Radii & elevation */
  --radius-md: 0.5rem; --radius-lg: 0.875rem; --radius-xl: 1.25rem; --radius-full: 999px;
  --shadow-glow-sapphire: 0 0 32px var(--color-sapphire-glow);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.28);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Breakpoints (for reference in comments/JS matchMedia; CSS uses literal px in @media) */
  --bp-tablet: 640px;
  --bp-desktop: 1024px;
  --bp-ultrawide: 1440px;

  --header-height: 76px;
}