/* ==========================================================================
   tokens.css — the design brief, compiled.

   THIS FILE IS THE ONLY PLACE RAW VALUES LIVE.
   Every hex colour, font name, size literal and timing value on the site is
   declared here and consumed as var(--token) everywhere else. That contract
   (house-tech-spec §3) is what makes the tweaks bar work, keeps uniqueness in
   *values* while consistency lives in *structure*, and lets a purchased site
   be re-themed by editing one file.

   Builder: replace every value below with the approved brief's values, then
   delete the sentinel line marked DELETE-ME. Token NAMES are fixed by the
   spec; VALUES are per-brief. Add brief-specific tokens in the marked slots —
   never rename or remove a required token.

   ========================================================================== */

:root {

  /* --- Colour ------------------------------------------------------------
     Required roles (spec §3): bg, surface, ink, ink-muted, accent, accent-ink.
     Derivation order is design-rules §6: the business's real-world colours
     (dossier §4.5) → local character → family norms. Every text/bg pairing
     used on the site is listed with its contrast ratio in the brief and
     re-checked by scripts/qa/contrast.mjs.
     One deliberate mode per site — light OR dark, never both. */

  --scheme: light;                    /* light | dark — drives color-scheme */

  --color-bg: #f7f5f1;                /* page ground */
  --color-surface: #ffffff;           /* raised panels, cards, form fields */
  --color-ink: #1b1a17;               /* body + heading text on bg/surface */
  --color-ink-muted: #56534c;         /* secondary text — must still hit 4.5:1 */
  --color-accent: #2f5d50;            /* the one colour that means "act" */
  --color-accent-ink: #ffffff;        /* text that sits ON accent */

  /* House-required structural colours (consumed by base.css) */
  --color-border: #ddd8d0;            /* hairlines, field borders */
  --color-focus: #2f5d50;             /* :focus-visible ring — AA vs bg AND surface */
  --color-selection-bg: #2f5d50;
  --color-selection-ink: #ffffff;

  /* Brief-specific colours go here (e.g. --color-accent-warm, --color-band) */
  /* --color-…: …; */


  /* --- Typography --------------------------------------------------------
     Max 2 families, ≤ 4 woff2 files, latin subset, font-display: swap,
     primary preloaded (design-rules §5, spec §7). Hard-banned anywhere:
     Inter, Roboto, Open Sans, Lato. Watch-listed faces need written
     justification in the brief. Fallback stacks are deliberate: they are what
     renders during swap, so they should share the display face's proportions.

     Skeleton default is a system stack — it ships zero font files so the
     starter renders honestly with nothing loaded. The brief replaces both
     families with self-hosted, licensed woff2 (@font-face blocks go in the
     marked slot at the bottom of this file). */

  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 600;
  --font-weight-display: 700;

  /* --- Type scale --------------------------------------------------------
     Fluid via clamp(): min at 375px, max at ~1440px. The hero display size
     carries the sale — design-rules §5 says be generous, and the Critic
     compares it against the brief's cited reference entries at 375px. */

  --text-hero: clamp(2.6rem, 9vw, 5rem);
  --text-h2: clamp(1.9rem, 5vw, 3rem);
  --text-h3: clamp(1.3rem, 3vw, 1.75rem);
  --text-lead: clamp(1.125rem, 2.2vw, 1.375rem);
  --text-body: clamp(1rem, 1.4vw, 1.0625rem);
  --text-small: 0.9375rem;
  --text-eyebrow: 0.8125rem;

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;            /* eyebrows / small caps */

  /* --- Space -------------------------------------------------------------
     One scale, 3xs → 3xl. Section rhythm is a brief decision; the scale is
     house. Nothing on the site may use a spacing value that isn't here. */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* --- Layout ------------------------------------------------------------
     House-required: site.css may not contain size literals, so container
     widths, gutters and the reading measure are tokens too. */

  --layout-container: 72rem;          /* max content width */
  --layout-measure: 62ch;             /* max reading line length */
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;             /* WCAG touch target floor — spec §8 */

  /* --- Radius / shadow / border -----------------------------------------
     design-rules §4 bans uniform radius on everything and a drop shadow on
     every card. Multiple steps exist so the brief can be selective, not so
     everything gets rounded. --radius-none is a legitimate whole-site answer. */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(27 26 23 / 0.06);
  --shadow-md: 0 6px 24px rgb(27 26 23 / 0.09);
  --shadow-lg: 0 24px 60px rgb(27 26 23 / 0.14);

  --border-hairline: 1px;
  --border-thick: 3px;
  --border-style: solid;

  /* --- Motion ------------------------------------------------------------
     Reveals reference these. base.css collapses every duration to ~0 under
     prefers-reduced-motion: reduce — no exceptions, spec §8. */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Reveal geometry — the distance a revealing element travels, and the
     per-item delay inside a [data-reveal-group]. */
  --reveal-shift: 1.25rem;
  --reveal-stagger: 90ms;

  /* --- Z layers ----------------------------------------------------------- */
  --z-base: 0;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2 only, latin subset, font-display: swap.
   Licence for each face is recorded in the brief (design-rules §5). The
   skeleton ships none; the Builder adds the brief's faces here and adds the
   matching <link rel="preload"> for the PRIMARY face only.

   @font-face {
     font-family: 'Fraunces';
     src: url('../assets/fonts/fraunces-variable-latin.woff2') format('woff2');
     font-weight: 400 900;
     font-style: normal;
     font-display: swap;
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
   }

   SWAP COSTS CLS UNLESS YOU PAY FOR IT. The spec requires font-display: swap
   AND CLS ≈ 0 (§7), and those two fight each other: when the real face lands
   it replaces the fallback, and if their metrics differ every line below
   reflows. Measured on the house skeleton, one unmatched display face is
   worth roughly 0.13 CLS on its own — enough to fail the budget by itself.

   The fix is a metrics-matched fallback face, declared BEFORE the real one
   and named in the token's stack in its place:

   @font-face {
     font-family: 'Fraunces Fallback';
     src: local('Georgia');
     size-adjust: 104%;         <- measure these against the real face;
     ascent-override: 92%;         Chrome DevTools shows both sets of metrics
     descent-override: 24%;
     line-gap-override: 0%;
   }
   --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;

   Verify with `node scripts/qa/lighthouse.mjs --site sites/{business_id}`:
   CLS should read 0.000, not "small enough".
   -------------------------------------------------------------------------- */