/* Theme design tokens */
:root,
[data-bs-theme="light"] {
  /* Color palette */
  --bg: #ffffff;
  --surface: #f8f9fa;
  --surface-alt: #e9ecef;
  --edge: #ced4da;
  --text: #212529;
  --muted: #6c757d;
  --green: #10B981;
  --green-300: #34D399;
  --green-700: #065F46;
  --purple: #8B5CF6;
  --purple-300: #A78BFA;
  --warn: #F59E0B;
  --danger: #EF4444;
  --info: #3B82F6;

  /* Typography */
  --font-size-base: 16px;
  --line-height-base: 1.5;
  --max-width: 85ch;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Layer z-index scale */
  --layer-base: 0;
  --layer-header: 100;
  --layer-rails: 200;
  --layer-menus: 700;
  --layer-hovercards: 900;
  --layer-palette: 1200;
  --layer-toast: 1400;
  --layer-modal: 1600;
  --layer-tooltip: 2000;

  /* Radius & shadows */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-14: 14px;
  --shadow-s1: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-s2: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-s3: 0 8px 16px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] {
  --bg: #0B0F12;
  --surface: #121826;
  --surface-alt: #0F1724;
  --edge: #1F2937;
  --text: #E5E7EB;
  --muted: #9AA4B2;
  --green: #10B981;
  --green-300: #34D399;
  --green-700: #065F46;
  --purple: #8B5CF6;
  --purple-300: #A78BFA;
  --warn: #F59E0B;
  --danger: #EF4444;
  --info: #3B82F6;
  --shadow-s1: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-s2: 0 4px 8px rgba(0, 0, 0, 0.6);
  --shadow-s3: 0 8px 16px rgba(0, 0, 0, 0.8);
}

@media (forced-colors: active) {
  :root {
    --bg: Canvas;
    --surface: Canvas;
    --surface-alt: Canvas;
    --edge: CanvasText;
    --text: CanvasText;
    --muted: GrayText;
    --green: Highlight;
    --green-300: Highlight;
    --green-700: Highlight;
    --purple: Highlight;
    --purple-300: Highlight;
    --warn: Highlight;
    --danger: Highlight;
    --info: Highlight;
    --shadow-s1: none;
    --shadow-s2: none;
    --shadow-s3: none;
  }
}

/* Type styles */
body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

h1 {
  font-size: var(--font-size-32);
  line-height: 1.25;
}

h2 {
  font-size: var(--font-size-28);
  line-height: 1.25;
}

h3 {
  font-size: var(--font-size-24);
  line-height: 1.3;
}

h4 {
  font-size: var(--font-size-20);
  line-height: 1.35;
}