:root {
  color-scheme: dark;

  /* Core backgrounds */
  --bg: #020617;
  --bg-elevated: rgba(10, 17, 38, 0.82);
  --surface: rgba(12, 20, 42, 0.68);
  --surface-strong: rgba(10, 17, 38, 0.94);

  /* Typography */
  --text: #e8f0ff;
  --text-muted: rgba(224, 232, 255, 0.7);
  --text-soft: rgba(224, 232, 255, 0.56);

  /* Lines and borders */
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(125, 211, 252, 0.24);
  --line-bright: rgba(255, 255, 255, 0.08);

  /* Brand accents */
  --primary: #6366f1;
  --secondary: #22d3ee;
  --primary-soft: rgba(99, 102, 241, 0.18);
  --secondary-soft: rgba(34, 211, 238, 0.16);
  --glow: rgba(34, 211, 238, 0.16);
  --glow-strong: rgba(34, 211, 238, 0.24);

  /* Shadows */
  --shadow-soft: 0 18px 60px rgba(2, 8, 23, 0.3);
  --shadow-strong: 0 28px 80px rgba(2, 8, 23, 0.46);

  /* Radius */
  --radius-s: 14px;
  --radius-m: 20px;
  --radius-l: 28px;

  /* Layout
     --header-height is the single source of truth. Do not redeclare in component files.
     IMPORTANT: 88px is intentional layout clearance, NOT the literal rendered bar height.
     The visible desktop header bar renders at ~60px (--header-bar-height-desktop in header.css).
     The extra ~28px is deliberate breathing room for hero top spacing. Do NOT "correct"
     this to 60px — it would collapse hero content padding at every breakpoint. */
  --container: 1280px;
  --header-height: 88px;

  /* Container & Rail System
     --nexus-hero-rail: hero section horizontal inset; home.css responsive overrides handle narrower viewports
     --nexus-wide-rail: homepage content sections; home.css @900px override is the only mobile value
     --nexus-section-gap: vertical rhythm between homepage sections; consumed by layout-overrides.css
     --nexus-page-rail, --nexus-card-rail, --nexus-climate-rail: live values owned by layout-overrides.css */
  --nexus-hero-rail: min(100% - clamp(2rem, 6vw, 6rem), 74rem);
  --nexus-wide-rail: min(100% - clamp(2rem, 7vw, 7rem), 72rem);
  --nexus-section-gap: clamp(2rem, 4.5vw, 4rem);

  /* Transition Durations
     --duration-instant  active press, micro-feedback
     --duration-fast     link hover, opacity micro
     --duration-base     all standard UI hover responses
     --duration-medium   shuttle, scroll transitions
     --duration-slow     focus pull, glass transitions
     --duration-structural  header drop, panel sweep */
  --duration-instant: 80ms;
  --duration-fast: 160ms;
  --duration-base: 220ms;
  --duration-medium: 280ms;
  --duration-slow: 380ms;
  --duration-structural: 480ms;

  /* Easing Curves */
  --ease-base: ease;
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-crisp: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-base: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Blur Tiers
     Maps to distinct glass surface types — do not invent new values outside these tiers. */
  --blur-low: 11px;         /* nested card body */
  --blur-card: 12px;        /* floating node labels */
  --blur-base: 14px;        /* secondary button, light elements */
  --blur-mid: 16px;         /* dock, scroll shuttle */
  --blur-panel: 18px;       /* standard glass panel */
  --blur-panel-elevated: 20px;   /* hero panel enhanced */
  --blur-panel-hover: 24px;      /* panel focus pull hover */
  --blur-panel-hero-hover: 26px; /* hero panel enhanced hover */
  --blur-nav: 24px;         /* nav dropdown */

  /* Saturation Tiers */
  --sat-low: 106%;
  --sat-base: 112%;
  --sat-panel: 115%;
  --sat-header: 118%;
  --sat-shuttle: 125%;
  --sat-nav: 128%;
  --sat-panel-enhanced: 130%;
  --sat-panel-hero-hover: 138%;

  /* Glow Opacity Tiers */
  --glow-whisper: 0.05;
  --glow-soft: 0.08;
  --glow-mid: 0.12;
  --glow-base: 0.14;
  --glow-strong: 0.18;
  --glow-vivid: 0.22;

  /* Border Opacity Tiers */
  --border-whisper: 0.04;
  --border-soft: 0.06;
  --border-mid: 0.08;
  --border-base: 0.12;
  --border-elevated: 0.16;
  --border-active: 0.22;
  --border-strong: 0.35;

  /* Interaction Lift — use as full transform values */
  --hover-lift-micro: translateY(-0.5px);
  --hover-lift-base: translateY(-1px);
  --hover-lift-control: translateY(-1px) scale(1.03);
  --press-scale: scale(0.984) translateY(0.5px);
  --press-scale-dock: scale(0.93);
}