/* ROAM — design tokens.
   One accent travels with the visitor: --accent is rewritten by route.js as the
   car reaches each stop, so markers, road highlight, buttons and labels all
   shift together instead of every section carrying its own palette. */

:root {
  /* --- palette ------------------------------------------------------- */
  --ocean:        #19b8d8;
  --deep:         #075b78;
  --sky:          #cdefff;
  --sand:         #f3e2c4;
  --offwhite:     #faf8f2;
  --sun:          #ffc83d;
  --coral:        #ff725e;
  --cactus:       #6f9d62;
  --ink:          #152026;

  --ink-70:       rgba(21, 32, 38, .70);
  --ink-52:       rgba(21, 32, 38, .52);
  --ink-14:       rgba(21, 32, 38, .14);
  --ink-08:       rgba(21, 32, 38, .08);
  --paper:        var(--offwhite);

  /* the travelling accent — see route.js */
  --accent:       var(--ocean);
  --accent-ink:   #08313f;

  /* --- road ------------------------------------------------------------
     Dark asphalt on a bright island. A sand-coloured road would vanish into
     the paper; this one reads as a road from the first glance, keeps the sun
     yellow centre line legible, and lets the travelled section in --accent
     carry the progress. */
  --road-w:       24px;
  --road-bed:     #16323d;
  --road-line:    var(--sun);
  --road-done:    var(--accent);

  /* --- type ---------------------------------------------------------- */
  --display: 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --body:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* fluid display sizes — the landmark words are meant to crowd the viewport */
  --t-mega:  clamp(3.2rem, 11.5vw, 9.5rem);
  --t-xl:    clamp(2.5rem, 7.4vw, 6rem);
  --t-lg:    clamp(1.9rem, 4.4vw, 3.4rem);
  --t-md:    clamp(1.3rem, 2.3vw, 1.85rem);
  --t-body:  clamp(1rem, 1.15vw, 1.14rem);
  --t-small: .82rem;
  --t-micro: .69rem;

  /* --- rhythm -------------------------------------------------------- */
  --gut:     clamp(1.15rem, 4.6vw, 4.5rem);
  --chapter: clamp(5.5rem, 13vh, 10.5rem);
  --maxw:    1560px;

  /* --- motion -------------------------------------------------------- */
  --ease-drive:  cubic-bezier(.22, .61, .36, 1);      /* accelerate away */
  --ease-brake:  cubic-bezier(.16, .84, .28, 1);      /* arrive and settle */
  --ease-turn:   cubic-bezier(.65, .02, .2, 1);       /* the 180° swing */
  --turn-ms:     420ms;

  --shadow-card: 0 26px 60px -34px rgba(7, 91, 120, .55);
  --shadow-lift: 0 40px 90px -46px rgba(7, 91, 120, .68);
}

/* route accents — swapped in by the branch selector and by each stop */
[data-accent='ocean']  { --accent: #19b8d8; --accent-ink: #08313f; }
[data-accent='sun']    { --accent: #ffc83d; --accent-ink: #4a3506; }
[data-accent='coral']  { --accent: #ff725e; --accent-ink: #521408; }
[data-accent='cactus'] { --accent: #6f9d62; --accent-ink: #1f2f19; }
[data-accent='deep']   { --accent: #075b78; --accent-ink: #02222e; }