@import url('theme.css');

/* ============================================================
   THEME: Veluna GLP-1 Booster
   Source: https://buyveluna.com/
   Extracted: 2026-04-01
   Theme type: light (white background with gradient hero, violet accent)
   ============================================================ */

/* ── LAYER 1: COLOR TOKENS ───────────────────────────────── */
:root {
  --primary:        #462e91;
  --primary-dark:   #3a257a;
  --primary-light:  #e8e2f0;
  --secondary:      #e8e4f0;
  --bg:             #ffffff;
  --bg-alt:         #f8f9fa;
  --dark:           #292923;
  --text:           #374151;
  --text-muted:     #6b7280;
  --text-on-primary: #ffffff;
  --cta-bg:         #462e91;
  --cta-text:       #ffffff;
  --alert-bg:       #462e91;
  --alert-text:     #ffffff;
  --trust-bg:       var(--bg-alt);
  --border:         #e5e7eb;
}

/* ── LAYER 2: TYPOGRAPHY TOKENS ────────────────────────────────── */
:root {
  --font-heading:   'Poppins', sans-serif;
  --font-body:      'Inter', sans-serif;
  --fw-heading:     700;
  --fw-subheading:  600;
  --fw-body:        400;
  --lh-heading:     1.2;
  --lh-body:        1.75;
  --fs-h1:          clamp(2rem, 5vw, 3.5rem);
  --fs-h2:          clamp(1.6rem, 3vw, 2.4rem);
  --fs-body:        1rem;
  --ls-heading:     -0.02em;
}

/* ── LAYER 3: HERO BACKGROUND ──────────────────────────────────── */
/* Light theme with gradient background in hero */
#hero {
  background: linear-gradient(135deg, #462e91 0%, #5a3da8 50%, #462e91 100%);
}

/* ── LAYER 4: COMPONENT OVERRIDES ───────────────────────────────── */

/* Alert bar */
#alert-bar {
  background: linear-gradient(90deg, #462e91 0%, #5a3da8 100%);
  color: var(--alert-text);
}
.alert-badge i { color: #a5b4fc; }

/* Navbar */
#header {
  background: var(--dark);
  background: linear-gradient(135deg, #462e91 0%, #462e91 100%);
}

.nav-logo-text {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Hero elements */
.hero-badge {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #ffffff;
}
.hero-text {
  color: #fff;
}
.hero-text h1 {
  color: #fff;
}
.hero-text h1 .highlight {
  color: #a5b4fc;
}
.hero-tagline i {
  color: #a5b4fc;
}
.hero-guarantee i {
  color: #a5b4fc;
}
.hero-subtext {
  color: rgba(255,255,255,0.85);
}

/* CTA Buttons */
.btn-primary,
.hero-cta,
.cta-button {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-radius: 8px;
  padding: 16px 40px;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(70,46,145,0.35);
  transition: all 0.25s ease;
}
.btn-primary:hover,
.hero-cta:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(70,46,145,0.45);
}

/* Cards */
.feature-card,
.benefit-card,
.review-card {
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover,
.benefit-card:hover,
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
}

/* Feature icons */
.feature-icon-wrap {
  background: var(--primary-light);
  border-radius: 14px;
}
.feature-icon-wrap i {
  color: var(--primary);
}

/* Section labels */
.section-label {
  background: var(--secondary);
  color: var(--primary);
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Trust section */
#trust {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-icon {
  background: var(--primary-light);
}
.trust-icon i {
  color: var(--primary);
}

/* Social proof */
#social-proof {
  background: linear-gradient(135deg, var(--primary) 0%, #5a3da8 100%);
}

/* Reviews stats bar */
.reviews-stats {
  background: var(--secondary);
  border: 1px solid rgba(70,46,145,0.2);
}

/* Urgency badge */
.urgency-badge {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

/* Guarantee section in benefits */
.hero-guarantee {
  color: rgba(255,255,255,0.6);
}

/* ── LAYER 5: CONTRAST SAFETY CHECKS ────────────────────────────── */
/*
   Verified:
   [x] Navbar: dark gradient bg with white text — readable
   [x] Hero: dark violet gradient with white text — readable
   [x] CTA button: white text on violet bg — 4.5:1+ contrast ratio
   [x] Section labels: violet text on light purple bg — readable
   [x] Modal text: dark on light (from base theme) — readable
*/

/* ── RESPONSIVE FIXES ───────────────────────────────────────────── */
@media (max-width: 900px) {
  #hero {
    background: linear-gradient(180deg, #462e91 0%, #5a3da8 100%);
  }
}

@media (max-width: 600px) {
  .hero-text h1 {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }
}