/* Purpose: The single source of truth for all design tokens (Wellness Vibe).
   Brand palette: cream / sand / emerald / gold. Tokens derived from the approved
   reference design (WV_Homepage.html). NEVER hardcode a value outside :root — always
   reference a variable. Swap these tokens to re-theme the entire site. */

:root {
  /* ── Brand raw ── */
  --cream:    #F5EFE0;
  --sand:     #FFFFFF;   /* page background — pure white per client direction */
  --emerald:  #376054;
  --gold:     #F5EFE0;

  /* ── Surfaces · white page + emerald alternates (ABAB rhythm) ── */
  --bg-deep:   #FFFFFF;
  --bg-line:   #FFFFFF;
  --bg-card:   #FFFFFF;
  --bg-dark:   var(--emerald);
  --bg-dark-2: #2E5149;

  /* ── Accent ── */
  --accent:    var(--gold);
  --accent-hi: #C9B19D;
  --support:   var(--emerald);
  --accent-fg: var(--support);
  --serif-em-color: var(--emerald);

  /* ── Ink (text on light) ── */
  --ink:       #1A1F1C;
  --ink-72:    rgba(26, 31, 28, 0.78);
  --ink-56:    rgba(26, 31, 28, 0.56);
  --ink-32:    rgba(26, 31, 28, 0.32);
  --ink-14:    rgba(26, 31, 28, 0.14);
  --ink-08:    rgba(26, 31, 28, 0.08);
  --ink-04:    rgba(26, 31, 28, 0.04);
  --muted:     #6B6859;
  --border:    var(--ink-14);

  /* ── Gold alphas ── */
  --gold-40: rgba(245, 239, 224, 0.40);
  --gold-30: rgba(245, 239, 224, 0.30);
  --gold-20: rgba(245, 239, 224, 0.20);
  --gold-12: rgba(245, 239, 224, 0.12);
  --gold-06: rgba(245, 239, 224, 0.06);

  /* ── Emerald alphas ── */
  --em-30: rgba(55, 96, 84, 0.30);
  --em-14: rgba(55, 96, 84, 0.14);
  --em-08: rgba(55, 96, 84, 0.08);

  /* ── Typography ── */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale — clamp-based, 4-px law, min 12px (RULEBOOK §0/§4) */
  --page-hero-h1: clamp(44px, 8vw, 96px);   /* hero banner heading → 96px desktop */
  --sec-h2:       clamp(32px, 5vw, 64px);    /* every section heading → 64px desktop */
  --sec-h3:       clamp(22px, 2.4vw, 30px);
  --text-body:    16px;
  --text-sm:      12px;   /* floor — eyebrows, labels, fine print */

  --leading-tight:  1.0;
  --leading-snug:   1.1;
  --leading-h3:     1.2;
  --leading-body:   1.7;
  --tracking-tight: -0.03em;
  --tracking-h2:    -0.025em;
  --tracking-eyebrow: 0.32em;
  --tracking-label:   0.22em;
  --tracking-btn:     0.22em;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  /* ── Spacing (4-px law) ── */
  --space-section-y:    80px;   /* desktop section top/bottom */
  --space-section-y-sm: 56px;   /* mobile section top/bottom */
  --space-section-x:    5vw;    /* horizontal — fluid */
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;
  --gap-xl: 64px;

  /* ── Layout ── */
  --max-content: 1280px;
  --max-wide:    1400px;
  --max-narrow:  880px;
  --nav-height:  72px;        /* fixed forever — never change per page */

  /* ── Breakpoints (mobile-first · min-width) ──
     CSS vars can't be used inside @media — these tokens are the single source of
     truth for documentation + JS matchMedia. Media queries use the literal px below.
       xs  : 0      → Mobile (small)     · base styles, no query
       sm  : 480px  → Mobile (large)
       md  : 768px  → iPad / Tablet (portrait)
       lg  : 1024px → Small desktop / iPad landscape
       xl  : 1280px → Desktop
       2xl : 1440px → Large desktop
       3xl : 1920px → Extra-large desktop / 4K
     Authoring rule: write base = mobile, then add min-width overrides upward. */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
  --bp-3xl: 1920px;

  /* ── Borders (sharp by default) ── */
  --radius-none: 0;
  --radius-full: 9999px;
  --border-hair: 1px solid var(--border);

  /* ── Motion (only 3 durations · RULEBOOK §11.2) ── */
  --dur-snap:    150ms;
  --dur-default: 300ms;
  --dur-lux:     600ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Z-index scale (no raw integers · RULEBOOK §11.3) ── */
  --z-base:    1;
  --z-content: 10;
  --z-overlay: 100;
  --z-nav:     1000;
  --z-modal:   10000;
  --z-cursor:  100000;
}

/* Dark section override — cream text on emerald bg.
   Add .is-dark (or .bg-dark / .bg-dark-2) to any section to flip the ink scale. */
.bg-dark, .bg-dark-2, .is-dark {
  --ink:       #F5EFE0;
  --ink-72:    rgba(245, 239, 224, 0.78);
  --ink-56:    rgba(245, 239, 224, 0.56);
  --ink-32:    rgba(245, 239, 224, 0.32);
  --ink-14:    rgba(245, 239, 224, 0.14);
  --ink-08:    rgba(245, 239, 224, 0.08);
  --ink-04:    rgba(245, 239, 224, 0.04);
  --muted:     rgba(245, 239, 224, 0.56);
  --border:    rgba(245, 239, 224, 0.14);
  --accent-fg: var(--accent);
  --serif-em-color: var(--accent);
}