/* ════════════════════════════════════════════════════════════════════════
   WOW — Wholesome Wellness By Andrea
   Colors & Typography
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/Nunito-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/Nunito-Italic.ttf') format('truetype');
}

:root {
  /* ── PRIMARY BRAND COLORS (from official logo color reference) ── */
  --wow-orange:        #d67c21; /* "W" letters — warm carrot */
  --wow-green:         #99b53c; /* avocado "o" — fresh leaf */

  /* ── EXTENDED PALETTE (derived, in-use across program/reference card) ── */
  --wow-orange-light:  #e8952a;
  --wow-orange-pale:   #fdf4e8;
  --wow-orange-tint:   #f5e6d0;
  --wow-green-dark:    #6b8a1e; /* legible green for text-on-light */
  --wow-green-mid:     #7a9030;
  --wow-green-light:   #eaf2d0;
  --wow-green-pale:    #f4f8e8;
  --wow-brown:         #5c3d1e; /* "By Andrea" tagline + earth accents */
  --wow-cream:         #faf8f4; /* paper/canvas */
  --wow-card-bg:       #f9f7f4;
  --wow-gingham-red:   #ee5e5e; /* tablecloth pattern */

  /* ── DOSHA / PHASE ACCENTS (Ayurvedic detox reference card) ── */
  --wow-kapha-green:   #3a7a3a;
  --wow-pitta-orange:  #d67c21;
  --wow-vata-blue:     #2a4a8a;
  --wow-kapha-eve:     #5c4830;

  /* ── NEUTRAL / TEXT ── */
  --wow-ink:           #2d2d2d; /* body */
  --wow-ink-soft:      #1a1a1a;
  --wow-text-muted:    #7a6a55; /* warm muted */
  --wow-text-soft:     #6b5d50;
  --wow-border:        #e8dcc8;
  --wow-border-orange: rgba(214,124,33,0.20);
  --wow-border-green:  rgba(153,181,60,0.25);

  /* ── SEMANTIC FEEDBACK (sparingly) ── */
  --wow-error:         #c04030;
  --wow-error-bg:      #fdf0ee;
  --wow-success:       var(--wow-green-dark);
  --wow-success-bg:    var(--wow-green-pale);
  --wow-warn:          #c0a030;
  --wow-warn-bg:       #fff3cd;

  /* ── RADII ── */
  --wow-radius-sm:     4px;   /* sharp web cards */
  --wow-radius-md:     12px;  /* program panels */
  --wow-radius-lg:     16px;  /* detox phase rows */
  --wow-radius-pill:   50px;  /* CTAs, badges */

  /* ── SHADOWS — soft & warm ── */
  --wow-shadow-sm:     0 2px 8px rgba(92,61,30,0.06);
  --wow-shadow-md:     0 4px 20px rgba(214,124,33,0.18);
  --wow-shadow-lg:     0 8px 30px rgba(0,0,0,0.10);
  --wow-shadow-cta:    0 4px 20px rgba(214,124,33,0.35);

  /* ── SPACING (8-based, with extras) ── */
  --wow-space-1:  4px;
  --wow-space-2:  8px;
  --wow-space-3:  12px;
  --wow-space-4:  16px;
  --wow-space-5:  20px;
  --wow-space-6:  24px;
  --wow-space-8:  32px;
  --wow-space-10: 40px;
  --wow-space-12: 48px;
  --wow-space-16: 64px;

  /* ── TRANSITION ── */
  --wow-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --wow-transition:     all 0.3s var(--wow-ease);

  /* ── TYPE FOUNDATION ── */
  --wow-font:           'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ── TYPE SCALE — semantic ── */
  --wow-display:        clamp(2rem, 4vw + 1rem, 3.2rem);   /* hero brand statements */
  --wow-h1:             clamp(1.6rem, 2vw + 1rem, 2.4rem);
  --wow-h2:             clamp(1.3rem, 1.4vw + 0.9rem, 1.8rem);
  --wow-h3:             1.2rem;
  --wow-h4:             1rem;
  --wow-body:           0.95rem;
  --wow-body-sm:        0.82rem;
  --wow-caption:        0.72rem;
  --wow-eyebrow:        0.62rem;  /* the ALL-CAPS letterspaced label */

  /* ── LINE HEIGHTS ── */
  --wow-lh-tight:       1.15;
  --wow-lh-snug:        1.35;
  --wow-lh-normal:      1.6;
  --wow-lh-loose:       1.9;     /* WOW signature long-form readability */

  /* ── LETTER SPACING ── */
  --wow-ls-tight:       -0.01em;
  --wow-ls-normal:      0;
  --wow-ls-wide:        0.05em;
  --wow-ls-wider:       0.1em;
  --wow-ls-widest:      0.35em; /* eyebrow labels */
}

/* ════════════════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════════ */

html, body {
  font-family: var(--wow-font);
  font-weight: 300; /* WOW's signature light body */
  color: var(--wow-ink);
  line-height: var(--wow-lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* Semantic heading roles */
.wow-display {
  font-size: var(--wow-display);
  font-weight: 900;
  line-height: var(--wow-lh-tight);
  letter-spacing: var(--wow-ls-tight);
  color: var(--wow-ink);
}

h1, .wow-h1 {
  font-size: var(--wow-h1);
  font-weight: 700;
  line-height: var(--wow-lh-tight);
  letter-spacing: var(--wow-ls-tight);
  color: var(--wow-orange);
}

h2, .wow-h2 {
  font-size: var(--wow-h2);
  font-weight: 800;
  line-height: var(--wow-lh-snug);
  color: var(--wow-ink);
}

h3, .wow-h3 {
  font-size: var(--wow-h3);
  font-weight: 700;
  line-height: var(--wow-lh-snug);
  color: var(--wow-ink);
}

h4, .wow-h4 {
  font-size: var(--wow-h4);
  font-weight: 700;
  color: var(--wow-orange);
  margin-bottom: 0.4rem;
}

p, .wow-p {
  font-size: var(--wow-body);
  font-weight: 300;
  line-height: var(--wow-lh-loose);
  color: var(--wow-text-soft);
}

.wow-lead {
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  color: var(--wow-text-soft);
}

/* The signature eyebrow label — used everywhere */
.wow-eyebrow {
  font-size: var(--wow-eyebrow);
  font-weight: 700;
  letter-spacing: var(--wow-ls-widest);
  text-transform: uppercase;
  color: var(--wow-orange);
}
.wow-eyebrow--green { color: var(--wow-green-dark); }

/* Inline emphasis utilities */
.wow-highlight        { color: var(--wow-orange); font-weight: 700; }
.wow-highlight-green  { color: var(--wow-green-dark); font-weight: 700; }
.wow-muted            { color: var(--wow-text-muted); }