:root {
  color-scheme: light;
  --color-bg-canvas: #f7f7fb;
  --color-bg-subtle: #f1f2f7;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #e4e5ec;
  --color-border-strong: #c9cbd6;
  --color-text: #20212a;
  --color-text-secondary: #626573;
  --color-text-disabled: #9295a3;
  --color-text-inverse: #ffffff;
  --color-accent: #5b4ce6;
  --color-accent-hover: #4b3dd0;
  --color-accent-active: #3f32b7;
  --color-accent-subtle: #eeecff;
  --color-success: #18794e;
  --color-success-subtle: #e9f7ef;
  --color-warning: #8a5d00;
  --color-warning-subtle: #fff6d8;
  --color-danger: #b92d2d;
  --color-danger-subtle: #fdecec;
  --color-info: #2563b8;
  --color-info-subtle: #eaf2ff;

  --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;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-1: 0 4px 12px rgba(32, 33, 42, 0.08);
  --shadow-2: 0 12px 32px rgba(32, 33, 42, 0.14);
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 240ms;
  --focus-ring: 0 0 0 3px rgba(91, 76, 230, 0.28);

  /* Compatibility aliases: legacy screens migrate incrementally without a visual big-bang. */
  --bg: var(--color-bg-canvas);
  --surface: var(--color-surface);
  --surface-2: var(--color-bg-subtle);
  --text: var(--color-text);
  --text-muted: var(--color-text-secondary);
  --border: var(--color-border);
  --primary: var(--color-accent);
  --primary-hover: var(--color-accent-hover);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);
  --shadow: var(--shadow-1);
  --shadow-lg: var(--shadow-2);
  --radius: var(--radius-lg);
  --font-size: 16px;
  --transition-speed: 0.4s;
}
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-canvas: #101117;
  --color-bg-subtle: #1d1f28;
  --color-surface: #181a22;
  --color-surface-raised: #22242e;
  --color-border: #30333e;
  --color-border-strong: #474b59;
  --color-text: #f4f4f7;
  --color-text-secondary: #b4b6c1;
  --color-text-disabled: #7c7f8d;
  --color-text-inverse: #ffffff;
  --color-accent: #8a7fff;
  --color-accent-hover: #a298ff;
  --color-accent-active: #7063ef;
  --color-accent-subtle: #292444;
  --color-success: #5bc495;
  --color-success-subtle: #173a2b;
  --color-warning: #e9b949;
  --color-warning-subtle: #3b3015;
  --color-danger: #ff8585;
  --color-danger-subtle: #442020;
  --color-info: #78aaf4;
  --color-info-subtle: #182e4d;
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.42);
  --focus-ring: 0 0 0 3px rgba(138, 127, 255, 0.34);
}