/* Design tokens from bites-design-kit. Values are the kit's — change the kit
   and re-copy rather than editing here, so the mockups stay the truth. */

/* Bites tokens. Generated from tokens.json. Light is default; dark follows the OS, or force with <html data-theme="dark">. */
/* Fonts are loaded by index.html from /vendor/fonts/fonts.css. */
:root {
  color-scheme: light;
  --color-ink: #16181D;
  --color-ink-secondary: #4A4F58;
  --color-ink-muted: #6B7079;
  --color-border-dashed: #9A9EA6;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #F2F2F0;
  --color-border: #ECECEA;
  --color-border-strong: #DCDCD8;
  --color-on-dark: #FFFFFF;
  --color-scrim: rgba(22,24,29,0.60);
  --color-chip-dark: rgba(22,24,29,0.66);
  --color-cluster: #1F2430;
  --color-cluster-inner: #3A4150;
  --color-user-location: #2F5FB3;
  --color-saved: #C0392B;
  --color-category-restaurant: #17777A;
  --color-category-grill: #C0392B;
  --color-category-bar: #6A4BC4;
  --color-category-cafe: #9A6412;
  --color-category-bistro: #2F5FB3;
  --color-category-dessert: #B83B7A;
  --color-map-land: #EDEBE6;
  --color-map-park: #D5E3C8;
  --color-map-water: #C9DCE7;
  --color-map-road: #FFFFFF;
  --color-map-arterial: #EFD58A;
  --color-map-label: #6B7079;
  --color-map-road-major: #FFFFFF;
  --color-fab: #16181D;
  --color-on-fab: #FFFFFF;
  --color-primary-button: #16181D;
  --color-on-primary-button: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-link: #16181D;
  --color-link-hover: #17777A;
  --color-cluster-text: #FFFFFF;
  --color-category-pin-restaurant: #17777A;
  --color-category-pin-grill: #C0392B;
  --color-category-pin-bar: #6A4BC4;
  --color-category-pin-cafe: #9A6412;
  --color-category-pin-bistro: #2F5FB3;
  --color-category-pin-dessert: #B83B7A;
  --color-accent: #C0392B;
  --color-on-accent: #FFFFFF;
  --color-camera-background: #0B0C0E;
  --color-camera-control: rgba(255,255,255,0.16);
  --color-camera-hint: rgba(11,12,14,0.62);
  --font-display: 'Bricolage Grotesque', serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --radius-input: 14px;
  --radius-button: 14px;
  --radius-card: 18px;
  --radius-sheet: 24px;
  --radius-mini-map: 16px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --radius-illustration: 32px;
  --radius-hero-map: 28px;
  --radius-cta-block: 28px;
  --radius-photo-thumb: 14px;
  --radius-icon-tile: 14px;
  --space-screen-padding: 16px;
  --space-detail-padding: 20px;
  --space-card-gap: 14px;
  --space-tab-gap: 22px;
  --space-header-top: 52px;
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 18px;
  --space-xl: 24px;
  --shadow-fab: 0 10px 24px rgba(22,24,29,0.30);
  --shadow-float-button: 0 6px 16px rgba(22,24,29,0.20);
  --shadow-photo: 0 18px 36px rgba(22,24,29,0.18);
  --shadow-header: 0 1px 0 #ECECEA, 0 6px 16px rgba(22,24,29,0.06);
  --shadow-pin: drop-shadow(0 4px 6px rgba(22,24,29,0.30));
  --shadow-camera-fab: 0 10px 24px rgba(192,57,43,0.35);
  --motion-pulse: 2s ease-out infinite;
  --motion-radar: 2.4s ease-out infinite;
  --motion-bar: 1.4s ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-ink: #F2F1EE;
    --color-ink-secondary: #B4B8BF;
    --color-ink-muted: #9197A0;
    --color-border-dashed: #5A5F68;
    --color-surface: #121418;
    --color-surface-subtle: #22262E;
    --color-surface-raised: #22262E;
    --color-border: #262A31;
    --color-border-strong: #3A3F48;
    --color-on-dark: #FFFFFF;
    --color-scrim: rgba(22,24,29,0.60);
    --color-chip-dark: rgba(22,24,29,0.66);
    --color-fab: #F2F1EE;
    --color-on-fab: #121418;
    --color-primary-button: #F2F1EE;
    --color-on-primary-button: #121418;
    --color-link: #F2F1EE;
    --color-link-hover: #4FC3BD;
    --color-cluster: #F2F1EE;
    --color-cluster-inner: #D6D4CE;
    --color-cluster-text: #121418;
    --color-user-location: #5B8DEF;
    --color-saved: #EF6B5E;
    --color-category-restaurant: #17777A;
    --color-category-grill: #C0392B;
    --color-category-bar: #6A4BC4;
    --color-category-cafe: #9A6412;
    --color-category-bistro: #2F5FB3;
    --color-category-dessert: #B83B7A;
    --color-category-pin-restaurant: #1F9A96;
    --color-category-pin-grill: #D9483A;
    --color-category-pin-bar: #7D5FDB;
    --color-category-pin-cafe: #B57A1C;
    --color-category-pin-bistro: #4A7FDB;
    --color-category-pin-dessert: #D2508F;
    --color-map-land: #1B1E24;
    --color-map-park: #1E2A22;
    --color-map-water: #17293A;
    --color-map-road: #2A2E36;
    --color-map-road-major: #343841;
    --color-map-arterial: #6B5A2E;
    --color-map-label: #9197A0;
    --color-accent: #D9483A;
    --color-on-accent: #FFFFFF;
    --color-camera-background: #0B0C0E;
    --color-camera-control: rgba(255,255,255,0.16);
    --color-camera-hint: rgba(11,12,14,0.62);
    --shadow-fab: 0 10px 24px rgba(0,0,0,0.50);
    --shadow-float-button: 0 6px 16px rgba(0,0,0,0.50);
    --shadow-photo: 0 18px 36px rgba(0,0,0,0.50);
    --shadow-header: 0 1px 0 #262A31, 0 6px 16px rgba(0,0,0,0.45);
    --shadow-pin: drop-shadow(0 4px 6px rgba(0,0,0,0.50));
    --shadow-camera-fab: 0 10px 24px rgba(0,0,0,0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ink: #F2F1EE;
  --color-ink-secondary: #B4B8BF;
  --color-ink-muted: #9197A0;
  --color-border-dashed: #5A5F68;
  --color-surface: #121418;
  --color-surface-subtle: #22262E;
  --color-surface-raised: #22262E;
  --color-border: #262A31;
  --color-border-strong: #3A3F48;
  --color-on-dark: #FFFFFF;
  --color-scrim: rgba(22,24,29,0.60);
  --color-chip-dark: rgba(22,24,29,0.66);
  --color-fab: #F2F1EE;
  --color-on-fab: #121418;
  --color-primary-button: #F2F1EE;
  --color-on-primary-button: #121418;
  --color-link: #F2F1EE;
  --color-link-hover: #4FC3BD;
  --color-cluster: #F2F1EE;
  --color-cluster-inner: #D6D4CE;
  --color-cluster-text: #121418;
  --color-user-location: #5B8DEF;
  --color-saved: #EF6B5E;
  --color-category-restaurant: #17777A;
  --color-category-grill: #C0392B;
  --color-category-bar: #6A4BC4;
  --color-category-cafe: #9A6412;
  --color-category-bistro: #2F5FB3;
  --color-category-dessert: #B83B7A;
  --color-category-pin-restaurant: #1F9A96;
  --color-category-pin-grill: #D9483A;
  --color-category-pin-bar: #7D5FDB;
  --color-category-pin-cafe: #B57A1C;
  --color-category-pin-bistro: #4A7FDB;
  --color-category-pin-dessert: #D2508F;
  --color-map-land: #1B1E24;
  --color-map-park: #1E2A22;
  --color-map-water: #17293A;
  --color-map-road: #2A2E36;
  --color-map-road-major: #343841;
  --color-map-arterial: #6B5A2E;
  --color-map-label: #9197A0;
  --color-accent: #D9483A;
  --color-on-accent: #FFFFFF;
  --color-camera-background: #0B0C0E;
  --color-camera-control: rgba(255,255,255,0.16);
  --color-camera-hint: rgba(11,12,14,0.62);
  --shadow-fab: 0 10px 24px rgba(0,0,0,0.50);
  --shadow-float-button: 0 6px 16px rgba(0,0,0,0.50);
  --shadow-photo: 0 18px 36px rgba(0,0,0,0.50);
  --shadow-header: 0 1px 0 #262A31, 0 6px 16px rgba(0,0,0,0.45);
  --shadow-pin: drop-shadow(0 4px 6px rgba(0,0,0,0.50));
  --shadow-camera-fab: 0 10px 24px rgba(0,0,0,0.5);
}

@keyframes bites-pulse { 0% { transform: scale(.55); opacity: .9 } 100% { transform: scale(1.35); opacity: 0 } }
@keyframes bites-radar { 0% { transform: scale(.5); opacity: .8 } 100% { transform: scale(1.25); opacity: 0 } }
@keyframes bites-bar { 0% { transform: translateX(-64px) } 100% { transform: translateX(160px) } }
@keyframes bites-live { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }