:root {
  /* Light Theme Tokens (Blueprint Section 04) */
  --bg-canvas: #F7F7FC;
  --bg-surface: #FFFFFF;
  --bg-subtle: #EEF0F8;
  --color-primary: #6558D3;
  --color-primary-hover: #5346BE;
  --color-primary-soft: rgba(101, 88, 211, 0.12);
  --color-accent: #61B7C9;
  --color-accent-soft: rgba(97, 183, 201, 0.15);
  --text-main: #253047;
  --text-muted: #65718A;
  --border-color: #DDE2ED;

  /* Semantic Status Colors */
  --color-success: #1E8E5A;
  --color-success-bg: #E6F6EE;
  --color-warning: #B45309;
  --color-warning-bg: #FEF3C7;
  --color-danger: #D92D20;
  --color-danger-bg: #FEE4E2;

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

  /* Radius Scale (12-20 px) */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(37, 48, 71, 0.05);
  --shadow-md: 0 8px 24px rgba(37, 48, 71, 0.08);

  /* Motion (120-220 ms) */
  --transition-fast: 120ms ease-out;
  --transition-base: 180ms ease-out;
  --transition-slow: 220ms ease-out;

  /* Typography */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dark Theme Tokens (Blueprint Section 04) */
html[data-theme="dark"] {
  --bg-canvas: #111827;
  --bg-surface: #182435;
  --bg-subtle: #1F2E43;
  --color-primary: #7C70E6;
  --color-primary-hover: #8E83F0;
  --color-primary-soft: rgba(124, 112, 230, 0.18);
  --color-accent: #61B7C9;
  --color-accent-soft: rgba(97, 183, 201, 0.2);
  --text-main: #F3F4F6;
  --text-muted: #9CA3AF;
  --border-color: #2A3A50;

  --color-success: #34D399;
  --color-success-bg: rgba(52, 211, 153, 0.15);
  --color-warning: #FBBF24;
  --color-warning-bg: rgba(251, 191, 36, 0.15);
  --color-danger: #F87171;
  --color-danger-bg: rgba(248, 113, 113, 0.15);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Reduced Motion Accessibility Support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}

html[data-reduced-motion="true"] {
  --transition-fast: 0ms;
  --transition-base: 0ms;
  --transition-slow: 0ms;
}