:root {
  --background: 120 20% 97%;
  --foreground: 220 50% 20%;
  --card: 0 0% 100%;
  --primary: 230 55% 28%;
  --primary-foreground: 0 0% 100%;
  --secondary: 145 75% 35%;
  --secondary-foreground: 0 0% 100%;
  --muted: 145 30% 92%;
  --muted-foreground: 220 30% 40%;
  --accent: 145 80% 38%;
  --accent-foreground: 0 0% 100%;
  --border: 145 20% 85%;
  --gold-warm: 42 85% 55%;
  --gold-light: 45 80% 70%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
}

html {
  scroll-behavior: smooth;
}

/* WordPress-friendly accessibility utilities */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

.skip-link {
  left: -9999px;
}

.skip-link:focus {
  left: 5px;
}

body {
  font-family: Manrope, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.font-display {
  font-family: Outfit, sans-serif;
}

.gradient-hero {
  background: linear-gradient(
    135deg,
    hsl(230 55% 25%) 0%,
    hsl(230 45% 32%) 50%,
    hsl(145 60% 30%) 100%
  );
}

.gradient-overlay {
  background: linear-gradient(
    180deg,
    hsla(230, 55%, 25%, 0.78) 0%,
    hsla(230, 45%, 22%, 0.9) 100%
  );
}

.btn-hero {
  background: hsl(var(--secondary));
  color: white;
  box-shadow: 0 4px 20px -4px hsla(145, 75%, 35%, 0.4);
}

.btn-hero:hover {
  filter: brightness(1.08);
}

.btn-outline-hero {
  border: 2px solid rgba(255, 255, 255, 0.45);
  color: white;
  background: transparent;
}

.btn-outline-hero:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-gold {
  background: hsl(var(--gold-warm));
  color: hsl(230 55% 18%);
  font-weight: 700;
}

.btn-gold:hover {
  filter: brightness(1.05);
}

.btn-primary-solid {
  background: hsl(var(--primary));
  color: white;
}

.btn-primary-solid:hover {
  filter: brightness(1.08);
}

/* Contact form invalid state (works even before Tailwind rebuild) */
.gn-contact-input.border-destructive {
  border-color: hsl(var(--destructive));
}

.bg-cream {
  background: hsl(120 20% 97%);
}

.bg-cream-dark {
  background: hsl(120 15% 92%);
}

/* Cart drawer */
#cart-drawer {
  display: flex;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  visibility: hidden;
  pointer-events: none;
}

#cart-drawer.cart-drawer-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

#cart-overlay,
#checkout-overlay {
  animation: cart-fade-in 0.2s ease;
}

@keyframes cart-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.spar-toast {
  animation: spar-toast-in 0.25s ease;
}

.spar-toast-out {
  opacity: 0;
  transform: translateY(8px);
  transition: 0.25s ease;
}

@keyframes spar-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes winter-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0.2; }
}

#cart-drawer button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}