:root {
  --accent: #c8102e;
  --accent-hover: #e8142e;
  --accent-dim: rgba(200, 16, 46, 0.12);

  --font-display: 'Syne', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --transition: 0.2s ease;
  --transition-slow: 0.4s ease;

  --shadow-card: 0 2px 24px rgba(0,0,0,0.18);
  --shadow-nav: 0 1px 0 var(--border);
}

[data-theme="dark"] {
  --bg: #0e0e0f;
  --surface: #161618;
  --surface-2: #1e1e21;
  --surface-3: #26262a;
  --text: #f0eeeb;
  --text-muted: #888480;
  --text-dim: #555250;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);
  --nav-bg: rgba(14,14,15,0.92);
  --hero-glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(200,16,46,0.14) 0%, transparent 70%);
  --dot-color: rgba(255,255,255,0.06);
}

[data-theme="light"] {
  --bg: #f4f3f1;
  --surface: #ffffff;
  --surface-2: #ebebea;
  --surface-3: #e2e1df;
  --text: #0f0e0d;
  --text-muted: #6b6866;
  --text-dim: #a09e9c;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);
  --nav-bg: rgba(244,243,241,0.92);
  --hero-glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(200,16,46,0.08) 0%, transparent 70%);
  --dot-color: rgba(0,0,0,0.06);
}