/* ==========================================================================
   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 {
  /* Portfolio blue and yellow, framed by ink and warm paper. */
  --paper:       #F3F1E9;
  --ink:         #121820;
  --cape:        #2459B5;
  --sage:        #F2D03A;
  --stone:       #535C68;
  --line:        rgba(18, 24, 32, 0.16);
  --on-cape:     #FFFFFF;
  --on-cape-line: rgba(255, 255, 255, 0.24);
  --focus:       var(--ink);

  /* ---- Type --------------------------------------------------------------
     One display face (Boska) + one text/UI face (Switzer). Nothing else. */
  --font-display: "Clash Display", "Arial Black", Arial, 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: clamp(5.5rem, 21vw, 18rem);
  --cta-mark-size: clamp(3.8rem, 8.5vw, 9rem);

  --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;
}