/* ============================================================
   TOKENS — universally-agreed brand palette across every locked
   page (mockup / signup / timeline / jobdone). Anything that
   varies per-page (animation timing) is overridden in the
   page's own <style> block, NOT here.
============================================================ */
:root {
  /* brand colors — semantic, locked */
  --purple: #7E5AF2;
  --purple-deep: #5B3BC4;
  --purple-dark: #2D1B69;
  --pink: #EC4899;
  --yellow: #FACC15;
  --peach: #FB923C;
  --lime: #84CC16;
  --sky: #0EA5E9;
  --cream: #FCFAF7;
  --cream-darker: #F5F1E8;
  --ink: #0A0A0A;

  /* extended palette (used by mockup-derived pages, kept here so
     they're available globally without each page redeclaring) */
  --green-bright: #66ff80;

  /* assets — paths relative to /pages/*.html */
  --poo: url('../assets/icons/poo.png');

  /* shared timing values that ARE consistent across pages */
  --fly-off-duration: 1.1s;

  /* shared spacing — gap between page content and the dark footer
     band. Matches the literal 96px used by brief.html / manifesto.html.
     Pages should prefer this token over a hardcoded number so any
     future global rhythm change happens in ONE place. */
  --page-footer-gap: 96px;

  /* shared spacing — vertical gap between the last content
     element of a page and the chunky cream/ink Back button at the
     bottom. The Back button needs room to breathe so it doesn't
     feel crammed against dense content above (tier cards, ref
     cards, form rows). One token, used by .page-back-wrap in
     base.css. Change here, every page updates. */
  --page-back-gap: 88px;
}