/* =====================================================================
   BrightValley Link — base.css  (tokens, reset, signage typography)
   Australian Cycling, Active Mobility & Connected Transport
   ===================================================================== */

:root {
  --red: #FF3B30;
  --red-deep: #D7281E;
  --yellow: #F7B500;
  --yellow-deep: #D89A00;
  --graphite: #2B2F36;
  --concrete: #C9CED6;
  --white: #FFFFFF;
  --asphalt: #16181D;
  --steel: #5C9CE0;
  --steel-deep: #2F6FB5;
  --paper: #F3F5F8;
  --ink: #1B1E24;

  --muted: #626974;
  --line: rgba(27,30,36,.12);
  --line-strong: rgba(27,30,36,.26);
  --line-dim: rgba(255,255,255,.14);

  --g-motion: linear-gradient(100deg, #FF3B30, #F7B500);
  --g-speed: linear-gradient(120deg, #2F6FB5, #FF3B30);
  --g-night: linear-gradient(165deg, #20242B, #16181D);
  --g-signal: linear-gradient(120deg, #5C9CE0, #F7B500);

  --ff-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;

  --maxw: 1280px;
  --wide: 1460px;
  --gutter: clamp(20px, 4vw, 48px);

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  --sh-1: 0 14px 36px -22px rgba(20,24,30,.42);
  --sh-2: 0 34px 74px -36px rgba(20,24,30,.55);
  --sh-red: 0 18px 44px -20px rgba(255,59,48,.5);
  --ring: 0 0 0 3px rgba(92,156,224,.55);

  --ease: cubic-bezier(.2,.8,.2,1);
  --t: 420ms var(--ease);
  --t-fast: 200ms var(--ease);
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  font-size: 17px; line-height: 1.68; color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,picture,video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul,ol { list-style: none; padding: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
::selection { background: var(--yellow); color: var(--asphalt); }

/* ---------- typography ---------- */
h1,h2,h3,h4,h5 { font-family: var(--ff-display); font-weight: 700; line-height: 1.02; color: var(--ink); letter-spacing: -.02em; }
h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h4 { font-size: 1.16rem; font-weight: 600; }
p { color: var(--muted); }
.lead { font-size: clamp(1.12rem, 1.8vw, 1.4rem); color: #3a4049; line-height: 1.55; }
strong { color: var(--ink); font-weight: 600; }

/* ---------- signage labels (transit style) ---------- */
.sign { display:inline-flex; align-items:center; gap:.55em; font-family: var(--ff-display); font-weight:600; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color: var(--steel-deep); }
.sign::before { content:""; width:18px; height:10px; border-radius:2px; background: var(--g-motion); }
.sign--plain::before { display:none; }
.sign--red { color: var(--red); } .sign--yellow { color: var(--yellow-deep); }
.code { font-family: var(--ff-display); font-weight:700; letter-spacing:.06em; }
.data { font-family: var(--ff-display); font-variant-numeric: tabular-nums; font-weight:600; }

/* ---------- colour helpers ---------- */
.on-dark { color: var(--paper); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4 { color: var(--white); }
.on-dark p { color: rgba(243,245,248,.74); }
.on-dark .lead { color: rgba(243,245,248,.9); }
.on-dark .sign { color: var(--steel); }
.t-red { color: var(--red); } .t-yellow { color: var(--yellow-deep); } .t-steel { color: var(--steel-deep); }
.grad-motion { background: var(--g-motion); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-speed { background: var(--g-speed); -webkit-background-clip:text; background-clip:text; color:transparent; }
.balance { text-wrap: balance; }
.muted { color: var(--muted); }

/* ---------- skip + reading progress ---------- */
.skip { position:absolute; left:-999px; top:0; background: var(--asphalt); color:#fff; padding:.7em 1.1em; z-index:400; }
.skip:focus { left:0; }
.progress { position:fixed; top:0; left:0; height:4px; width:0; background: var(--g-motion); z-index:300; transition: width 80ms linear; }

@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }