:root {
  --color-neutral-0: #ffffff;
  --color-neutral-0-rgb: 255 255 255;
  --color-neutral-50: #f8fafc;
  --color-neutral-50-rgb: 248 250 252;
  --color-neutral-100: #f1f5f9;
  --color-neutral-100-rgb: 241 245 249;
  --color-neutral-200: #e2e8f0;
  --color-neutral-200-rgb: 226 232 240;
  --color-neutral-300: #cbd5e1;
  --color-neutral-300-rgb: 203 213 225;
  --color-neutral-400: #94a3b8;
  --color-neutral-400-rgb: 148 163 184;
  --color-neutral-500: #64748b;
  --color-neutral-500-rgb: 100 116 139;
  --color-neutral-600: #475569;
  --color-neutral-600-rgb: 71 85 105;
  --color-neutral-700: #334155;
  --color-neutral-700-rgb: 51 65 85;
  --color-neutral-800: #1f2937;
  --color-neutral-800-rgb: 31 41 55;
  --color-neutral-900: #0f172a;
  --color-neutral-900-rgb: 15 23 42;
  --color-neutral-950: #03040b;
  --color-neutral-950-rgb: 3 4 11;

  --color-black: #000000;
  --color-black-rgb: 0 0 0;

  --color-brand-400: #2dd4bf;
  --color-brand-400-rgb: 45 212 191;
  --color-brand-500: #14b8a6;
  --color-brand-500-rgb: 20 184 166;
  --color-brand-600: #0d9488;
  --color-brand-600-rgb: 13 148 136;

  --color-danger-500: #ef4444;
  --color-danger-500-rgb: 239 68 68;

  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --radius-2xl: 48px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 24px -2px rgba(0, 0, 0, 0.02);
  --shadow-card-dark: 0 12px 40px -8px rgba(0, 0, 0, 0.5);
  --shadow-button: 0 1px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --shadow-button-dark: 0 1px 20px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --shadow-accent: 0 10px 40px -18px rgba(20, 184, 166, 0.5);
  --shadow-glow: 0 0 8px rgba(20, 184, 166, 0.55);

  --bg: rgb(var(--color-neutral-0-rgb) / 1);
  --fg: rgb(var(--color-neutral-900-rgb) / 1);
  --border: rgba(0, 0, 0, 0.05);
  --border-highlight: rgba(255, 255, 255, 0.8);
  --grid: rgba(0, 0, 0, 0.03);
  --card-bg: rgba(255, 255, 255, 0.8);
  --glow: rgba(var(--color-brand-500-rgb) / 0.06);
}

.dark {
  --bg: rgb(var(--color-neutral-950-rgb) / 1);
  --fg: rgb(var(--color-neutral-100-rgb) / 1);
  --border: rgba(255, 255, 255, 0.06);
  --border-highlight: rgba(255, 255, 255, 0.03);
  --grid: rgba(255, 255, 255, 0.03);
  --card-bg: rgba(10, 12, 24, 0.4);
  --glow: rgba(var(--color-brand-500-rgb) / 0.1);
}