/* vanilla.css — Vanilla Light (Warm Premium) */
:root {
  --radius: 16px;
  --btn-radius: 50px;
  --shadow: 0 12px 36px rgba(212, 175, 55, 0.1);
  --font-weight-heading: 800;
  --spacing-section: 6.5rem;
  --letter-spacing: -0.01em;
  --card-bg: rgba(255, 252, 250, 0.95);
  --card-border: rgba(212, 175, 55, 0.2);
  
  --bg: #fffcfa;
  --bg-alt: #fdf6f0;
  --text: #2a1610;
  --text-muted: #5c3a21;
  
  --hero-bg: radial-gradient(at 30% 10%, rgba(212,175,55,0.1) 0%, transparent 50%),
             radial-gradient(at 80% 90%, rgba(176,98,67,0.08) 0%, transparent 50%),
             #fffcfa;
             
  --hero-text: #2a1610;
  --hero-text-muted: #5c3a21;
  --hero-overlay: rgba(255, 252, 250, 0.7);
  --badge-bg: rgba(255, 252, 250, 0.85);
  --badge-text: #2a1610;
  
  --hero-height: 95vh;
  --heading-transform: none;
  --btn-padding: 1rem 2.5rem;
  --btn-font-size: 1.05rem;
  --section-title-size: 2.8rem;
  --card-hover-scale: 1.03;
}

/* V3 Hero hardcodes white border + white text on the secondary CTA, invisible
   on this light-hero theme. Re-route to the theme's dark hero text colors.
   !important is required to beat the inline style on sections/v3/Hero.tsx. */
#hero-cta-services {
  border-color: var(--hero-text-muted) !important;
  color: var(--hero-text) !important;
  background-color: var(--card-bg);
}
#hero-cta-services:hover {
  background-color: var(--primary);
  color: #ffffff !important;
  border-color: var(--primary) !important;
}