: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: "Fraunces", 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);
  --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;
}

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