:root {
  --sky-top: #e8f0fa;
  --sky-top-tint: #f1f6fb; /* visual top blend of sky-top and radial light */
  --sky-mid: #dce8f4;
  --sky-horizon: #f4f7fb;
  --sky-glow: rgba(255, 255, 255, 0.85);
  --text: #1a2332;
  --text-muted: #5a6578;
  --text-soft: #7a8699;
  --accent: #3d6ea8;
  --accent-soft: #6b8fc9;
  --line: rgba(255, 255, 255, 0.55);
  --glass-bg: rgba(255, 255, 255, 0.38);
  --glass-bg-strong: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.65);
  --shadow-soft: 0 8px 40px rgba(61, 110, 168, 0.08), 0 2px 12px rgba(26, 35, 50, 0.04);
  --shadow-card: 0 20px 60px rgba(61, 110, 168, 0.1), 0 4px 20px rgba(26, 35, 50, 0.06);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Libre Baskerville", Georgia, serif;
  --nav-h: 72px;
  /* Shared frosted surface for header + mobile dropdown (same material) */
  --nav-surface-bg: rgba(255, 255, 255, 0.42);
  --nav-surface-blur: blur(20px) saturate(160%);
  --nav-surface-border: rgba(255, 255, 255, 0.5);
  --nav-surface-inset: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  /* Liquid-glass nav island (desktop) */
  --lg-tint: rgba(255, 255, 255, 0.1);
  --lg-blur: 3px;
  --lg-saturate: 190%;
  --lg-brightness: 1.12;
  --lg-edge-light: rgba(255, 255, 255, 0.9);
  --lg-edge-soft: rgba(255, 255, 255, 0.4);
  --lg-shadow: 0 16px 50px rgba(20, 40, 70, 0.34), 0 4px 12px rgba(20, 40, 70, 0.22);
  --lg-irid: 0.8;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --p-far: 0px;
  --p-mid: 0px;
  --p-near: 0px;
  --mx: 0.5;
  --my: 0.5;
  --haze-opacity: 0.35;
  --cloud-opacity-far: 0.42;
  --cloud-opacity-mid: 0.5;
  --cloud-opacity-near: 0.38;
}

html[data-theme="dark"] {
  --sky-top: #0a1322;
  --sky-top-tint: #0b1424; /* visual top blend of sky-top and radial light */
  --sky-mid: #101c30;
  --sky-horizon: #0e1828;
  --sky-glow: rgba(120, 150, 195, 0.18);
  --text: #e9eef6;
  --text-muted: #a9b4c7;
  --text-soft: #8b96a9;
  --accent: #82a8dc;
  --accent-soft: #6488b8;
  --line: rgba(255, 255, 255, 0.12);
  --glass-bg: rgba(22, 34, 54, 0.42);
  --glass-bg-strong: rgba(24, 37, 58, 0.6);
  --glass-border: rgba(255, 255, 255, 0.14);
  --shadow-soft: 0 8px 40px rgba(2, 6, 14, 0.35), 0 2px 12px rgba(2, 6, 14, 0.28);
  --shadow-card: 0 20px 60px rgba(2, 6, 14, 0.45), 0 4px 20px rgba(2, 6, 14, 0.32);
  /* Shared frosted surface for header + mobile dropdown (same material) */
  --nav-surface-bg: rgba(13, 21, 36, 0.55);
  --nav-surface-border: rgba(255, 255, 255, 0.12);
  --nav-surface-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* Liquid-glass nav island (desktop) — dark overrides */
  --lg-tint: rgba(20, 30, 50, 0.14);
  --lg-brightness: 1.18;
  --lg-edge-light: rgba(255, 255, 255, 0.6);
  --lg-edge-soft: rgba(255, 255, 255, 0.14);
  --lg-shadow: 0 16px 50px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
  --haze-opacity: 0.08;
  --cloud-opacity-far: 0.3;
  --cloud-opacity-mid: 0.34;
  --cloud-opacity-near: 0.26;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --anim-duration: 0.01ms;
  }
}