/* ============================
   CSS Variables (Design Tokens)
   ============================ */
:root {
  --background: 270 20% 98%;
  --foreground: 260 30% 12%;
  --card: 0 0% 100%;
  --card-foreground: 260 30% 12%;
  --primary: 207 80% 48%;
  --primary-foreground: 0 0% 100%;
  --secondary: 270 30% 95%;
  --secondary-foreground: 260 30% 25%;
  --muted: 270 15% 92%;
  --muted-foreground: 260 10% 45%;
  --accent: 335 75% 58%;
  --accent-foreground: 0 0% 100%;
  --logo-pink: 335 75% 58%;
  --logo-purple: 270 45% 40%;
  --logo-orange: 35 92% 60%;
  --logo-blue: 207 80% 48%;
  --border: 270 15% 90%;
  --input: 270 15% 90%;
  --ring: 207 80% 48%;
  --radius: 0.75rem;
  --gradient-primary: linear-gradient(135deg, hsl(335, 75%, 58%) 0%, hsl(270, 45%, 40%) 50%, hsl(207, 80%, 48%) 100%);
  --gradient-hero: linear-gradient(180deg, hsl(270 20% 98% / 0.72) 0%, hsl(270 25% 96% / 0.48) 100%);
}

/* ============================
   Base Styles
   ============================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ============================
   Kirby rich text defaults
   ============================ */
.formatted h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.75rem;
}

/* ============================
   Custom Utilities (not available in Tailwind CDN)
   ============================ */
.text-gradient {
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-hero {
  background: var(--gradient-hero);
}

.btn-hero {
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
}

/* ============================
   Header scroll state
   ============================ */
#header.scrolled {
  background: hsl(var(--card) / 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px -8px hsl(260 30% 12% / 0.12);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* ============================
   Mobile nav open state
   ============================ */
#mobile-nav.open {
  display: flex;
}

/* ============================
   Scroll indicator animation
   ============================ */
@keyframes bounceScroll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

.animate-bounce-scroll {
  animation: bounceScroll 2s ease-in-out infinite;
}

/* ============================
   Fade-in animation (scroll)
   ============================ */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}