/* tokens.css — Fieldnote Supply Co.
 *
 * Design direction: warm mercantile / outfitter. Sand-and-ink neutrals, a deep
 * forest primary, clay for sale + emphasis. Characterful serif display against
 * a neutral system sans, so the page reads editorial rather than templated.
 *
 * NOTE: this rig's design direction was chosen directly rather than through the
 * style-options / style-preview gates in AGENTS.md, because there is no client
 * whose judgment those gates exist to capture. Any real client build runs both
 * gates from scratch. See 00-admin/CLIENT.md.
 */

:root {
  /* ---- Color ---- */
  --ink:        #1c1a16;   /* warm near-black, body copy + headings */
  --ink-soft:   #57534a;   /* secondary copy */
  --ink-faint:  #8a857a;   /* meta, captions, disabled */

  --paper:      #fdfcfa;   /* page background, warm white */
  --paper-alt:  #f5f1e9;   /* alternating band, cards on white */
  --sand:       #e9e2d4;   /* borders on warm ground, swatch fill */
  --line:       #e2ddd2;   /* hairlines */
  --line-soft:  #efebe2;

  --forest:     #2f4739;   /* primary brand + buttons */
  --forest-dk:  #223528;   /* hover */
  --forest-lt:  #4a6b57;
  --clay:       #b0522b;   /* sale, accents, emphasis */
  --clay-dk:    #8e401f;
  --gold:       #c9a227;   /* stars / small highlights */

  --ok:         #2f6b4f;
  --out:        #9a9489;   /* sold-out state */

  /* ---- Type ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.875rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.25rem;
  --fs-4xl:  4.25rem;

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.65;

  --track-wide: 0.14em;   /* eyebrows / labels */
  --track-tight: -0.02em; /* display headings */

  /* ---- Space ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* ---- Shape ---- */
  --radius-sm: 3px;
  --radius:    5px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --max-w:      1240px;
  --max-w-text: 68ch;

  --shadow-sm: 0 1px 2px rgba(28, 26, 22, 0.05);
  --shadow:    0 2px 4px rgba(28, 26, 22, 0.05), 0 12px 32px rgba(28, 26, 22, 0.07);
  --shadow-lg: 0 4px 8px rgba(28, 26, 22, 0.06), 0 24px 56px rgba(28, 26, 22, 0.11);

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);

  --header-h: 64px;
}