:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --blue-500: #0070f3;
  --blue-600: #0061d5;
}

body {
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --gray-1000: #0a0a0a;

  --bg: #000;
  --bg-elevated: #0a0a0a;
  --text: #fff;
  --text-invert: #000;
  --btn-primary-bg: #fff;
  --btn-primary-text: #000;
  --focus-ring: rgba(255, 255, 255, 0.05);
  --shadow-color: rgba(255, 255, 255, 0.12);
  --backdrop: rgba(0, 0, 0, 0.6);
  --danger: #f87171;
  --flash-notice-bg: rgba(34, 197, 94, 0.1);
  --flash-notice-text: #86efac;
  --flash-notice-border: rgba(34, 197, 94, 0.3);
  --flash-alert-bg: rgba(239, 68, 68, 0.1);
  --flash-alert-text: #fca5a5;
  --flash-alert-border: rgba(239, 68, 68, 0.3);

  color-scheme: dark;
}

body[data-theme="light"] {
  --gray-50: #0a0a0a;
  --gray-100: #171717;
  --gray-200: #262626;
  --gray-300: #404040;
  --gray-400: #525252;
  --gray-500: #737373;
  --gray-600: #a3a3a3;
  --gray-700: #d4d4d4;
  --gray-800: #e5e5e5;
  --gray-900: #f5f5f5;
  --gray-1000: #fafafa;

  --bg: #fff;
  --bg-elevated: #fafafa;
  --text: #0a0a0a;
  --text-invert: #fff;
  --btn-primary-bg: #171717;
  --btn-primary-text: #fff;
  --focus-ring: rgba(0, 0, 0, 0.06);
  --shadow-color: rgba(0, 0, 0, 0.12);
  --backdrop: rgba(0, 0, 0, 0.45);
  --danger: #dc2626;
  --flash-notice-bg: rgba(22, 163, 74, 0.08);
  --flash-notice-text: #15803d;
  --flash-notice-border: rgba(22, 163, 74, 0.35);
  --flash-alert-bg: rgba(220, 38, 38, 0.08);
  --flash-alert-text: #b91c1c;
  --flash-alert-border: rgba(220, 38, 38, 0.35);

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  body[data-theme="system"] {
    --gray-50: #0a0a0a;
    --gray-100: #171717;
    --gray-200: #262626;
    --gray-300: #404040;
    --gray-400: #525252;
    --gray-500: #737373;
    --gray-600: #a3a3a3;
    --gray-700: #d4d4d4;
    --gray-800: #e5e5e5;
    --gray-900: #f5f5f5;
    --gray-1000: #fafafa;

    --bg: #fff;
    --bg-elevated: #fafafa;
    --text: #0a0a0a;
    --text-invert: #fff;
    --btn-primary-bg: #171717;
    --btn-primary-text: #fff;
    --focus-ring: rgba(0, 0, 0, 0.06);
    --shadow-color: rgba(0, 0, 0, 0.12);
    --backdrop: rgba(0, 0, 0, 0.45);
    --danger: #dc2626;
    --flash-notice-bg: rgba(22, 163, 74, 0.08);
    --flash-notice-text: #15803d;
    --flash-notice-border: rgba(22, 163, 74, 0.35);
    --flash-alert-bg: rgba(220, 38, 38, 0.08);
    --flash-alert-text: #b91c1c;
    --flash-alert-border: rgba(220, 38, 38, 0.35);

    color-scheme: light;
  }
}