:root {
  --font-sans: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --accent: #3d7eff;
  --accent-2: #22d3ee;
  --accent-hot: #7aa4ff;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;

  --radius: 16px;
  --radius-sm: 10px;
  --max: 1180px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow: 0 24px 80px rgba(3, 8, 20, 0.28);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-dim: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 32%, transparent);

  color-scheme: dark;
  --bg: #070b14;
  --bg-2: #0c1220;
  --bg-3: #121a2c;
  --line: rgba(180, 200, 240, 0.12);
  --text: #eef3ff;
  --muted: #93a0bf;
  --faint: #66738f;
  --card: rgba(16, 24, 42, 0.72);
  --glass: rgba(10, 16, 30, 0.7);
  --invert: #f5f7fb;
  --hero-veil: linear-gradient(180deg, rgba(7, 11, 20, 0.35), rgba(7, 11, 20, 0.88));
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-2: #ffffff;
  --bg-3: #eef2f9;
  --line: rgba(20, 32, 60, 0.1);
  --text: #0c1324;
  --muted: #4b5874;
  --faint: #6d7a94;
  --card: rgba(255, 255, 255, 0.8);
  --glass: rgba(255, 255, 255, 0.78);
  --invert: #070b14;
  --shadow: 0 20px 60px rgba(20, 32, 70, 0.1);
  --hero-veil: linear-gradient(180deg, rgba(244, 246, 251, 0.2), rgba(244, 246, 251, 0.92));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease: linear;
  }
  html {
    scroll-behavior: auto;
  }
}