:root {
  color-scheme: light dark;
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-header-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --step-1: clamp(1.1rem, 1rem + 0.45vw, 1.28rem);
  --step-2: clamp(1.35rem, 1.15rem + 0.85vw, 1.65rem);
  --step-3: clamp(1.65rem, 1.35rem + 1.35vw, 2.15rem);
  --step-4: clamp(2rem, 1.55rem + 2vw, 2.85rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  /* Match .hero.section > .container (glass hero + site sections) */
  --site-content-max: 1120px;

  /* Match .site-header border + .header-inner min-height (assets/css/header.css) */
  --site-header-bar-offset: calc(4.25rem + 1px);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --blur-glass: 24px;
  --blur-strong: 40px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 240ms;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg0: #f4f7fb;
  --bg1: #e8eef8;
  --fg: #0c1220;
  --fg-muted: rgba(12, 18, 32, 0.62);
  --stroke: rgba(12, 18, 32, 0.08);
  --stroke-strong: rgba(12, 18, 32, 0.14);
  --elev: rgba(255, 255, 255, 0.72);
  --elev2: rgba(255, 255, 255, 0.55);
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --danger: #dc2626;
  --warn: #d97706;
  --ok: #059669;
  --shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg0: #070a10;
  --bg1: #0f141d;
  --fg: #eef2ff;
  --fg-muted: rgba(238, 242, 255, 0.62);
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.14);
  --elev: rgba(22, 28, 40, 0.72);
  --elev2: rgba(22, 28, 40, 0.48);
  --accent: #60a5fa;
  --accent-soft: rgba(96, 165, 250, 0.14);
  --danger: #f87171;
  --warn: #fbbf24;
  --ok: #34d399;
  --shadow: 0 28px 100px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --bg0: #070a10;
    --bg1: #0f141d;
    --fg: #eef2ff;
    --fg-muted: rgba(238, 242, 255, 0.62);
    --stroke: rgba(255, 255, 255, 0.08);
    --stroke-strong: rgba(255, 255, 255, 0.14);
    --elev: rgba(22, 28, 40, 0.72);
    --elev2: rgba(22, 28, 40, 0.48);
    --accent: #60a5fa;
    --accent-soft: rgba(96, 165, 250, 0.14);
    --danger: #f87171;
    --warn: #fbbf24;
    --ok: #34d399;
    --shadow: 0 28px 100px rgba(0, 0, 0, 0.55);
  }
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --bg0: #f4f7fb;
    --bg1: #e8eef8;
    --fg: #0c1220;
    --fg-muted: rgba(12, 18, 32, 0.62);
    --stroke: rgba(12, 18, 32, 0.08);
    --stroke-strong: rgba(12, 18, 32, 0.14);
    --elev: rgba(255, 255, 255, 0.72);
    --elev2: rgba(255, 255, 255, 0.55);
    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, 0.12);
    --danger: #dc2626;
    --warn: #d97706;
    --ok: #059669;
    --shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
  }
}