/* Night Out design tokens: "Late Edition" (final, 2026-10-17).
   Black canvas, white type. One variable family (Archivo, wdth 62–125) at three widths:
   expanded for the wordmark and monograms, semi-expanded for eyebrow labels, condensed for every number.
   The only hues in the UI are the three crowd levels, and they always sit next to a word, a number
   and a bar-count shape. Contrast ratios: WCAG 2.x formula (tools/contrast.py), on #000 unless noted.
   Variable NAMES follow the existing app/styles/tokens.css; silver tokens are retired. */

:root {
  color-scheme: dark;

  /* ---------- Type ---------- */
  /* Google Fonts (shared build): Archivo:wdth,wght@62..125,100..900. Offline falls back to the platform sans. */
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);           /* titles: same family at 800 with tight tracking (serif retired) */
  --font-serif: var(--font-sans);             /* legacy alias, do not use for new rules */
  /* Numbers: if Archivo's width axis is missing, fall to a real condensed face so "20–30 min" never widens 25%. */
  --font-num: "Archivo", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, "Helvetica Neue", Arial, sans-serif;
  --w-cond: 68%;      /* numbers: waits, distance, points, times, counts */
  --w-norm: 100%;     /* reading text, names, headlines */
  --w-semi: 112.5%;   /* eyebrow labels, tags, demo chip */
  --w-exp: 125%;      /* wordmark, monograms */

  --t-2xs: 0.6875rem;   /* 11  eyebrow labels (caps, 700, +.08em), tab labels, axis */
  --t-xs: 0.75rem;      /* 12  card micro-line, summary line, fine print */
  --t-sm: 0.8125rem;    /* 13  meta lines, chips, card deal text */
  --t-base: 0.9375rem;  /* 15  body copy, list titles */
  --t-md: 1rem;         /* 16  inputs (iOS no-zoom floor), card name */
  --t-lg: 1.0625rem;    /* 17  ticket titles, sheet rows */
  --t-xl: 1.375rem;     /* 22  section titles (800, -.03em) */
  --t-2xl: 1.75rem;     /* 28  area/page title below 360px */
  --t-3xl: 1.875rem;    /* 30  area name, page titles (800, -.035em) */
  --t-hero: 2.375rem;   /* 38  venue name on the hero (800, -.04em) */
  --t-num-card: 1.625rem; /* 26 card wait value (condensed 800); 24 in cards <=170px; 30 in the 1-column card */
  --t-display: 4.25rem; /* 68  venue wait value only (condensed 800) */
  --t-num-xl: 7rem;     /* 112 points balance (condensed 800) */

  /* ---------- Spacing (4pt) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
  --gutter: 16px;

  /* ---------- Radii ---------- */
  --r-xs: 6px;        /* tags */
  --r-logo: 9px;      /* 34px logo tile (10px at 40px) */
  --r-sm: 10px;       /* small buttons, icon wells */
  --r-md: 12px;       /* tickets, panels */
  --r-btn-lg: 14px;   /* 48–52px buttons, search, action tiles */
  --r-card: 16px;     /* bar card plate */
  --r-lg: 16px;
  --r-xl: 22px;       /* sheet top corners */
  --r-pill: 999px;    /* chips, demo chip, distance chip */

  /* ---------- Color: monochrome ramp ---------- */
  --bg: #000000;
  --surface: #0B0B0B;     /* card plate, sheets body, disclosure */
  --surface-2: #141414;   /* search field, tickets, secondary buttons, action tiles */
  --raised: #101010;      /* dialogs and sheets */
  --fill-2: #1E1E1E;      /* icon wells, pressed secondary */
  --ink: #FFFFFF;         /* 21:1 · 19.7 on surface · 18.4 on surface-2 */
  --ink-sub: #D6D6D6;     /* long-form secondary copy: 14.5:1 · 12.7 on surface-2 */
  --ink-2: #BDBDBD;       /* secondary text: 11.2:1 · 10.5 on surface · 9.8 on surface-2 · 8.9 on fill-2 */
  --ink-3: #8F8F8F;       /* labels, meta, placeholders: 6.5:1 · 6.1 on surface · 5.7 on surface-2 · 5.2 on fill-2 */
  --ink-4: #5E5E5E;       /* NON-TEXT only (dashed rings, out-of-date band): 3.24:1 · 3.04 on surface */
  --line: #222222;        /* decorative hairlines, never the only boundary of a control */
  --line-strong: #333333; /* decorative ticket/strip edges and dividers */
  --line-input: #6E6E6E;  /* EVERY control boundary (chips, search, map, secondary buttons, tags, demo chip):
                             4.12:1 on #000 · 3.86 on surface · 3.61 on surface-2 (WCAG 1.4.11) */
  --meter-off: #3A3A3A;   /* unfilled meter bars (decorative; filled bars carry the count, >=4:1 against it) */

  --accent: #FFFFFF;      /* the only action fill: white button, black label (21:1) */
  --accent-ink: #000000;
  --accent-sub: #3D3D3D;  /* secondary text on white: 10.9:1 */
  --accent-soft: #141414;
  --accent-text: #FFFFFF;

  /* Crowd level: the ONLY hues. Always with a word, a range and a 1/2/3-bar meter. */
  --quiet: #5FE3A1;       /* 13.0:1 · 12.2 on surface */
  --lively: #FFC94D;      /* 13.7:1 · 12.9 on surface */
  --packed: #FF6B5E;      /* 7.5:1 · 7.1 on surface */
  --none: #8F8F8F;

  /* Freshness is monochrome: solid white (fresh) / hatched (may have changed) / outline (out of date). */
  --fresh: #FFFFFF;
  --fresh-soft: #141414;
  --aging: #BDBDBD;
  --aging-soft: #141414;
  --muted-soft: #141414;
  --danger: #FF8A80;      /* field errors only, always with an icon and words: 9.2:1 */
  --danger-soft: #1A0F0E;

  --pass-bg: #0B0B0B;
  --pass-ink: #FFFFFF;
  --pass-ink-2: #BDBDBD;

  --focus: #FFFFFF;       /* 2px ring + 5px black halo: visible on black, on photos and around white buttons */
  --focus-halo: #000000;

  /* ---------- Materials ---------- */
  --glass: rgb(0 0 0 / 0.62);   /* chips/buttons over photos: white text 6.19:1 even over a pure-white pixel */
  --glass-blur: blur(10px) saturate(140%);   /* <= 10px, fixed chrome only (never per card) */
  --scrim: rgb(0 0 0 / 0.66);   /* sheet backdrop */
  --scrim-top: linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0) 36%);
  /* Card bottom scrim: >=.66 black under the top of a 2-line name (white 7.2:1), .84 under the micro-line (ink-2 7.7:1). */
  --scrim-bottom: linear-gradient(0deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.8) 24%, rgb(0 0 0 / 0.5) 46%, rgb(0 0 0 / 0) 70%);
  --scrim-hero: linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 26%), linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0.86) 26%, rgb(0 0 0 / 0.55) 46%, rgb(0 0 0 / 0) 70%);
  --photo-edge: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  --shadow-float: 0 12px 32px rgb(0 0 0 / 0.6);
  --shadow-sheet: 0 -12px 48px rgb(0 0 0 / 0.8);

  /* ---------- Motion (research/claude-raw/motion-spec.md): one ladder; anything over 300ms says why ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* emilkowalski/skills animate */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --d-press-down: 50ms;  /* :active scale-in (never below .95) */
  --d-press-up: 240ms;   /* release back to rest */
  --d-press: var(--d-press-up); /* every press transition reads this; a pressed control flips it to --d-press-down (app.css "Presses") */
  --d-swap: 150ms;       /* text and label crossfade with a 2px blur settle */
  --d-icon: 160ms;       /* icon morph: heart, map/list, check */
  --d-thumb: 220ms;      /* sliding segmented thumb and tab pill */
  --d-flip: 220ms;       /* siblings closing a gap, stack and feed inserts */
  --d-tray: 260ms;       /* sheet height between steps */
  --d-morph: 240ms;      /* the search field grows out of its button (O2) */
  --d-morph-out: 180ms;  /* ...and folds back into it */
  --d-tray-out: 180ms;   /* a disclosure folding shut */
  --d-flash-pick: 120ms; /* a picked row's fill before its sheet closes */
  --d-roll: 280ms;       /* digit roll (transform; old glyph fades over --d-icon) */
  --d-shake: 240ms;      /* blocked action, partial keyframes on translate */
  --d-quick: 120ms;      /* small exits (a deal badge, the outgoing map/list glyph) and the per-tap count swap */
  --d-boop: 300ms;       /* the points star nods once on an earn */
  --d-sheet-lock: 320ms; /* no drag starts until the sheet has finished opening */
  --d-fly: 320ms;        /* a published count flies to where it lands (> 300: it crosses a panel) */
  --d-fade: 150ms;       /* short cross-fades */
  --d-select: 160ms;     /* chip, tab, toggle fills; status edge hue */
  --d-toast-out: 160ms;  /* exits are shorter than entrances */
  --d-reveal: 200ms;     /* small entrances: badge, deal tag, map preview */
  --d-vt-root: 200ms;
  --d-toast: 220ms;
  --d-sheet-out: 220ms;
  --d-flash: 240ms;      /* single capture flash */
  --d-fill: 240ms;       /* poll result bars */
  --d-vt: 280ms;         /* shared element (venue art) */
  --d-sheet-in: 320ms;   /* > 300 because the sheet travels ~90% of the screen */
  --d-ring: 400ms;
  --d-rm-in: 150ms;      /* reduced-motion fades (linear) */
  --d-rm-out: 120ms;
  --d-loop-pulse: 1.8s;  /* x2 = 3.6s, under the WCAG 2.2.2 five-second limit */
  --n-loop-pulse: 2;
  --spring-drawer: var(--ease-sheet);   /* Apple drawer spring (damping .8, response .3); upgraded below */
  --d-spring-drawer: 400ms;
  --spring-pop: var(--ease-out);        /* rare success pop (Apple bounce .25, 2.8% peak); upgraded below */
  --d-spring-pop: 380ms;

  /* ---------- Layout ---------- */
  --phone-w: 430px;     /* app column, centered on wider screens over #050505 */
  --topbar-h: 52px;
  --tabbar-h: 60px;     /* + safe area + 10px */
  --tabbar-gap: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* Kept for styles carried over from the previous build. */
  --shadow-pin: 0 4px 12px rgb(0 0 0 / 0.55);
  --t-md-legacy: 1rem;
}

/* 320–359px phones: one-column cards, smaller display type. */
@media (max-width: 359.98px) {
  :root { --t-3xl: 1.75rem; --gutter: 16px; }
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-drawer: linear(0, 0.051, 0.167, 0.311, 0.457, 0.59, 0.705, 0.797, 0.869, 0.922, 0.96, 0.985, 1.001, 1.01, 1.014, 1.015, 1.014, 1.013, 1.01, 1.008, 1.006, 1.004, 1.003, 1.002, 1);
    --spring-pop: linear(0, 0.022, 0.079, 0.158, 0.249, 0.347, 0.443, 0.536, 0.622, 0.699, 0.767, 0.826, 0.875, 0.915, 0.948, 0.973, 0.993, 1.007, 1.017, 1.023, 1.027, 1.028, 1.028, 1.027, 1.025, 1.022, 1.02, 1.017, 1.014, 1.012, 1.009, 1.007, 1.006, 1.004, 1.003, 1.002, 1);
  }
}
@media (prefers-reduced-motion: reduce) { :root { --spring-drawer: var(--ease-out); --spring-pop: var(--ease-out); } }