/**
 * Design tokens — "Terracotta Warmth"
 * Source of truth: design_handoff_gofitorganic/README.md → Design Tokens.
 * Everything else references these variables; do not hardcode hex/px elsewhere.
 */
:root {
  /* ---- Color ---- */
  --gfo-ink-deep: #2a1c15;   /* headers, dark bands, footers */
  --gfo-ink: #3a2820;        /* primary text, dark buttons */
  --gfo-ink-darkest: #1f140f;/* hub footer */
  --gfo-terracotta: #c0683c; /* primary CTAs, links, eyebrows */
  --gfo-clay-light: #e0a079; /* accent on dark surfaces */
  --gfo-sand: #f5ece0;       /* page background */
  --gfo-surface: #fffdf9;    /* cards, panels */
  --gfo-soft: #f6e6d9;       /* tints, highlight cells */
  --gfo-stripe-a: #eedcc8;   /* image placeholder */
  --gfo-stripe-b: #f6e8d8;   /* image placeholder */
  --gfo-success: #4f8a5b;    /* in-stock, savings, guarantee */
  --gfo-amber: #c98a2b;      /* ratings */

  /* text on light surfaces (Ink at opacity) */
  --gfo-text: rgba(58, 40, 32, .75);
  --gfo-text-muted: rgba(58, 40, 32, .6);
  --gfo-text-hint: rgba(58, 40, 32, .55);
  --gfo-text-faint: rgba(58, 40, 32, .45);
  /* text on dark (Ink Deep) surfaces */
  --gfo-on-dark: rgba(255, 255, 255, .82);
  --gfo-on-dark-muted: rgba(255, 255, 255, .74);
  --gfo-on-dark-faint: rgba(255, 255, 255, .6);

  /* ---- Typography ---- */
  --gfo-font-display: "Space Grotesk", system-ui, sans-serif; /* headings */
  --gfo-font-body: "Hanken Grotesk", system-ui, sans-serif;   /* body/UI */
  --gfo-font-editorial: "Spectral", Georgia, serif;           /* italic pull-quotes */
  --gfo-font-mono: "IBM Plex Mono", ui-monospace, monospace;  /* eyebrows, labels, prices-as-data */

  /* type scale (desktop) */
  --gfo-fs-display: 60px;
  --gfo-fs-h1: 44px;
  --gfo-fs-h2: 36px;
  --gfo-fs-h3: 22px;
  --gfo-fs-lead: 17px;
  --gfo-fs-body: 15px;
  --gfo-fs-ui: 14px;
  --gfo-fs-small: 12px;
  --gfo-fs-micro: 11px;
  --gfo-fs-mono: 11px;

  /* ---- Radius ---- */
  --gfo-radius-btn: 6px;
  --gfo-radius-card: 10px;
  --gfo-radius-feature: 15px;
  --gfo-radius-pill: 30px;

  /* ---- Shadow ---- */
  --gfo-shadow-card: 0 12px 30px rgba(42, 28, 21, .12);
  --gfo-shadow-popover: 0 16px 40px rgba(42, 28, 21, .28);
  --gfo-shadow-sticky: 0 -8px 30px rgba(31, 20, 15, .3);

  /* ---- Spacing ---- */
  --gfo-space-section: 64px;
  --gfo-space-block: 28px;
  --gfo-space-card-gap: 20px;
  --gfo-space-el: 12px;
  --gfo-space-tight: 7px;

  /* ---- Layout ---- */
  --gfo-maxw: 1200px;
  --gfo-gutter: 40px;
}

/* mobile scale + tighter rhythm (breakpoint: mobile <= 640) */
@media (max-width: 640px) {
  :root {
    --gfo-fs-display: 40px;
    --gfo-fs-h1: 30px;
    --gfo-fs-h2: 26px;
    --gfo-fs-h3: 20px;
    --gfo-space-section: 28px;
    --gfo-space-block: 22px;
    --gfo-gutter: 16px;
  }
}