/* AG Bell Method — Color & Type tokens
 * Source: Brand Board R2
 */

:root {
  /* ==== BRAND COLORS ==== */
  --color-primary:        #013f34; /* Wellness Green — primary */
  --color-primary-deep:   #01201a; /* Primary for text (deeper green) */
  --color-purple:         #7B70F6; /* Energetic Purple — secondary */
  --color-purple-light:   #B1A9FF; /* Light Purple */
  --color-lime:           #D6FC18; /* Neon Lime — accent */
  --color-sea-light:      #D4EBEE; /* Light Sea Green */
  --color-offwhite:       #F9F6F5; /* Off-White — primary background */
  --color-black:          #0a0a0a;
  --color-white:          #ffffff;

  /* ==== SEMANTIC COLOR TOKENS ==== */
  --bg:                   var(--color-offwhite);
  --bg-alt:               var(--color-sea-light);
  --bg-inverse:           var(--color-primary);
  --bg-accent:            var(--color-purple);
  --bg-highlight:         var(--color-lime);

  --fg:                   var(--color-primary-deep);
  --fg-muted:             color-mix(in oklab, var(--color-primary-deep) 65%, transparent);
  --fg-subtle:            color-mix(in oklab, var(--color-primary-deep) 45%, transparent);
  --fg-on-dark:           var(--color-offwhite);
  --fg-on-purple:         var(--color-lime);
  --fg-on-lime:           var(--color-primary);

  --border:               color-mix(in oklab, var(--color-primary-deep) 15%, transparent);
  --border-strong:        var(--color-primary);

  /* Signature brand gradient — white to primary purple */
  --gradient-brand:       linear-gradient(135deg, #F9F6F5 0%, #B1A9FF 50%, #7B70F6 100%);
  --gradient-brand-soft:  linear-gradient(180deg, #F9F6F5 0%, #D4EBEE 100%);
  --gradient-hero:        radial-gradient(ellipse at 30% 20%, #B1A9FF 0%, #7B70F6 55%, #013f34 100%);

  /* ==== TYPE FAMILIES ==== */
  /* Display — Lexend Zetta (bold, all-caps, headlines/buttons/nav).
     Fallback stack uses Lexend Mega then system. */
  --font-display: 'Lexend Zetta', 'Lexend Mega', 'Helvetica Neue', Arial, sans-serif;
  /* Body — Unna (serif, elegant; use italic for call-outs & taglines) */
  --font-body:    'Unna', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* ==== TYPE SCALE ==== */
  --fs-display-xl: clamp(56px, 8vw, 128px);
  --fs-display:    clamp(40px, 5.5vw, 88px);
  --fs-h1:         clamp(36px, 4.5vw, 64px);
  --fs-h2:         clamp(28px, 3vw, 44px);
  --fs-h3:         20px;
  --fs-eyebrow:    13px;
  --fs-body-lg:    20px;
  --fs-body:       17px;
  --fs-body-sm:    15px;
  --fs-caption:    12px;

  /* line-heights */
  --lh-display:    0.92;
  --lh-heading:    1.04;
  --lh-body:       1.55;
  --lh-tight:      1.15;

  /* letter-spacing */
  --ls-display:    -0.01em;
  --ls-allcaps:    0.08em;
  --ls-eyebrow:    0.22em;
  --ls-button:     0.12em;

  /* ==== SPACING (4pt) ==== */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* ==== RADII ==== */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ==== SHADOWS (soft, earthy; no harsh edges) ==== */
  --shadow-sm: 0 1px 2px rgba(1, 32, 26, 0.06), 0 1px 3px rgba(1, 32, 26, 0.05);
  --shadow-md: 0 6px 18px rgba(1, 32, 26, 0.08), 0 2px 4px rgba(1, 32, 26, 0.04);
  --shadow-lg: 0 18px 40px rgba(1, 32, 26, 0.12), 0 4px 10px rgba(1, 32, 26, 0.06);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--color-purple) 45%, transparent);

  /* ==== MOTION ==== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ==== SEMANTIC ELEMENT STYLES ==== */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.display-xl, .display, h1, h2, h3, .eyebrow, .btn {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-allcaps);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--fg);
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.display    { font-size: var(--fs-display);    line-height: var(--lh-display); }
h1, .h1     { font-size: var(--fs-h1); }
h2, .h2     { font-size: var(--fs-h2); }
h3, .h3     { font-size: var(--fs-h3); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: 700;
  color: var(--color-primary);
}

p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }
.body-lg { font-size: var(--fs-body-lg); }
.body-sm { font-size: var(--fs-body-sm); }
.callout { font-family: var(--font-body); font-style: italic; font-size: var(--fs-body-lg); color: var(--color-primary); }

/* Button base */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  font-size: 14px;
  letter-spacing: var(--ls-button);
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); }