/* Debi Lom — custom design tokens + utilities (ported from src/index.css).
   Tailwind theme colors reference these HSL vars; utilities below reproduce the
   gold gradients, luxury shadows, and glass effects from the React build. */

:root {
  --background: 0 0% 100%;
  --foreground: 220 20% 12%;

  --card: 0 0% 97%;
  --card-foreground: 220 20% 12%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 20% 12%;

  --primary: 40 60% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 10% 94%;
  --secondary-foreground: 220 20% 12%;

  --muted: 220 10% 94%;
  --muted-foreground: 220 10% 45%;

  --accent: 40 45% 40%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 10% 88%;
  --input: 220 10% 88%;
  --ring: 40 60% 45%;

  --radius: 0.375rem;

  --gold-gradient: linear-gradient(135deg, hsl(40 50% 38%), hsl(35 55% 48%), hsl(40 50% 38%));
  --gold-text-gradient: linear-gradient(135deg, hsl(40 55% 40%), hsl(35 65% 50%), hsl(40 45% 35%));
  --shadow-gold: 0 4px 30px -5px hsl(40 60% 45% / 0.15);
  --shadow-luxury: 0 20px 60px -15px hsl(0 0% 0% / 0.12);
}

body {
  font-family: 'Raleway', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── Custom utilities (from @layer utilities) ─────────────────────────────── */
.text-gold-gradient {
  background: var(--gold-text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gold-gradient { background: var(--gold-gradient); }
.shadow-gold { box-shadow: var(--shadow-gold); }
.shadow-luxury { box-shadow: var(--shadow-luxury); }
.gold-border { border: 1px solid hsl(40 50% 45% / 0.25); }
.gold-border-bright { border: 1px solid hsl(40 50% 45% / 0.5); }

.glass-dark {
  background: hsl(0 0% 100% / 0.95);
  backdrop-filter: blur(20px);
}

/* ── Scroll-reveal (replaces framer-motion whileInView fade-up) ───────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Offset in-page hash anchors so the fixed top bar + nav don't overlap them. */
[id] { scroll-margin-top: 7rem; }

/* ── Hero CTA row: make the three buttons identical in width and height ───── */
.hero-cta-row { align-items: stretch; }          /* equal height (tallest wins) */
.hero-cta { min-height: 3.75rem; }
@media (min-width: 640px) {
  .hero-cta-row > .hero-cta { flex: 1 1 0; }      /* equal width on desktop */
}