/* ─────────────────────────────────────────────────────────────
   CADENCE ROOM — brand tokens
   Reformer pilates. Eight machines, Fitzroy North.

   Everything brand-critical lives in this one :root block.
   Loaded BEFORE the inline <style> in index.html, so the page
   consumes these via var(). Edit here to rebrand.
   ───────────────────────────────────────────────────────────── */
:root{

  /* ── Ground & surfaces ──────────────────────────────────────
     Light register. Warm off-white, never pure #FFF.            */
  --ground:#F4F1EC;        /* page background                    */
  --card:#FBF9F6;          /* raised surfaces: cards, panels     */
  --card-2:#EDE9E2;        /* second surface: hover, table zebra */

  /* ── Type colours ──────────────────────────────────────────
     --muted is AA-lifted per R1: #63675F on #F4F1EC = 5.13:1.
     Never lighten the label grey past this on the light ground. */
  --ink:#2A2E29;           /* primary type                       */
  --muted:#63675F;         /* secondary type, mono labels        */

  /* ── The accent ────────────────────────────────────────────
     One accent. CTAs, key numerals, chips, hover. The vivid sage
     is for large fills only; --sage-ink is the AA-safe shade for
     small text on the light ground.                             */
  --sage:#8A9A7B;          /* accent fills, chips, large numerals */
  --sage-ink:#5A6A4C;      /* accent SMALL TEXT — AA on ground    */
  --sage-deep:#43503A;     /* solid-CTA ground, dark band         */

  /* ── Rules ─────────────────────────────────────────────────── */
  --rule:rgba(42,46,41,.14);   /* hairline on ground              */
  --rule-2:rgba(42,46,41,.08); /* quieter hairline inside cards   */

  /* ── Type families ─────────────────────────────────────────── */
  --display:'Familjen Grotesk',system-ui,sans-serif; /* headings  */
  --sans:'Manrope',system-ui,sans-serif;             /* body + UI */
  --mono:'Fragment Mono',ui-monospace,monospace;     /* labels    */

  /* ── Radius ────────────────────────────────────────────────
     System (b): 16px on media and cards, 999px on chips only.
     Nothing in between — a 4px is the cheap-template tell.       */
  --radius:16px;
  --radius-pill:999px;

  /* ── Layout ────────────────────────────────────────────────── */
  --wrap:1140px;                        /* max content width      */
  --pad:clamp(20px,5vw,56px);           /* stepped page gutter    */
  --section:clamp(3.5rem,7vw,6.5rem);   /* section rhythm         */

  /* ── Motion ────────────────────────────────────────────────
     One easing curve everywhere. Never `ease`.                   */
  --ease:cubic-bezier(.16,1,.3,1);
}