/* GENERATED by tools/design/gen-tokens.mjs from config/design-tokens.mjs — do not edit.
 *
 * Design tokens as CSS custom properties. Every colour anywhere in this app must be
 * `var(--…)` from here (apps/web/scripts/check-colors.mjs). Themes: Nightfall (default), Twilight [data-brand="twilight"].
 * Why each value is what it is: docs/03-design-system.md.
 */
:root {
  /* Type — one family (Instrument Sans); layout.tsx points --font-brand at the loaded font */
  --font-brand: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* codes only (invite codes) */

  /* Colour — Nightfall, light */
  --bg: #f7f4ee;
  --bg-elev: #fffdf9;
  --bg-sunken: #efebe3;
  --ink: #1b1934;
  --ink-2: #5c5872;
  --ink-3: #86829a;
  --hair: rgba(27, 25, 52, 0.1);
  --hair-strong: rgba(27, 25, 52, 0.18);
  --glass: rgba(247, 244, 238, 0.74);
  --glass-strong: rgba(255, 253, 249, 0.92);
  --glass-inset: rgba(255, 255, 255, 0.5);
  --accent: #1b1934;
  --accent-ink: #f7f4ee;
  --accent-soft: rgba(27, 25, 52, 0.07);
  --accent-press: #2f2c55;
  --action: #ffb627;
  --action-ink: #1b1934;
  --action-press: #f2a516;
  --action-shadow: rgba(226, 150, 10, 0.55);
  --sun: #ffb627;
  --sun-ink: #1b1934;
  --sun-soft: rgba(255, 182, 39, 0.22);
  --bubble-own: #1b1934;
  --bubble-own-ink: #f7f4ee;
  --good: #117a55;
  --good-soft: rgba(17, 122, 85, 0.12);
  --warn: #9c5d00;
  --warn-soft: rgba(224, 142, 0, 0.15);
  --bad: #c0313e;
  --bad-soft: rgba(192, 49, 62, 0.11);
  --warm: #b8531c;
  --scrim: rgba(16, 15, 34, 0.36);
  --map-land: #eeeae1;
  --map-park: #dce5d2;
  --map-water: #cfdde8;
  --map-road: #fffdf9;
  --map-route: var(--accent);
  --shadow-card: 0 1px 0 rgba(27, 25, 52, 0.04), 0 10px 26px -14px rgba(27, 25, 52, 0.22);
  --shadow-float: 0 22px 48px -18px rgba(27, 25, 52, 0.34);
  --shadow-cta: 0 8px 20px -8px rgba(226, 150, 10, 0.55);
  --mark-ground: #1c1a3a;
  --mark-sky: #f7f4ee;
  --mark-sun: #ffb627;
  color-scheme: light;

  /* People — one colour per member, everywhere they appear */
  --cat-1: #f2a516;
  --on-cat-1: #1b1934;
  --cat-2: #5b4fd6;
  --on-cat-2: #ffffff;
  --cat-3: #c8456a;
  --on-cat-3: #ffffff;
  --cat-4: #0b7f7b;
  --on-cat-4: #ffffff;
  --cat-5: #2f6dc4;
  --on-cat-5: #ffffff;
  --cat-6: #3f7d45;
  --on-cat-6: #ffffff;
  --cat-7: #b4532a;
  --on-cat-7: #ffffff;
  --cat-8: #85427f;
  --on-cat-8: #ffffff;
  --on-cat: #ffffff; /* legacy single value; prefer --on-cat-n */

  /* Glass (chrome over scrolling content only) */
  --glass-blur: 20px;
  --glass-sat: 150%;

  /* Radii — capsules act, rectangles contain, near-squares label, circles are people */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-pill: 999px;

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

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 360ms;
  --t-rise: 1600ms;

  /* Safe areas and chrome */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 64px;
  --tabbar-gap: 22px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #100f22;
    --bg-elev: #1b1a35;
    --bg-sunken: #0a0918;
    --ink: #f4f0e8;
    --ink-2: #b4b0c6;
    --ink-3: #8c88a2;
    --hair: rgba(244, 240, 232, 0.1);
    --hair-strong: rgba(244, 240, 232, 0.18);
    --glass: rgba(16, 15, 34, 0.68);
    --glass-strong: rgba(27, 26, 53, 0.92);
    --glass-inset: rgba(255, 255, 255, 0.06);
    --accent: #f4f0e8;
    --accent-ink: #100f22;
    --accent-soft: rgba(244, 240, 232, 0.1);
    --accent-press: #ffffff;
    --action: #ffbe3d;
    --action-ink: #100f22;
    --action-press: #ffcd66;
    --action-shadow: rgba(255, 190, 61, 0.38);
    --sun: #ffbe3d;
    --sun-ink: #100f22;
    --sun-soft: rgba(255, 190, 61, 0.16);
    --bubble-own: #35325f;
    --bubble-own-ink: #f4f0e8;
    --good: #4ccb91;
    --good-soft: rgba(76, 203, 145, 0.14);
    --warn: #f2bd52;
    --warn-soft: rgba(242, 189, 82, 0.14);
    --bad: #ff7b82;
    --bad-soft: rgba(255, 123, 130, 0.14);
    --warm: #ff9a62;
    --scrim: rgba(0, 0, 0, 0.55);
    --map-land: #17162c;
    --map-park: #172620;
    --map-water: #111a33;
    --map-road: #27254a;
    --map-route: var(--accent);
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.35), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
    --shadow-float: 0 24px 52px -16px rgba(0, 0, 0, 0.75);
    --shadow-cta: 0 8px 20px -8px rgba(255, 190, 61, 0.38);
    --mark-ground: #1c1a3a;
    --mark-sky: #f7f4ee;
    --mark-sun: #ffb627;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #100f22;
  --bg-elev: #1b1a35;
  --bg-sunken: #0a0918;
  --ink: #f4f0e8;
  --ink-2: #b4b0c6;
  --ink-3: #8c88a2;
  --hair: rgba(244, 240, 232, 0.1);
  --hair-strong: rgba(244, 240, 232, 0.18);
  --glass: rgba(16, 15, 34, 0.68);
  --glass-strong: rgba(27, 26, 53, 0.92);
  --glass-inset: rgba(255, 255, 255, 0.06);
  --accent: #f4f0e8;
  --accent-ink: #100f22;
  --accent-soft: rgba(244, 240, 232, 0.1);
  --accent-press: #ffffff;
  --action: #ffbe3d;
  --action-ink: #100f22;
  --action-press: #ffcd66;
  --action-shadow: rgba(255, 190, 61, 0.38);
  --sun: #ffbe3d;
  --sun-ink: #100f22;
  --sun-soft: rgba(255, 190, 61, 0.16);
  --bubble-own: #35325f;
  --bubble-own-ink: #f4f0e8;
  --good: #4ccb91;
  --good-soft: rgba(76, 203, 145, 0.14);
  --warn: #f2bd52;
  --warn-soft: rgba(242, 189, 82, 0.14);
  --bad: #ff7b82;
  --bad-soft: rgba(255, 123, 130, 0.14);
  --warm: #ff9a62;
  --scrim: rgba(0, 0, 0, 0.55);
  --map-land: #17162c;
  --map-park: #172620;
  --map-water: #111a33;
  --map-road: #27254a;
  --map-route: var(--accent);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.35), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-float: 0 24px 52px -16px rgba(0, 0, 0, 0.75);
  --shadow-cta: 0 8px 20px -8px rgba(255, 190, 61, 0.38);
  --mark-ground: #1c1a3a;
  --mark-sky: #f7f4ee;
  --mark-sun: #ffb627;
  color-scheme: dark;
}

