:root {
  --background: oklch(0.99 0.005 280);
  --foreground: oklch(0.22 0.05 270);
  --card: #ffffff;
  --muted-foreground: oklch(0.5 0.04 270);
  --border: oklch(0.92 0.015 285);
  --accent: oklch(0.93 0.04 295);
  --accent-foreground: oklch(0.25 0.07 270);
  --secondary: oklch(0.96 0.015 285);
  --gold: oklch(0.78 0.13 80);
  --gold-foreground: oklch(0.22 0.05 270);
  --navy: oklch(0.25 0.07 270);
  --mystic: oklch(0.55 0.15 295);
  --gradient-mystic: linear-gradient(135deg, oklch(0.25 0.07 270) 0%, oklch(0.4 0.15 295) 100%);
  --gradient-gold: linear-gradient(135deg, oklch(0.82 0.14 85) 0%, oklch(0.72 0.13 70) 100%);
  --gradient-soft: linear-gradient(180deg, oklch(0.99 0.005 280) 0%, oklch(0.96 0.025 295) 100%);
  --gradient-night: linear-gradient(180deg, oklch(0.18 0.06 270) 0%, oklch(0.32 0.12 290) 100%);
  --shadow-soft: 0 4px 24px -8px color-mix(in oklab, var(--navy) 18%, transparent);
  --shadow-elegant: 0 20px 60px -20px color-mix(in oklab, var(--navy) 30%, transparent);
  --shadow-gold: 0 10px 40px -10px color-mix(in oklab, var(--gold) 45%, transparent);
}
html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
}
h1,h2,h3,h4 { font-family: 'Cormorant Garamond', serif; letter-spacing: -0.01em; }

.font-display { font-family: 'Cormorant Garamond', serif; }
.bg-gradient-mystic { background: var(--gradient-mystic); }
.bg-gradient-gold { background: var(--gradient-gold); }
.bg-gradient-soft { background: var(--gradient-soft); }
.bg-gradient-night { background: var(--gradient-night); }
.text-gradient-gold { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-gradient-mystic { background: var(--gradient-mystic); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-gold { box-shadow: var(--shadow-gold); }

.text-navy { color: var(--navy); }
.text-gold { color: var(--gold); }
.text-gold-foreground { color: var(--gold-foreground); }
.bg-navy { background: var(--navy); }
.bg-gold { background: var(--gold); }
.bg-card { background: var(--card); }
.bg-accent { background: var(--accent); }
.text-accent-foreground { color: var(--accent-foreground); }
.bg-secondary { background: var(--secondary); }
.text-secondary-foreground { color: var(--accent-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.border-border { border-color: var(--border); }
.bg-background { background: var(--background); }

.star-pattern {
  background-image:
    radial-gradient(1px 1px at 20px 30px, oklch(0.78 0.13 80 / 0.5), transparent),
    radial-gradient(1px 1px at 90px 70px, oklch(0.55 0.15 295 / 0.4), transparent),
    radial-gradient(1.5px 1.5px at 160px 120px, oklch(0.78 0.13 80 / 0.4), transparent),
    radial-gradient(1px 1px at 50px 160px, oklch(0.55 0.15 295 / 0.5), transparent),
    radial-gradient(1px 1px at 200px 200px, oklch(0.78 0.13 80 / 0.4), transparent);
  background-size: 240px 240px;
}

@keyframes twinkle { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }
.animate-twinkle { animation: twinkle 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes fade-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.animate-fade-up { animation: fade-up .7s ease-out both; }

select option { color: var(--navy); background: #fff; }