/* ──────────────────────────────────────────────────────────────────
   Waygo design tokens — colors, type, spacing, radii, shadows
   ────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Montserrat+Alternates:wght@500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Lato:wght@400;700&display=swap");

:root {
  /* ── Color: surfaces ─────────────────────────────────────────── */
  --bg-cream:        #FFF5E1;   /* app body */
  --bg-cream-soft:   #FFF9E8;   /* subtle alt */
  --ink-charcoal:    #141311;   /* auth panel, deep surface */
  --ink-charcoal-2:  #1E1E1E;   /* dark text */
  --surface-white:   #FFFFFF;   /* bottom nav, cards on dark */
  --surface-grey:    #F3F4F5;   /* search bg, settings tile */
  --divider:         #E2E2E2;   /* hairline */
  --grey-disabled:   #929393;   /* muted icon, disabled tile fg */
  --grey-tile:       #D9D9D9;   /* placeholder tile */

  /* ── Color: brand orange ─────────────────────────────────────── */
  --orange-deep:     #E15007;   /* primary text accent, active tab */
  --orange-primary:  #FF4B00;   /* primary CTA, live dot */
  --orange-warm:     #FF822C;   /* soft pills, route band */
  --orange-sand:     #F87E2B;   /* login button, lighter accents */
  --orange-warm-67:  rgba(255,130,44,0.67);
  --orange-overlay:  rgba(255,75,0,0.74);
  --orange-overlay-0:rgba(255,75,0,0.08);

  /* ── Color: ink ─────────────────────────────────────────────── */
  --ink-body:        #2E2C2C;
  --ink-muted:       #606060;
  --ink-stroke:      #5A5A60;
  --ink-faint:       #999999;
  --ink-on-orange:   #FFFFFF;

  /* ── Color: accents ──────────────────────────────────────────── */
  --yellow-sand:     #F5C451;   /* purchase chip on ticket */
  --status-on-time:  #417461;   /* green from metadata (rgb 65,116,97) */
  --status-delayed:  #E15007;
  --status-live:     #FF4B00;

  /* ── Shadow ──────────────────────────────────────────────────── */
  --shadow-card:     0 4px 12px rgba(0,0,0,0.08);
  --shadow-cta:      0 8px 24px rgba(248,126,43,0.45);
  --shadow-pop:      0 12px 36px rgba(0,0,0,0.18);
  --shadow-25:       rgba(0,0,0,0.25);

  /* ── Radii ───────────────────────────────────────────────────── */
  --r-pill:          999px;
  --r-screen:        30px;
  --r-modal:         30px;
  --r-card-lg:       26px;
  --r-card:          16px;
  --r-card-sm:       12px;
  --r-tile:          5px;
  --r-chip:          3px;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --gutter:   20px;

  /* ── Type families ───────────────────────────────────────────── */
  --font-sans:       "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt:        "Montserrat Alternates", "Montserrat", system-ui, sans-serif;
  --font-display:    "Poppins", "Montserrat", system-ui, sans-serif;
  --font-utility:    "Inter", "Montserrat", system-ui, sans-serif;
  --font-legal:      "Lato", "Inter", system-ui, sans-serif;

  /* ── Semantic type tokens (mobile-first scale) ───────────────── */
  --t-display:       700 32px/1   var(--font-display);
  --t-h1:            700 24px/1.15 var(--font-sans);
  --t-h2:            700 16px/1.18 var(--font-sans);
  --t-h-section:     700 13.5px/1.4 var(--font-sans);     /* "Purchase Passes" */
  --t-greeting:      500 15.25px/1 var(--font-sans);
  --t-body:          500 11.86px/1.4 var(--font-sans);
  --t-body-bold:     700 12px/1.4 var(--font-sans);
  --t-tab-active:    700 9.76px/1 var(--font-sans);
  --t-nav-label:     500 9.32px/1 var(--font-sans);
  --t-pill:          700 9.32px/1.85 var(--font-alt);     /* w/ -0.346 letter-spacing */
  --t-pill-sm:       700 8.47px/1.85 var(--font-alt);
  --t-status:        700 10.17px/1 var(--font-sans);
  --t-caption:       500 8.47px/1 var(--font-sans);
  --t-legal:         400 10.17px/1.65 var(--font-legal);
  --t-utility:       500 13.56px/1.4 var(--font-utility);
  --t-utility-bold:  700 13.56px/1.4 var(--font-utility);

  /* ── Letter spacing (Figma uses negative tightening) ─────────── */
  --tight:           -0.346px;
  --tight-lg:        -0.556px;
}

/* ── Reset-ish ─────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--t-body);
  color: var(--ink-body);
  background: var(--bg-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Semantic helpers (use the vars directly in components) ────── */
.t-display      { font: var(--t-display); }
.t-h1           { font: var(--t-h1); }
.t-h2           { font: var(--t-h2); letter-spacing: var(--tight); }
.t-h-section    { font: var(--t-h-section); letter-spacing: var(--tight); color: var(--orange-deep); text-transform: uppercase; }
.t-greeting     { font: var(--t-greeting); color: var(--ink-body); }
.t-body         { font: var(--t-body); }
.t-pill         { font: var(--t-pill); letter-spacing: var(--tight); }
.t-tab-active   { font: var(--t-tab-active); }
.t-nav-label    { font: var(--t-nav-label); }
.t-status       { font: var(--t-status); }
.t-caption      { font: var(--t-caption); }
.t-legal        { font: var(--t-legal); color: var(--ink-body); opacity: .5; }

.fg-deep        { color: var(--orange-deep); }
.fg-primary     { color: var(--orange-primary); }
.fg-warm        { color: var(--orange-warm); }
.fg-on-orange   { color: var(--ink-on-orange); }
.fg-muted       { color: var(--ink-muted); }
.fg-faint       { color: var(--ink-faint); }

.bg-cream       { background: var(--bg-cream); }
.bg-charcoal    { background: var(--ink-charcoal); }
.bg-warm        { background: var(--orange-warm); }
.bg-warm-soft   { background: var(--orange-warm-67); }
.bg-primary     { background: var(--orange-primary); }
.bg-sand        { background: var(--orange-sand); }

/* ── Live pulse animation ──────────────────────────────────────── */
@keyframes waygo-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.25); opacity: .55; }
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--status-live);
  animation: waygo-pulse 1.4s ease-in-out infinite;
}