:root {
  --color-primary: #22D3EE;
  --color-primary-dark: #06b6d4;
  --color-on-primary: #000;
  --color-secondary: #67e8f9;
  --color-accent: #22D3EE;
  --color-bg-dark: #0a1218;
  --color-background: #0f1a20;
  --color-surface: #162028;
  --color-surface-2: #1c2830;
  --color-foreground: #f0f4f6;
  --color-muted: #7a8a92;
  --color-border: rgba(34, 211, 238, 0.1);
  --color-border-hover: rgba(34, 211, 238, 0.25);
  --color-ring: #22D3EE;
  --color-green: #10b981;
  --color-accent-glow: rgba(34, 211, 238, 0.25);
  --radius: 24px;
  --radius-sm: 16px;
  --radius-xs: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
body { background: var(--color-background); color: var(--color-foreground); overflow-x: hidden; }