@view-transition {
  navigation: auto;
}

/* ==========================================================================
   Design System & Custom Properties
   ========================================================================== */
:root {
  /* Typography */
  --font-family-title: "Outfit", sans-serif;
  --font-family-sans: "Inter", sans-serif;

  /* Colors */
  --color-bg-darkest: hsl(225, 25%, 7%);
  --color-bg-card: hsla(225, 18%, 18%, 0.65);

  /* Harmonious, Curated Palette */
  --color-gold: hsl(45, 95%, 50%);
  --color-gold-glow: hsla(45, 95%, 50%, 0.35);
  --color-ruby: hsl(342, 85%, 52%);
  --color-ruby-glow: hsla(342, 85%, 52%, 0.3);
  --color-amber: hsl(35, 95%, 55%);
  --color-amber-glow: hsla(35, 95%, 55%, 0.3);
  --color-emerald: hsl(152, 75%, 43%);
  --color-emerald-glow: hsla(152, 75%, 43%, 0.3);
  --color-sapphire: hsl(207, 85%, 52%);
  --color-sapphire-glow: hsla(207, 85%, 52%, 0.3);

  --color-text-primary: hsl(225, 25%, 95%);
  --color-text-secondary: hsl(225, 15%, 70%);
  --color-text-muted: hsl(225, 14%, 60%);

  /* Borders and Blurs */
  --border-glass: 1px solid hsla(0, 0%, 100%, 0.08);
  --border-glass-focus: 1px solid hsla(0, 0%, 100%, 0.2);
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --blur-glass: blur(16px);

  /* Shadows */
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 0 20px var(--color-gold-glow);

  /* Animations */
  --transition-smooth: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}