/* =============================================================
   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;
}

/* Raleway — humanist geometric sans, full weight range via variable axis.
   Replaces Didact Gothic + Garet across the system: used for display headlines
   (heavy weights), product names, labels, eyebrows, and UI chrome. */
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-Variable.ttf") format("truetype-variations"),
       url("fonts/Raleway-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  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:         #1c2e2a;   /* accent collapses to forest — monochrome */
  --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:     #2a3d38;   /* lifted forest for hover */
  --fgw-sage-40:      #d4dad5;   /* quiet neutral border */
  --fgw-ivory:        #e5e5e5;   /* neutral gray surface */
  --fgw-bone:         #e5e5e5;   /* neutral gray card background */
  --fgw-ink:          #1c2e2a;   /* forest as primary text */
  --fgw-ink-70:       #45524e;
  --fgw-ink-50:       #6f7a76;
  --fgw-ink-30:       #a7adab;
  --fgw-hairline:     #d8dad6;   /* 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: rgba(227, 237, 230, 0.6);

  --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+.")
       - Raleway (300–900): product names, headlines, labels, UI chrome.
     ============================================================ */
  --font-serif:   "Playfair Display", "EB Garamond", Georgia, serif;
  --font-display: "Raleway", ui-sans-serif, system-ui, sans-serif;
  --font-ui:      "Raleway", 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;  /* @kind other */
  --lh-snug:    1.2;   /* @kind other */
  --lh-normal:  1.5;   /* @kind other */
  --lh-prose:   1.65;  /* @kind other */

  --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);  /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --dur-fast:    150ms;  /* @kind other */
  --dur-base:    240ms;  /* @kind other */
  --dur-slow:    420ms;  /* @kind other */
}

/* ============================================================
   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, Raleway 800 */
  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); }