:root {
  color-scheme: light dark;
  --bg: #f6f7fa;
  --bg-soft: #edf6f8;
  --surface: #ffffff;
  --surface-elevated: #f1f5f8;
  --surface-strong: #e9f7f6;
  --text: #2e3154;
  --text-muted: #60609b;
  --border: #dde7ee;
  --primary: #554f9f;
  --primary-contrast: #ffffff;
  --secondary: #7dd2cb;
  --success: #2f827a;
  --danger: #b23b57;
  --illustration-purple: #7863b8;
  --illustration-mint: #7dd2cb;
  --shadow: 0 12px 32px rgba(48, 64, 96, 0.14);
  --shadow-soft: 0 6px 18px rgba(48, 64, 96, 0.09);
  --overlay: rgba(31, 36, 58, 0.48);
  --focus: #0d7068;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --motion-fast: 150ms;
  --motion-normal: 240ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f222c;
  --bg-soft: #112a35;
  --surface: #162b36;
  --surface-elevated: #1e333f;
  --surface-strong: #163c45;
  --text: #f4fafb;
  --text-muted: #a7bec7;
  --border: #31505a;
  --primary: #9de6e0;
  --primary-contrast: #10272f;
  --secondary: #686baa;
  --success: #86cecc;
  --danger: #ff91a4;
  --illustration-purple: #7664c8;
  --illustration-mint: #9de6e0;
  --shadow: 0 14px 36px rgba(0, 10, 18, 0.4);
  --shadow-soft: 0 8px 22px rgba(0, 10, 18, 0.28);
  --overlay: rgba(1, 10, 15, 0.72);
  --focus: #d7fffb;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --bg: #0f222c;
    --bg-soft: #112a35;
    --surface: #162b36;
    --surface-elevated: #1e333f;
    --surface-strong: #163c45;
    --text: #f4fafb;
    --text-muted: #a7bec7;
    --border: #31505a;
    --primary: #9de6e0;
    --primary-contrast: #10272f;
    --secondary: #686baa;
    --success: #86cecc;
    --danger: #ff91a4;
    --illustration-purple: #7664c8;
    --illustration-mint: #9de6e0;
    --shadow: 0 14px 36px rgba(0, 10, 18, 0.4);
    --shadow-soft: 0 8px 22px rgba(0, 10, 18, 0.28);
    --overlay: rgba(1, 10, 15, 0.72);
    --focus: #d7fffb;
  }
}