/* ============================================
   LAYER 1: Primitive Tokens
   ============================================ */
:root {
  /* Dark palette */
  --raw-navy-900: #0a1628;
  --raw-navy-800: #0f1f38;
  --raw-navy-700: #162a4a;
  --raw-navy-600: #1e3a5f;
  --raw-navy-500: #2a4a7f;

  --raw-blue-400: #60a5fa;
  --raw-blue-500: #4187ff;
  --raw-blue-600: #2563eb;
  --raw-blue-700: #1d4ed8;

  --raw-orange-400: #ffb74d;
  --raw-orange-500: #ff9800;

  --raw-teal-400: #22d3ee;
  --raw-teal-500: #06b6d4;
  --raw-teal-600: #0891b2;

  --raw-purple-400: #a78bfa;
  --raw-purple-500: #8b5cf6;
  --raw-purple-600: #7c3aed;

  --raw-red-400: #f87171;

  --raw-white: #e8edf5;
  --raw-white-muted: #8a9bb8;

  /* Light palette */
  --raw-warm-100: #f5f0e8;
  --raw-warm-white: #ffffff;
  --raw-dark-text: #1a1a2e;
  --raw-gray-500: #6b7280;
  --raw-gray-400: #9ca3af;

  /* Spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Typography */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular,
    Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
}

/* ============================================
   LAYER 2: Semantic Tokens — Dark (default)
   ============================================ */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --color-bg: var(--raw-navy-900);
  --color-bg-raised: var(--raw-navy-800);
  --color-bg-input: var(--raw-navy-700);
  --color-bg-key: var(--raw-navy-700);
  --color-bg-key-hover: var(--raw-navy-600);
  --color-bg-key-active: var(--raw-navy-500);

  /* Text */
  --color-text: var(--raw-white);
  --color-text-muted: var(--raw-white-muted);

  /* Accents */
  --color-accent: var(--raw-blue-400);
  --color-accent-strong: var(--raw-blue-500);
  --color-imperial: var(--raw-orange-500);
  --color-imperial-dim: rgba(255, 152, 0, 0.15);
  --color-imperial-border: rgba(255, 152, 0, 0.4);
  --color-metric: var(--raw-teal-400);
  --color-metric-dim: rgba(34, 211, 238, 0.15);
  --color-metric-border: rgba(34, 211, 238, 0.4);
  --color-save: var(--raw-purple-400);
  --color-save-dim: rgba(167, 139, 250, 0.15);
  --color-save-border: rgba(167, 139, 250, 0.4);
  --color-error: var(--raw-red-400);

  /* Borders */
  --color-border: rgba(65, 135, 255, 0.12);
  --color-surface: rgba(65, 135, 255, 0.06);

  /* Interactive */
  --color-focus-ring: var(--raw-blue-400);
}

/* ============================================
   LAYER 2: Semantic Tokens — Light
   ============================================ */
html[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --color-bg: var(--raw-warm-100);
  --color-bg-raised: var(--raw-warm-white);
  --color-bg-input: var(--raw-warm-white);
  --color-bg-key: rgba(0, 0, 0, 0.04);
  --color-bg-key-hover: rgba(0, 0, 0, 0.08);
  --color-bg-key-active: rgba(0, 0, 0, 0.12);

  /* Text */
  --color-text: var(--raw-dark-text);
  --color-text-muted: var(--raw-gray-500);

  /* Accents — darker for light BG contrast */
  --color-accent: var(--raw-blue-600);
  --color-accent-strong: var(--raw-blue-700);
  --color-imperial: var(--raw-orange-500);
  --color-imperial-dim: rgba(255, 152, 0, 0.12);
  --color-imperial-border: rgba(255, 152, 0, 0.35);
  --color-metric: var(--raw-teal-600);
  --color-metric-dim: rgba(8, 145, 178, 0.10);
  --color-metric-border: rgba(8, 145, 178, 0.30);
  --color-save: var(--raw-purple-600);
  --color-save-dim: rgba(124, 58, 237, 0.10);
  --color-save-border: rgba(124, 58, 237, 0.30);
  --color-error: var(--raw-red-400);

  /* Borders */
  --color-border: rgba(0, 0, 0, 0.10);
  --color-surface: rgba(0, 0, 0, 0.03);

  /* Interactive */
  --color-focus-ring: var(--raw-blue-600);
}

/* ============================================
   LAYER 3: Component Tokens
   ============================================ */
:root {
  --display-bg: var(--color-bg-raised);
  --display-font-size: var(--text-2xl);
  --key-gap: 6px;
  --key-min-height: 46px;
  --tab-height: 56px;
}