/* =========================================================================
   The Planters' Guild — Brand Tokens
   Source of truth for color, typography, and layout values across the site.
   Mirrors Brand Book v2 (D:\Claude\TPG-brand\brand-book\index-v2.html).
   Every component CSS file MUST reference var(--token-name) — never raw hex.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     Field Library palette — Brand Book v2 §3.1
     ----------------------------------------------------------------------- */
  --kraft:        #E8DDC8;  /* paper / specimen-tray background */
  --cream:        #F4EEDE;  /* default page background */
  --walnut:       #2A211B;  /* primary text + brand "ink" */
  --aged-ink:     #5C4F40;  /* secondary text + muted UI */
  --forest-pine:  #294638;  /* accent · editorial-link underline */
  --terracotta:   #C97557;  /* accent · affiliate-link underline · WARNING: fails contrast as body text on cream — use for non-text or strong-weight only */

  /* -----------------------------------------------------------------------
     Derived semantic tokens — what templates should actually reference
     ----------------------------------------------------------------------- */
  --color-text:           var(--walnut);
  --color-text-muted:     var(--aged-ink);
  --color-bg:             var(--cream);
  --color-bg-alt:         var(--kraft);
  --color-accent:         var(--forest-pine);
  --color-accent-warm:    var(--terracotta);
  --color-rule:           rgba(42, 33, 27, 0.12); /* hairline dividers */

  /* -----------------------------------------------------------------------
     Typography — Brand Book v2 §4
     ----------------------------------------------------------------------- */
  --font-serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --font-weight-serif-heading: 600;
  --font-weight-serif-body:    400;
  --font-weight-sans-default:  400;
  --font-weight-sans-emphasis: 600;

  /* Modular type scale — 1.250 (major third) */
  --font-size-base:   1rem;     /* 16px body */
  --font-size-sm:     0.875rem; /* 14px caption / meta */
  --font-size-xs:     0.75rem;  /* 12px micro UI */
  --font-size-lg:     1.125rem; /* 18px lede */
  --font-size-xl:     1.5rem;   /* 24px h3 */
  --font-size-2xl:    1.875rem; /* 30px h2 */
  --font-size-3xl:    2.625rem; /* 42px h1 */
  --font-size-4xl:    3.75rem;  /* 60px hero display */

  --line-height-tight:   1.15;
  --line-height-default: 1.55;
  --line-height-loose:   1.7;

  /* -----------------------------------------------------------------------
     Spacing — 8px base rhythm
     ----------------------------------------------------------------------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */

  /* -----------------------------------------------------------------------
     Layout — max widths + breakpoints
     ----------------------------------------------------------------------- */
  --content-width:        72ch;    /* editorial article body */
  --content-width-wide:   88ch;    /* heroes + figures */
  --container-width:      1180px;  /* hub grids + page chrome */
  --gutter:               var(--space-5);

  /* -----------------------------------------------------------------------
     Misc UI
     ----------------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --shadow-card: 0 1px 2px rgba(42, 33, 27, 0.06), 0 8px 24px rgba(42, 33, 27, 0.04);

  --transition-fast: 120ms ease-out;
  --transition-default: 200ms ease-out;
}

/* -----------------------------------------------------------------------
   Minimal base resets so tokens behave consistently when included.
   Full base styles (typography defaults, link color, etc.) live in
   assets/css/base.css — kept separate so tokens.css stays pure values.
   ----------------------------------------------------------------------- */