/* Next Visit - Design Tokens v0.1 · 18 May 2026 Drop this into your app's global stylesheet (or import it). Every other color/font in the product should reference one of these variables. If you find yourself writing a raw hex, stop - that token is missing from this file. Add it here instead. ============================================================ */ :root { /* ── Color · Navy (structural) ───────────────────────────── */ --nv-navy-50: #eef2f8; --nv-navy-100: #dde4ee; --nv-navy-200: #c5cee0; --nv-navy-300: #93a3c2; --nv-navy-400: #5a6f93; --nv-navy-500: #3a527b; --nv-navy-600: #233c64; --nv-navy-700: #142b4d; --nv-navy-800: #0e2240; /* brand navy */ --nv-navy-900: #091a32; --nv-navy-950: #05111f; /* ── Color · Cream (warm neutral surfaces) ───────────────── */ --nv-paper: #fafaf7; --nv-cream-50: #fbf3ed; --nv-cream-100:#fbe8de; /* brand cream */ --nv-cream-200:#f6dccb; --nv-cream-300:#eccab4; /* ── Color · Pink (the accent - use sparingly) ───────────── */ --nv-pink-50: #fdeaf2; --nv-pink-100: #fcd0e0; --nv-pink-200: #f7a5c1; --nv-pink-300: #f17ba2; --nv-pink-400: #ee5a8b; --nv-pink-500: #ec4079; /* brand pink */ --nv-pink-600: #d12c64; --nv-pink-700: #a92050; --nv-pink-800: #82173d; /* ── Color · Brand marks (do not use outside the logo / icon) ─ */ --nv-tile-bg: #06122a; /* split-flap tile inner */ --nv-tile-glyph: var(--nv-cream-100); --nv-tile-accent: var(--nv-pink-500); /* ── Color · Semantic ────────────────────────────────────── */ --nv-success: #2f9968; --nv-success-bg: #e6f3ec; --nv-warning: #d99021; --nv-warning-bg: #fbf0d9; --nv-error: #c83838; --nv-error-bg: #fbe5e1; /* Info (sky-blue family). Not in the brand-three palette but surfaces a few signposting affordances (informational toasts, transit / planning hints) that don't fit warning amber or success green. Kept neutral so it never reads as a CTA. */ --nv-info: #1d6298; --nv-info-bg: #e3eef9; /* ── Semantic aliases · use these in components ──────────── */ /* Map the raw scale to roles. Components should reference the role tokens, not the scale, so a future re-theme is cheap. */ --nv-bg-page: var(--nv-paper); --nv-bg-surface: #ffffff; --nv-bg-subtle: var(--nv-cream-50); --nv-bg-hover: var(--nv-navy-50); --nv-bg-dark: var(--nv-navy-800); --nv-bg-darker: var(--nv-navy-900); --nv-text-primary: var(--nv-navy-800); --nv-text-secondary: var(--nv-navy-600); --nv-text-muted: var(--nv-navy-400); --nv-text-on-dark: var(--nv-cream-100); --nv-text-on-dark-muted: rgba(251, 232, 222, 0.78); /* secondary cream text on a navy/dark card (= cream-100 @ 78%) */ --nv-text-on-pink: #ffffff; --nv-text-on-accent: #ffffff; /* white text/icon on a filled colour chip (pink, success, etc.) */ /* Faint chips/borders that sit ON a dark (navy) card - e.g. the Together gateway glyph tiles. Absolute (not role-flipped): a dark card looks the same in light and dark mode. */ --nv-surface-on-dark: rgba(255, 255, 255, 0.06); --nv-border-on-dark: rgba(255, 255, 255, 0.10); --nv-border-subtle: var(--nv-navy-100); --nv-border-strong: var(--nv-navy-200); --nv-border-focus: var(--nv-pink-500); --nv-accent: var(--nv-pink-500); --nv-accent-hover: var(--nv-pink-600); --nv-accent-soft: var(--nv-pink-50); /* Scrim used by modal / bottom-sheet backdrops. Pure-black at moderate alpha - a navy tint here murked up the page behind it (navy × pink = burgundy on the countdown hero); black-on-30 dims without re-colouring, so the page-below stays recognisable. */ --nv-overlay-scrim: rgba(0, 0, 0, 0.30); /* Full-screen media backdrop (photo viewer). Brand navy rather than flat black so the immersive surface still feels like Next Visit. Channels only, so callers can set the alpha for the drag-to-dismiss fade: rgb(var(--nv-overlay-photo-rgb) / 0.8). */ --nv-overlay-photo-rgb: 5 17 31; /* = --nv-navy-950 */ /* Z-index hierarchy. Every layer in the app should reach for one of these tokens rather than picking a one-off number, so the layering stays predictable and a future re-ordering happens here, not across fifteen component files. Modals must portal to document.body for these values to actually win over the bottom nav (a framer-motion ancestor with a transform traps position:fixed inside its box). */ --nv-z-base: 1; /* default layer */ --nv-z-sticky: 100; /* sticky page headers, sub-navs */ --nv-z-nav: 1000; /* bottom nav bar */ --nv-z-fab: 1100; /* floating action button */ --nv-z-toast: 4000; /* sonner toasts - above content, below modals */ --nv-z-modal-scrim: 9000; /* backdrop behind modals / bottom-sheets */ --nv-z-modal: 9001; /* modal content itself */ --nv-z-popover: 9500; /* tooltips, popovers, dropdowns */ --nv-z-max: 99999; /* truly above everything (auth gates, full-screen photo viewer) */ /* ── Type ────────────────────────────────────────────────── */ --nv-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --nv-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --nv-font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace; --nv-font-mark: 'Space Grotesk', 'DM Mono', monospace; /* brand-mark glyphs ONLY - never body UI */ /* Type scale (rem-based, body = 1rem = 15px recommended) */ --nv-text-xs: 0.75rem; /* 11px · labels, captions */ --nv-text-sm: 0.8125rem; /* 13px · meta, hint text */ --nv-text-base: 0.9375rem; /* 15px · body */ --nv-text-md: 1rem; /* 16px · prominent body */ --nv-text-lg: 1.1875rem; /* 19px · lede */ --nv-text-xl: 1.375rem; /* 22px · h3 */ --nv-text-2xl: 1.75rem; /* 28px · h2 small */ --nv-text-3xl: 2.625rem; /* 42px · h2 */ --nv-text-4xl: 3.5rem; /* 56px · h1 small */ --nv-text-5xl: 5.5rem; /* 88px · h1 hero */ --nv-weight-regular: 400; --nv-weight-medium: 500; --nv-weight-semibold: 600; --nv-weight-bold: 700; --nv-leading-tight: 1.05; --nv-leading-snug: 1.25; --nv-leading-normal: 1.55; --nv-tracking-tight: -0.025em; --nv-tracking-snug: -0.01em; --nv-tracking-mono: 0.08em; --nv-tracking-wide: 0.18em; --nv-tracking-widest: 0.32em; /* ── Spacing scale (4-based) ─────────────────────────────── */ --nv-space-1: 4px; --nv-space-2: 8px; --nv-space-3: 12px; --nv-space-4: 16px; --nv-space-5: 20px; --nv-space-6: 24px; --nv-space-8: 32px; --nv-space-10: 40px; --nv-space-12: 48px; --nv-space-16: 64px; --nv-space-20: 80px; /* ── Radii ───────────────────────────────────────────────── */ --nv-radius-sm: 4px; --nv-radius-md: 8px; --nv-radius-lg: 12px; --nv-radius-xl: 16px; --nv-radius-pill: 9999px; /* ── Shadows ─────────────────────────────────────────────── */ --nv-shadow-sm: 0 1px 0 rgba(14, 34, 64, 0.06); --nv-shadow-md: 0 1px 0 var(--nv-navy-100), 0 0 0 1px rgba(14, 34, 64, 0.04); --nv-shadow-lg: 0 4px 24px rgba(14, 34, 64, 0.12), 0 0 0 1px var(--nv-navy-100); --nv-shadow-xl: 0 12px 40px rgba(14, 34, 64, 0.18); --nv-shadow-focus: 0 0 0 3px var(--nv-pink-100); /* ── Motion ──────────────────────────────────────────────── */ --nv-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --nv-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --nv-dur-fast: 120ms; --nv-dur-base: 200ms; --nv-dur-slow: 320ms; } /* ── Dark theme override · opt-in via ──────── Never fires on its own - the corresponding @media (prefers-color-scheme: dark) query was deliberately retired (see comment below). MyProfile's Appearance toggle is the sole way a user gets here. */ [data-theme="dark"] { --nv-bg-page: var(--nv-navy-900); /* page backdrop */ --nv-bg-surface: var(--nv-navy-800); /* card / sheet surface */ --nv-bg-subtle: var(--nv-navy-700); /* secondary surface, hovers */ --nv-bg-hover: rgba(251, 232, 222, 0.06); /* `bg-dark` flips to a SLIGHTLY-lighter navy than the page so dark surfaces like the Countdown hero still pop. */ --nv-bg-dark: var(--nv-navy-700); --nv-text-primary: var(--nv-cream-100); --nv-text-secondary: var(--nv-cream-200); --nv-text-muted: rgba(251, 232, 222, 0.55); --nv-border-subtle: rgba(251, 232, 222, 0.10); --nv-border-strong: rgba(251, 232, 222, 0.20); /* Semantic fill backgrounds flip to translucent tints of their OWN hue so they read as dark chips on navy. The light defaults (#e6f3ec etc.) were near-white blocks with invisible text in dark mode - e.g. the completed Local Tourist stops and the success badge. Paired text stays the semantic colour (or cream), both of which read on these dark tints. */ --nv-success-bg: rgba(47, 153, 104, 0.22); --nv-warning-bg: rgba(217, 144, 33, 0.22); --nv-error-bg: rgba(200, 56, 56, 0.24); --nv-info-bg: rgba(29, 98, 152, 0.26); --nv-accent-soft: rgba(236, 64, 121, 0.22); /* The light pink tints flip to translucent brand pink: a solid #fdeaf2 fill reads as a glaring light block on navy (profile stat chip, glyph chips, opt-in bell). Every var(--nv-pink-50/100) fill inherits this. */ --nv-pink-50: rgba(236, 64, 121, 0.14); --nv-pink-100: rgba(236, 64, 121, 0.22); /* Shadows on dark need to push light/inner glow rather than dropped darker-than-bg shadow. Hairline pink-tinted top stroke + a touch of blur reads as a card lift on navy. */ --nv-shadow-sm: inset 0 0 0 1px rgba(251, 232, 222, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3); --nv-shadow-md: inset 0 0 0 1px rgba(251, 232, 222, 0.08), 0 4px 12px rgba(0, 0, 0, 0.3); --nv-shadow-lg: inset 0 0 0 1px rgba(251, 232, 222, 0.10), 0 8px 24px rgba(0, 0, 0, 0.4); --nv-shadow-focus: 0 0 0 3px rgba(236, 64, 121, 0.30); /* Scrim a touch more aggressive on dark - black-30 on a near-black page barely reads. Bumping to 50 so a modal still clearly separates from the page underneath. */ --nv-overlay-scrim: rgba(0, 0, 0, 0.55); } /* Dark mode is opt-in via `[data-theme="dark"]` only. The `@media (prefers-color-scheme: dark)` query was deliberately retired - it was firing whenever a user had iOS / Safari set to dark, flipping text tokens to cream while many cards still hard-coded `background: white`. The user-facing toggle in MyProfile sets `` to opt in deliberately. */