/*
  tokens.css — Fotospots Fieldbook design tokens.

  Every color, type family, radius, hairline, and layout constant the shipped pages
  reference lives here. style.css consumes these via var(--...) and never inlines
  a hex or a font-family. Values are lifted verbatim from the Fieldbook design brief
  under docs/design/fieldbook-redesign-2026-08-28/ and are binding — see
  docs/guide/terminology.md for the vocabulary they support (eyebrow, spread, frame).
*/

:root {
  /* ---------- Grounds ---------- */
  /* Cream page ground and the sole brand-moment ground (iPad section). */
  --fs-ground: #F6F2EA;
  --fs-ground-brand: #4F489B;

  /* ---------- Text on cream ---------- */
  --fs-ink: #2A2620;
  --fs-body: #6B655C;
  --fs-muted: #96908A;
  --fs-hairline: #DCD5C7;

  /* ---------- Text on brand purple ---------- */
  --fs-bright-on-brand: #F6F2EA;
  --fs-muted-on-brand: #BEB9E0;
  --fs-hairline-on-brand: #3D3878;

  /* ---------- Interactive ---------- */
  --fs-interactive: #4F489B;
  --fs-interactive-hover: #5E55B5;
  --fs-link-hover: #665DBE;

  /* ---------- Mugo works mark on cream ---------- */
  --fs-mark-ink-on-light: #1E4D30;

  /* ---------- Type ---------- */
  --fs-font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-font-mono: "Space Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* ---------- Radii ----------
     The iphone/ipad wrap radii shape the CSS `outline` that wraps each
     screenshot slot (.fs-shot-*). The matching inner radii used to shape a
     CSS-drawn screen mask are now baked directly into the WebP assets, so
     no CSS consumer of --fs-radius-*-inner remains. */
  --fs-radius-btn: 6px;
  --fs-radius-icon: 8px;
  --fs-radius-iphone-wrap: 46px;
  --fs-radius-iphone-sm-wrap: 36px;
  --fs-radius-ipad-wrap: 34px;

  /* ---------- Layout ---------- */
  --fs-content-max: 1200px;
  --fs-side-padding: 64px;
  /* Narrow column: inner pages (privacy policy, 404) that read as a single document rather
     than a full-bleed marketing screen. Side padding steps down at the same breakpoints as
     --fs-side-padding, see style.css. */
  --fs-content-max-narrow: 900px;
  --fs-side-padding-narrow: 48px;
  --fs-hairline-weight: 1px;
  --fs-keyline-weight: 1.5px;

  /* ---------- Motion (durations only; the reduced-motion override lives in style.css) ---------- */
  --fs-transition-fast: 120ms ease;
}