/* ==========================================================================
   tokens.css — the whole design vocabulary in one place.
   Plain CSS custom properties. No framework, no build step, no npm.
   Change these to re-skin a shop; leave the structure alone.
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------------
     Warm paper, near-black ink with a green cast, the cape green, sage.
     Max 2 colours visible per screen plus photos. No gradients, ever. */
  --paper:       #F4F3EC;
  --ink:         #1B1D1B;
  --cape:        #315B46;
  --sage:        #C4D0C4;
  --stone:       #626760;
  --line:        rgba(27, 29, 27, 0.16);
  --on-cape:     #F4F3EC;
  --on-cape-line: rgba(244, 243, 236, 0.25);
  --focus:       #315B46;

  /* ---- Type --------------------------------------------------------------
     One display face (Boska) + one text/UI face (Switzer). Nothing else. */
  --font-display: "Cabinet Grotesk", "Arial Narrow", Helvetica, sans-serif;
  --font-text: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem); /* labels, captions */
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem); /* body */
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.50rem); /* lead text */
  --step-2:  clamp(1.75rem, 1.50rem + 1.10vw, 2.50rem); /* section titles, menu */
  --step-3:  clamp(2.50rem, 1.90rem + 2.80vw, 4.50rem); /* big statements, titles */
  --step-4:  clamp(3.25rem, 2.20rem + 6.50vw, 8.50rem); /* legacy display step */

  /* Display marks: sized from the viewport, no artificial cap. */
  --statement-size: clamp(2.6rem, 1.6rem + 4.5vw, 5.5rem);
  --hero-mark-size: 19vw;
  --cta-mark-size: 12vw;

  --tracking-label:   0.14em;
  --tracking-display: -0.02em;
  --lh-body:    1.55;
  --lh-display: 0.98;
  --measure:    62ch;

  /* ---- Space (4px base) --------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  --gutter:    clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 10vw, 160px);
  --wrap:      1440px;

  /* ---- Shape --------------------------------------------------------------
     Square, editorial. Radius 0 for photos and buttons. No pills. */
  --radius: 0;

  /* ---- Motion (subtle or nothing) ---------------------------------------- */
  --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-dur: 600ms;
  --ui-dur:     200ms;

  /* ---- Header ------------------------------------------------------------- */
  --header-h: 72px;
}