/* ============================================================
   MOTION WHEEL — DESIGN TOKENS
   Modern cycling culture: editorial grotesk + workshop details.
   Colours derived from the Motion Wheel gear mark.
   ============================================================ */

:root {
  /* --- Core neutrals (the interface lives here) --- */
  --ink:            #0d0f0c;
  --ink-800:        #171a16;
  --ink-700:        #21251f;
  --ink-600:        #333a30;
  --grey-500:       #6b7367;
  --grey-400:       #8f978b;
  --grey-300:       #c3c8bf;
  /* The quieter half of a two-tone headline. --grey-300 is a border grey:
     on white it measures 1.7:1, which fails even the 3:1 that large text
     is allowed. This is the same idea one step down — still plainly the
     second voice, and legible at 3.1:1. */
  --head-quiet:     #8e948c;
  --grey-200:       #dfe0d8;
  --line:           #e2e2da;
  --line-dark:      rgba(245, 242, 234, .14);
  --paper:          #f5f2ea;   /* warm off-white */
  --paper-2:        #ece8dd;   /* deeper warm tone */
  --white:          #ffffff;

  /* --- Brand accents (sampled from the logo) --- */
  --purple:         #6b2e80;
  --purple-600:     #5a2670;
  --purple-deep:    #3d1a4c;
  --purple-soft:    #efe4f4;
  --purple-bright:  #c895de;   /* purple that holds up on ink and on purple-deep */
  --purple-ink:     #2a1135;   /* the darkest brand surface */
  --green:          #56a92f;
  --green-bright:   #8fd13f;
  --green-deep:     #2f6a1c;
  --green-soft:     #e8f3dd;
  --volt:           #ffc805;   /* the lightning bolt — tiny highlights only */

  /* The mark is half purple, half green. This is that split, as a paint. */
  --split:          linear-gradient(90deg, var(--purple) 0 50%, var(--green) 50% 100%);
  --split-soft:     linear-gradient(135deg, var(--purple-soft) 0 50%, var(--green-soft) 50% 100%);

  /* --- Semantic --- */
  --bg:             var(--paper);
  --fg:             var(--ink);
  --muted:          var(--grey-500);
  --accent:         var(--green);

  --ok:             #3f8f34;
  --warn:           #c98a10;
  --danger:         #b23c2e;
  --info:           #4a6fa5;

  /* --- Type ---
     Three voices, following the Lunar Rossa layout language:
       head     tall condensed caps, set tight, for display headings and numbers
       display  the UI voice: labels, card titles, buttons, table headers
       serif    one italic accent word per headline, nothing else            */
  --font-head:      'Anton', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-display:   'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:      'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:     'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-mono:      'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Display headline metrics — line box tighter than the cap height. */
  --head-ls:        -.01em;
  --head-lh:        .88;

  /* --- Space & shape --- */
  --gut:            clamp(20px, 4vw, 64px);
  /* The air above and below every band. 100px on a desktop, easing down
     to 64px on a phone, where 100px is a third of the screen. */
  --sec-y:          clamp(64px, 7.5vw, 100px);
  /* The usable column, everywhere. .wrap is width:100% with this as its
     ceiling, so on a phone it simply fills the screen inside the gutter and
     this number never comes into it. Sections that break out on purpose —
     the hero photograph, the shop carousel, the closing media strip — do it
     outside .wrap and are the stated exceptions. */
  --maxw:           1200px;
  --r-sm:           10px;
  --r-md:           14px;
  --r-lg:           22px;
  --r-xl:           34px;
  --r-block:        clamp(22px, 3vw, 40px);
  --r-pill:         100px;

  --shadow-sm:      0 1px 2px rgba(13,15,12,.05), 0 6px 18px rgba(13,15,12,.05);
  --shadow-md:      0 2px 6px rgba(13,15,12,.04), 0 18px 44px rgba(13,15,12,.10);
  --shadow-lg:      0 24px 60px rgba(13,15,12,.16);

  --ease:           cubic-bezier(.22,.61,.36,1);
  --ease-out:       cubic-bezier(.16,1,.3,1);
}