/* ── Theme: Twilight (data-brand="twilight") ── */

:root[data-brand='twilight'] {
  --bg: #f4f2fb;
  --bg-elev: #ffffff;
  --bg-sunken: #eae7f6;
  --ink: #16123a;
  --ink-2: #57527a;
  --ink-3: #85819f;
  --hair: rgba(22, 18, 58, 0.1);
  --hair-strong: rgba(22, 18, 58, 0.18);
  --glass: rgba(244, 242, 251, 0.74);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-inset: rgba(255, 255, 255, 0.55);
  --accent: #4b2fe0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(75, 47, 224, 0.1);
  --accent-press: #3d22c6;
  --action: #4b2fe0;
  --action-ink: #ffffff;
  --action-press: #3d22c6;
  --action-shadow: rgba(75, 47, 224, 0.42);
  --sun: #ffc23d;
  --sun-ink: #16123a;
  --sun-soft: rgba(255, 194, 61, 0.24);
  --bubble-own: #4b2fe0;
  --bubble-own-ink: #ffffff;
  --good: #117a55;
  --good-soft: rgba(17, 122, 85, 0.12);
  --warn: #9c5d00;
  --warn-soft: rgba(224, 142, 0, 0.15);
  --bad: #c0313e;
  --bad-soft: rgba(192, 49, 62, 0.11);
  --warm: #b8531c;
  --scrim: rgba(12, 10, 30, 0.36);
  --map-land: #eceaf4;
  --map-park: #dce6d6;
  --map-water: #cdd9f0;
  --map-road: #ffffff;
  --map-route: var(--accent);
  --shadow-card: 0 1px 0 rgba(27, 25, 52, 0.04), 0 10px 26px -14px rgba(27, 25, 52, 0.22);
  --shadow-float: 0 22px 48px -18px rgba(27, 25, 52, 0.34);
  --shadow-cta: 0 8px 20px -8px rgba(75, 47, 224, 0.42);
  --mark-ground: #4b2fe0;
  --mark-sky: #f4f1ff;
  --mark-sun: #ffc23d;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-brand='twilight']:not([data-theme='light']) {
    --bg: #0c0a1e;
    --bg-elev: #191539;
    --bg-sunken: #07061a;
    --ink: #f3f1ff;
    --ink-2: #b7b2d6;
    --ink-3: #8d88af;
    --hair: rgba(243, 241, 255, 0.1);
    --hair-strong: rgba(243, 241, 255, 0.18);
    --glass: rgba(12, 10, 30, 0.68);
    --glass-strong: rgba(25, 21, 57, 0.92);
    --glass-inset: rgba(255, 255, 255, 0.06);
    --accent: #9c8dff;
    --accent-ink: #0c0a1e;
    --accent-soft: rgba(156, 141, 255, 0.16);
    --accent-press: #b4a9ff;
    --action: #9c8dff;
    --action-ink: #0c0a1e;
    --action-press: #b4a9ff;
    --action-shadow: rgba(122, 102, 255, 0.45);
    --sun: #ffc23d;
    --sun-ink: #0c0a1e;
    --sun-soft: rgba(255, 194, 61, 0.16);
    --bubble-own: #4b2fe0;
    --bubble-own-ink: #ffffff;
    --good: #4ccb91;
    --good-soft: rgba(76, 203, 145, 0.14);
    --warn: #f2bd52;
    --warn-soft: rgba(242, 189, 82, 0.14);
    --bad: #ff7b82;
    --bad-soft: rgba(255, 123, 130, 0.14);
    --warm: #ff9a62;
    --scrim: rgba(0, 0, 0, 0.55);
    --map-land: #15132e;
    --map-park: #152620;
    --map-water: #101838;
    --map-road: #262250;
    --map-route: var(--accent);
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.35), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
    --shadow-float: 0 24px 52px -16px rgba(0, 0, 0, 0.75);
    --shadow-cta: 0 8px 20px -8px rgba(122, 102, 255, 0.45);
    --mark-ground: #4b2fe0;
    --mark-sky: #f4f1ff;
    --mark-sun: #ffc23d;
    color-scheme: dark;
  }
}

