:root {
  --primary: #FA3A7F;
  --primary-soft: rgba(250, 58, 127, 0.10);
  --primary-soft-2: rgba(250, 58, 127, 0.20);
  --primary-glow: rgba(250, 58, 127, 0.40);
  --primary-glow-strong: rgba(250, 58, 127, 0.65);
  --primary-tint-shadow: rgba(250, 58, 127, 0.15);
  --primary-tint-shadow-2: rgba(250, 58, 127, 0.25);
  --secondary: #48626D;

  --cat-places: #FF6A86;
  --cat-rest: #44E97C;
  --cat-recipes: #F39530;
  --cat-act: #FFD93D;
  --cat-travel: #00CAFD;
  --cat-games: #D672D7;
  --cat-score: #A932EE;

  --bg: #111116;
  --bg-radial: radial-gradient(circle at 80% 0%, rgba(250, 58, 127, 0.18) 0%, #111116 55%);
  --surface: rgba(26, 26, 26, 0.55);
  --surface-elevated: rgba(38, 38, 38, 0.85);
  --surface-solid: #1A1A1A;
  --surface-tint: rgba(17, 17, 22, 0.6);
  --border-color: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.20);
  --text-main: #FAFAFA;
  --text-white: #FFFFFF;
  --text-muted: #8A9AA6;
  --text-dim: rgba(250, 250, 250, 0.50);
  --glass-shadow: 0 8px 32px 0 rgba(17, 17, 22, 0.45);
  --shadow-soft: 0 10px 30px -8px rgba(17, 17, 22, 0.35);
  --shadow-tinted: 0 20px 50px -12px rgba(17, 17, 22, 0.55);
  --nav-bg: rgba(17, 17, 22, 0.78);

  --r-pill: 999px;
  --r-card: 24px;
  --r-input: 16px;
  --r-modal: 28px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --container: 1200px;
  --container-narrow: 800px;
  --container-text: 65ch;

  --t-fast: 0.18s;
  --t-base: 0.30s;
  --t-slow: 0.60s;
  --t-cinema: 1.0s;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);

  --font: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-4xl: clamp(28px, 5vw, 58px);
  --fs-h2: clamp(32px, 4.5vw, 48px);
  --fs-h3: clamp(24px, 3.5vw, 32px);

  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;

  --tr-eyebrow: 0.18em;
}

body.light-mode {
  --bg: #F8F6F6;
  --bg-radial: radial-gradient(circle at 80% 0%, rgba(250, 58, 127, 0.10) 0%, #F8F6F6 55%);
  --surface: rgba(255, 255, 255, 0.60);
  --surface-elevated: rgba(255, 255, 255, 0.92);
  --surface-solid: #FFFFFF;
  --border-color: rgba(0, 0, 0, 0.06);
  --border-hover: rgba(0, 0, 0, 0.18);
  --text-main: #2C3A42;
  --text-muted: #6E7E8A;
  --text-dim: rgba(44, 58, 66, 0.55);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  --nav-bg: rgba(248, 246, 246, 0.85);
}