/* =============================================================
   Feelin' Good Wellness — Core Tokens
   Colors + Type foundations. Import this file into every artifact.
   ============================================================= */

/* ---------- FONTS ---------- */

/* Playfair Display — editorial serif for display + body prose */
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Garet — soft geometric sans for display product names, labels */
@font-face {
  font-family: "Garet";
  src: url("fonts/Garet-Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garet";
  src: url("fonts/Garet-Heavy.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Didact Gothic — humanist UI sans for labels, captions, meta */
@font-face {
  font-family: "Didact Gothic";
  src: url("fonts/DidactGothic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   COLOR TOKENS
   Palette is deliberately tight: ivory/white, forest, sage-mist,
   sage-green, and near-black.  No gradients by default.
   ============================================================ */
:root {
  /* ---- Base palette ---- */
  --fgw-white:        #ffffff;
  --fgw-black:        #000000;
  --fgw-forest:       #1c2e2a;   /* deep forest green — primary dark */
  --fgw-sage:         #90a67b;   /* sage green — primary accent */
  --fgw-sage-mist:    #e3ede6;   /* soft sage — surface / background */

  /* ---- Extended tints (derived for UI depth) ---- */
  --fgw-forest-90:    #2a3d38;   /* slightly lifted forest */
  --fgw-forest-60:    #4a5d57;
  --fgw-sage-120:     #7c9268;   /* deeper sage for hover */
  --fgw-sage-40:      #c6d3b6;   /* quiet sage for borders */
  --fgw-ivory:        #f6f5ef;   /* warm off-white for large surfaces */
  --fgw-bone:         #efece3;   /* earthier bone for card backgrounds */
  --fgw-ink:          #131a18;   /* near-black with a green whisper */
  --fgw-ink-70:       #3c4643;
  --fgw-ink-50:       #6a7370;
  --fgw-ink-30:       #a7adab;
  --fgw-hairline:     #d9dcd4;   /* 1px rule color on light surfaces */

  /* ---- Semantic surface + text ---- */
  --bg:               var(--fgw-white);
  --bg-soft:          var(--fgw-sage-mist);
  --bg-ivory:         var(--fgw-ivory);
  --bg-dark:          var(--fgw-forest);
  --bg-ink:           var(--fgw-ink);

  --fg:               var(--fgw-ink);       /* primary text on light */
  --fg-muted:         var(--fgw-ink-70);    /* secondary text */
  --fg-soft:          var(--fgw-ink-50);    /* meta / caption */
  --fg-on-dark:       var(--fgw-sage-mist); /* primary text on forest */
  --fg-on-dark-muted: var(--fgw-sage);

  --accent:           var(--fgw-sage);
  --accent-hover:     var(--fgw-sage-120);
  --accent-quiet:     var(--fgw-sage-mist);

  --border:           var(--fgw-hairline);
  --border-sage:      var(--fgw-sage-40);
  --border-on-dark:   rgba(227, 237, 230, 0.18);

  /* ---- Status (used sparingly; clinical, not loud) ---- */
  --ok:               #6a8f5b;
  --warn:             #b99653;
  --err:              #a05a4c;

  /* ============================================================
     TYPE SCALE
     Two families carry the system:
       - Playfair Display: editorial/body prose ("Your cells run on NAD+.")
       - Garet (Book/Heavy): product names + confident headlines
     Didact Gothic is reserved for UI chrome labels.
     ============================================================ */
  --font-serif:   "Playfair Display", "EB Garamond", Georgia, serif;
  --font-display: "Garet", "Didact Gothic", ui-sans-serif, system-ui, sans-serif;
  --font-ui:      "Didact Gothic", "Garet", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale — generous, editorial. */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  120px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-prose:   1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.16em;   /* eyebrow labels: "WEIGHT LOSS" */
  --tracking-widest:  0.24em;

  /* ---- Spacing / radii / shadow (intentionally restrained) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;     /* default card radius — soft, not bubbly */
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(28, 46, 42, 0.06);
  --shadow-sm: 0 2px 8px rgba(28, 46, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 46, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(28, 46, 42, 0.12);

  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these in markup instead of re-declaring sizes.
   ============================================================ */

.fgw-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}

.fgw-display {           /* giant hero words, Garet Heavy */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.fgw-display-serif {     /* editorial hero, Playfair */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.fgw-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.fgw-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.fgw-h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.fgw-h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.fgw-lede {              /* intro paragraph, Playfair regular */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
  color: var(--fg);
}

.fgw-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-prose);
  color: var(--fg);
}

.fgw-ui {                /* buttons / labels / navigation */
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--fg);
}

.fgw-meta {              /* captions, @feelingoodwellness handle */
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--accent);
  letter-spacing: 0.02em;
}

.fgw-caption {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}

.fgw-kicker {            /* closing statement: "Recharge at the cellular level." */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
  color: var(--fg);
}

.fgw-prose-list {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.9;
  color: var(--accent);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Utility surfaces */
.fgw-surface-light   { background: var(--fgw-white);     color: var(--fg); }
.fgw-surface-mist    { background: var(--fgw-sage-mist); color: var(--fg); }
.fgw-surface-ivory   { background: var(--fgw-ivory);     color: var(--fg); }
.fgw-surface-forest  { background: var(--fgw-forest);    color: var(--fg-on-dark); }
.fgw-surface-ink     { background: var(--fgw-ink);       color: var(--fg-on-dark); }