:root {
  /* Surface colors */
  --bg-darkest: #04070c;
  --bg-base: #070b12;
  --bg-surface: #0c121e;
  --bg-card: rgba(12, 18, 30, 0.72);
  --bg-card-hover: rgba(17, 26, 44, 0.85);
  --bg-glass-nav: rgba(7, 11, 18, 0.75);

  /* Borders & Accents */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-bright: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(76, 245, 200, 0.4);
  --border-gold: rgba(255, 209, 102, 0.4);

  /* Primary Brand Palette */
  --brand-cyan: #4cf5c8;
  --brand-cyan-glow: rgba(76, 245, 200, 0.35);
  --brand-cyan-dim: rgba(76, 245, 200, 0.1);

  --brand-blue: #38bdf8;
  --brand-blue-glow: rgba(56, 189, 248, 0.3);

  --brand-gold: #ffd166;
  --brand-gold-glow: rgba(255, 209, 102, 0.35);
  --brand-gold-dim: rgba(255, 209, 102, 0.1);

  --brand-danger: #ff5c77;
  --brand-danger-glow: rgba(255, 92, 119, 0.3);

  /* Typography Colors */
  --text-pure: #ffffff;
  --text-high: #f1f5f9;
  --text-medium: #94a3b8;
  --text-low: #64748b;
  --text-dim: #475569;

  /* Typography Fonts */
  --font-display: "Space Grotesk", "Avenir Next", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  /* Geometry & Shadows */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  --shadow-ambient: 0 30px 100px -20px rgba(0, 0, 0, 0.85);
  --shadow-glow-cyan: 0 0 45px -5px var(--brand-cyan-glow);
  --shadow-glow-gold: 0 0 45px -5px var(--brand-gold-glow);

  --container-max: 1260px;
  --nav-height: 72px;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}