:root[data-brand='twilight'][data-theme='dark'] {
  --bg: #0c0a1e;
  --bg-elev: #191539;
  --bg-sunken: #07061a;
  --ink: #f3f1ff;
  --ink-2: #b7b2d6;
  --ink-3: #8d88af;
  --hair: rgba(243, 241, 255, 0.1);
  --hair-strong: rgba(243, 241, 255, 0.18);
  --glass: rgba(12, 10, 30, 0.68);
  --glass-strong: rgba(25, 21, 57, 0.92);
  --glass-inset: rgba(255, 255, 255, 0.06);
  --accent: #9c8dff;
  --accent-ink: #0c0a1e;
  --accent-soft: rgba(156, 141, 255, 0.16);
  --accent-press: #b4a9ff;
  --action: #9c8dff;
  --action-ink: #0c0a1e;
  --action-press: #b4a9ff;
  --action-shadow: rgba(122, 102, 255, 0.45);
  --sun: #ffc23d;
  --sun-ink: #0c0a1e;
  --sun-soft: rgba(255, 194, 61, 0.16);
  --bubble-own: #4b2fe0;
  --bubble-own-ink: #ffffff;
  --good: #4ccb91;
  --good-soft: rgba(76, 203, 145, 0.14);
  --warn: #f2bd52;
  --warn-soft: rgba(242, 189, 82, 0.14);
  --bad: #ff7b82;
  --bad-soft: rgba(255, 123, 130, 0.14);
  --warm: #ff9a62;
  --scrim: rgba(0, 0, 0, 0.55);
  --map-land: #15132e;
  --map-park: #152620;
  --map-water: #101838;
  --map-road: #262250;
  --map-route: var(--accent);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.35), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-float: 0 24px 52px -16px rgba(0, 0, 0, 0.75);
  --shadow-cta: 0 8px 20px -8px rgba(122, 102, 255, 0.45);
  --mark-ground: #4b2fe0;
  --mark-sky: #f4f1ff;
  --mark-sun: #ffc23d;
  color-scheme: dark;
}

/* GENERATED by tools/design/gen-tokens.mjs from config/design-tokens.mjs — do not edit.
 *
 * Type roles (docs/03-design-system.md §3). One family, Instrument Sans: heavy and tight for
 * places, titles and numbers; open and regular for reading.
 */

.t-display {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
  font-feature-settings: "ss01" 0;
}

.t-title1 {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-feature-settings: "ss01" 0;
}

.t-title2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-feature-settings: "ss01" 0;
}

.t-title3 {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-feature-settings: "ss01" 0;
}

.t-headline {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.t-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.47;
  font-weight: 400;
  letter-spacing: -0.003em;
}

.t-callout {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.42;
  font-weight: 400;
  letter-spacing: 0em;
  color: var(--ink-2);
}

.t-footnote {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.38;
  font-weight: 450;
  letter-spacing: 0em;
  color: var(--ink-2);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink-2);
}

.t-overline {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.t-figure {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-feature-settings: "ss01" 0;
  font-variant-numeric: tabular-nums;
}

/* The overline carries the Sun-dot — the brand's recurring marker for 'this is live/now'. */
.t-overline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.t-overline::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sun);
}
.t-overline.no-dot::before {
  display: none;
}

/* Tabular numerals for every price and count that can change (docs/03 §3). */
.t-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.t-mono {
  font-family: var(--font-mono);
}