/* Bundled fonts (offline-first, no Google Fonts CDN): DESIGN_SYSTEM_AND_UX.md §3.1 */
:root {
  --font-display: 'Nunito', 'Rubik', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================================
   DoggyWalky v2.0 Design Tokens
   Canonical references:
   - Interactive UI Kit: ui-kit.html
   - 5-Layer Prototype:  prototype.html
   - JSON Registry:      docs/DESIGN_TOKENS.json
   - UX Specification:   docs/DESIGN_SYSTEM_AND_UX.md
   ============================================================================ */
:root,
[data-theme='light'] {
  /* Core Surfaces (Day Safari ☀️) */
  --bg-canvas: #f5efe6;
  --bg-surface: #fffdf9;
  --bg-elevated: #eae0d2;
  --sheet-bg: #f3ede0;
  --sheet-border: #e2d9c6;
  --sheet-shadow: rgba(31, 41, 34, 0.14);
  --card-border: rgba(61, 90, 69, 0.1);

  /* Brand & Tactile CTA Accents */
  --color-primary: #3d5a45;
  --color-accent: #d96b43;
  --color-accent-depth: #b5522e;
  --color-glow: #f59e0b;
  --cta-walk-bg: linear-gradient(180deg, #2b6540 0%, #215535 100%);
  --cta-walk-border: #1c482c;
  --cta-walk-depth: #183d25;
  --cta-walk-shadow: 0 4px 0 #183d25, 0 8px 18px rgba(24, 61, 37, 0.28);

  /* Typography & Status */
  --text-primary: #1f2922;
  --text-secondary: #5c6b60;
  --text-muted: #7b7064;
  --status-danger: #dc2626;
  --status-success: #16a34a;
  --status-ribbon: #eab308;
  --on-accent: #ffffff;
  --on-primary: #ffffff;

  /* Active Walk HUD, Metrics Card & Floating FABs */
  --metrics-card-bg: linear-gradient(180deg, #faf8f3 0%, #f4efe3 100%);
  --metrics-card-border: #e8dfcf;
  --metrics-divider: #e5dec9;
  --metrics-card-shadow: 0 4px 14px rgba(45, 35, 22, 0.06);
  --hud-pill-bg: rgba(253, 250, 243, 0.92);
  --hud-pill-border: rgba(255, 255, 255, 0.85);
  --hud-pill-shadow: 0 4px 14px rgba(45, 38, 28, 0.1), 0 1px 2px rgba(45, 38, 28, 0.06);
  --fab-bg: linear-gradient(180deg, #ffffff 0%, #f6f1e6 100%);
  --fab-border: rgba(255, 255, 255, 0.9);
  --fab-shadow: 0 5px 14px rgba(40, 32, 20, 0.14), 0 2px 4px rgba(40, 32, 20, 0.08);

  /* Walk Route & H3 Honeycomb Gradients */
  --route-core: #ffa724;
  --route-glow: #ff9e1b;
  --route-dash: #fffdf7;
  --fog: rgba(234, 224, 210, 0.78);
  --hex-frontier-start: rgba(245, 238, 216, 0.72);
  --hex-frontier-mid: rgba(215, 204, 162, 0.42);
  --hex-frontier-end: rgba(185, 198, 140, 0.12);
  --hex-mid-start: rgba(238, 230, 204, 0.78);
  --hex-mid-end: rgba(198, 188, 148, 0.46);
  --hex-outer-start: rgba(242, 235, 214, 0.86);
  --hex-outer-end: rgba(226, 216, 184, 0.74);
  --hex-stroke-outer: rgba(255, 252, 238, 0.9);
  --hex-stroke-inner: rgba(198, 184, 134, 0.55);
  --hex-lit-rim: rgba(255, 253, 244, 0.96);

  /* design-merge map, Layers 2–4: rims, treasure, lock, footprints, vignette and cloud shadows */
  --hex-lit-rim-mid: rgba(246, 240, 221, 0.58);
  --hex-lit-rim-end: rgba(237, 226, 196, 0.28);
  --hex-rim-glow: rgba(255, 253, 244, 0);
  --hex-inner-rim: rgba(255, 253, 246, 0.28);
  --hex-bone-start: rgba(216, 202, 132, 0.86);
  --hex-bone-mid: rgba(185, 172, 98, 0.78);
  --hex-bone-end: rgba(150, 137, 69, 0.72);
  --hex-bone-stroke: rgba(255, 249, 226, 0.96);
  --hex-bone-rim: rgba(248, 231, 162, 0.52);
  --hex-bone-glow: rgba(245, 196, 81, 0);
  --hex-bone-icon: #fbf3d5;
  --hex-bone-icon-stroke: #8f7d43;
  --hex-lock-ink: rgba(251, 246, 233, 0.78);
  --hex-lock-dot: #b5a982;
  --route-footprint: rgba(255, 226, 122, 0.88);
  --vignette-inset: inset 0 0 42px 10px rgba(224, 210, 174, 0.52);
  --cloud-shadow-dense: drop-shadow(0 8px 16px rgba(48, 38, 22, 0.18));
  --cloud-shadow-wisp: drop-shadow(0 5px 10px rgba(48, 38, 22, 0.1));
  --mascot-drop: rgba(40, 30, 18, 0.28);
  --vignette-edge: radial-gradient(
    ellipse 74% 70% at 50% 44%,
    rgba(246, 240, 224, 0) 50%,
    rgba(236, 228, 205, 0.38) 70%,
    rgba(224, 214, 186, 0.78) 88%,
    rgba(214, 203, 172, 0.94) 100%
  );

  /* Vector Map Tokens */
  --map-land: #e8eee0;
  --map-park: #cfe3c8;
  --map-street: #fffdf9;
  --map-water: #bcd7e0;

  /* Mascot palette (D-007): silhouettes are recolored through these tokens. */
  --mascot-ink: #3f2817;
  --mascot-tongue: #e8737a;
  --mascot-hat: #c9a66b;
  --mascot-hat-shade: #a7844d;
  --mascot-raincoat: #f2c230;
  --mascot-hat-top: #dcc596;
  --mascot-hat-band: #9c7b4a;
  --mascot-raincoat-light: #f7d86a;
  --mascot-ear-inner: #f2a59a;
  --mascot-blush: #ef8f80;
  --mascot-collar: #a5502e;
  --mascot-eye: #3b2416;
  --mascot-shine: #ffffff;
  --mascot-collar-stitch: #d9845e;
  --mascot-brass: #e8b84a;
  --mascot-brass-dark: #c9952e;
  --mascot-dial: #fbf4e8;
  --mascot-needle: #c9452f;
  --mascot-lamp: #4a4a4a;
  --mascot-lamp-light: #ffe08a;
  --mascot-pack: #9a6b3f;
  --mascot-pack-shade: #7a5230;
  --weather-rain: #6aa6c8;
  --coat-ginger: #e08a3c;
  --coat-ginger-shade: #b96a26;
  --coat-black: #3a3330;
  --coat-black-shade: #231e1c;
  --coat-white: #f4eee4;
  --coat-white-shade: #d9cfbf;
  --coat-brown: #8a5a3b;
  --coat-brown-shade: #6a4229;
  --coat-grey: #9a9a9e;
  --coat-grey-shade: #77777c;
  --coat-cream: #f6e7cf;
  --coat-cream-shade: #dcc6a2;

  /* Merged from feat/ui-polish (D-019 cancelled): surfaces & tactile depth */
  --bg-surface-glass: rgba(255, 253, 249, 0.92);
  --bg-elevated-subtle: rgba(234, 224, 210, 0.55);
  --card-shadow: 0 3px 0 rgba(168, 142, 82, 0.22), 0 10px 24px rgba(31, 41, 34, 0.12);
  --card-depth: rgba(168, 142, 82, 0.4);
  --color-accent-top: #e8825a;
  --color-accent-edge: #f2a582;
  --color-accent-halo: rgba(217, 107, 67, 0.28);
  --color-primary-depth: #283d2e;
  --primary-btn-shadow: 0 3px 0 #283d2e, 0 6px 14px rgba(31, 41, 34, 0.16);
  --fab-shadow-pressed: 0 1px 3px rgba(40, 32, 20, 0.12);
  --icon-ink: #2f4a37;
  --status-success-soft: rgba(22, 163, 74, 0.14);

  /* Bottom sheet: translucent gradient over the map (owner choice) */
  --sheet-bg-glass: linear-gradient(180deg, rgba(243, 237, 224, 0.5) 0%, rgba(243, 237, 224, 0.94) 32%, #f3ede0 100%);
  --sheet-elevation: 0 -10px 30px rgba(31, 41, 34, 0.14);
  --sheet-handle: #d6cbb5;

  /* Mascot speech bubble & +1 cell badge (prototype.html Layer 4) */
  --bubble-bg: linear-gradient(180deg, #ffffff 0%, #faf6ee 100%);
  --bubble-tail: #faf6ee;
  --bubble-text: #231f1b;
  --bubble-shadow: 0 4px 12px rgba(45, 36, 24, 0.14), 0 1px 2px rgba(45, 36, 24, 0.08);
  --badge-bg: rgba(54, 73, 43, 0.84);
  --badge-border: rgba(255, 255, 255, 0.22);
  --badge-shadow: 0 3px 8px rgba(28, 38, 22, 0.22);

  /* Profile & passport (ported from feat/ui-polish, re-tinted on the design-merge canvas) */
  --bg-header: #3d5a45;
  --on-header: #fffdf9;
  --stamp-ink-1: #2b6540;
  --stamp-ink-2: #3c5f9c;
  --stamp-ink-3: #d96b43;
  --wood: #c08c56;
  --wood-dark: #8d5f35;
  --wood-back: #e2bd8c;
  --weather-frost: #8fbbd6;

  /* HUD icons & live-walk accents (prototype.html Layer 5) */
  --rec-dot: #1bb13f;
  --rec-dot-glow: rgba(27, 177, 63, 0.45);
  --fab-icon: #463527;
  --fab-icon-cut: #faf6ee;
  --toilet-water: #1686d9;
  --toilet-water-hi: #8fd1ff;
  --toilet-poop: #e67824;
  --metric-pin: #255736;
  --metric-clock: #493626;
  --metric-icon-cut: #faf8f3;
  --cell-gold: #e8ae35;
  --cell-gold-top: #f6c854;
  --cell-gold-stroke: #f8d678;
  --sheet-stroke: #ffffff;
  --tree-leaf: #2d6e3e;
  --tree-leaf-dark: #265e34;
  --tree-leaf-light: #377d49;
  --tree-trunk: #6e4726;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-canvas: #18221b;
    --bg-surface: #233329;
    --bg-elevated: #2e4235;
    --sheet-bg: #071f23;
    --sheet-border: #1a3f43;
    --sheet-shadow: rgba(0, 0, 0, 0.45);
    --card-border: rgba(163, 181, 168, 0.14);

    --color-primary: #689f77;
    --color-accent: #e87a52;
    --color-accent-depth: #b85633;
    --color-glow: #f5b041;
    --cta-walk-bg: linear-gradient(180deg, #479e7f 0%, #348a6c 100%);
    --cta-walk-border: #297056;
    --cta-walk-depth: #1d5943;
    --cta-walk-shadow: 0 4px 0 #1d5943, 0 8px 22px rgba(0, 0, 0, 0.48);

    --text-primary: #f3f6f4;
    --text-secondary: #a3b5a8;
    --text-muted: #8faeb0;
    --status-danger: #f87171;
    --status-success: #4ade80;
    --status-ribbon: #facc15;
    --on-primary: #18221b;

    --metrics-card-bg: linear-gradient(180deg, #0e282c 0%, #0a2024 100%);
    --metrics-card-border: #244b4e;
    --metrics-divider: #1b3b3e;
    --metrics-card-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    --hud-pill-bg: rgba(14, 38, 42, 0.86);
    --hud-pill-border: rgba(72, 128, 128, 0.42);
    --hud-pill-shadow: 0 4px 16px rgba(0, 0, 0, 0.42);
    --fab-bg: linear-gradient(180deg, rgba(20, 48, 52, 0.92) 0%, rgba(12, 32, 36, 0.95) 100%);
    --fab-border: rgba(82, 145, 145, 0.42);
    --fab-shadow: 0 5px 16px rgba(0, 0, 0, 0.48);

    --route-core: #ffa928;
    --route-glow: #ffa019;
    --route-dash: #fffdf7;
    --fog: rgba(18, 26, 21, 0.82);
    --hex-frontier-start: rgba(22, 44, 52, 0.68);
    --hex-frontier-mid: rgba(36, 68, 74, 0.38);
    --hex-frontier-end: rgba(48, 96, 92, 0.12);
    --hex-mid-start: rgba(16, 34, 44, 0.8);
    --hex-mid-end: rgba(38, 68, 74, 0.44);
    --hex-outer-start: rgba(12, 26, 36, 0.88);
    --hex-outer-end: rgba(22, 42, 54, 0.74);
    --hex-stroke-outer: rgba(120, 178, 188, 0.45);
    --hex-stroke-inner: rgba(130, 210, 215, 0.35);
    --hex-lit-rim: #d4fcff;

    /* design-merge map, Layers 2–4: rims, treasure, lock, footprints, vignette and cloud shadows */
    --hex-lit-rim-mid: rgba(132, 205, 214, 0.62);
    --hex-lit-rim-end: rgba(46, 82, 88, 0.1);
    --hex-rim-glow: rgba(150, 240, 248, 0.48);
    --hex-inner-rim: rgba(158, 196, 202, 0.12);
    --hex-bone-start: rgba(94, 99, 56, 0.84);
    --hex-bone-mid: rgba(60, 70, 43, 0.76);
    --hex-bone-end: rgba(34, 48, 34, 0.72);
    --hex-bone-stroke: rgba(242, 202, 107, 0.92);
    --hex-bone-rim: rgba(255, 230, 153, 0.38);
    --hex-bone-glow: rgba(245, 196, 81, 0.55);
    --hex-bone-icon: #fce29c;
    --hex-bone-icon-stroke: #9e7b26;
    --hex-lock-ink: rgba(142, 162, 166, 0.46);
    --hex-lock-dot: #18282e;
    --route-footprint: rgba(255, 226, 122, 0.88);
    --vignette-inset: inset 0 0 48px 12px rgba(3, 10, 14, 0.78);
    --cloud-shadow-dense: drop-shadow(0 10px 18px rgba(4, 12, 14, 0.52));
    --cloud-shadow-wisp: drop-shadow(0 6px 12px rgba(4, 12, 14, 0.36));
    --mascot-drop: rgba(40, 30, 18, 0.28);
    --vignette-edge: radial-gradient(
      ellipse 74% 70% at 50% 44%,
      rgba(6, 18, 22, 0) 48%,
      rgba(6, 18, 24, 0.46) 68%,
      rgba(4, 14, 20, 0.84) 86%,
      rgba(3, 10, 15, 0.97) 100%
    );

    --map-land: #223127;
    --map-park: #1e3526;
    --map-street: #2e4235;
    --map-water: #1b2e33;

    /* Merged from feat/ui-polish (D-019 cancelled): surfaces & tactile depth */
    --bg-surface-glass: rgba(35, 51, 41, 0.9);
    --bg-elevated-subtle: rgba(46, 66, 53, 0.6);
    --card-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.42);
    --card-depth: rgba(0, 0, 0, 0.45);
    --color-accent-top: #f28d66;
    --color-accent-edge: #f7a98a;
    --color-accent-halo: rgba(232, 122, 82, 0.3);
    --color-primary-depth: #3d6649;
    --primary-btn-shadow: 0 3px 0 #3d6649, 0 6px 14px rgba(0, 0, 0, 0.4);
    --fab-shadow-pressed: 0 2px 6px rgba(0, 0, 0, 0.4);
    --icon-ink: #e6efe8;
    --status-success-soft: rgba(74, 222, 128, 0.16);

    /* Bottom sheet: translucent gradient over the map (owner choice) */
    --sheet-bg-glass: linear-gradient(180deg, rgba(7, 31, 35, 0.5) 0%, rgba(7, 31, 35, 0.94) 32%, #071f23 100%);
    --sheet-elevation: 0 -10px 30px rgba(0, 0, 0, 0.45);
    --sheet-handle: #2b5559;

    /* Mascot speech bubble & +1 cell badge (prototype.html Layer 4) */
    --bubble-bg: linear-gradient(180deg, #fffdf8 0%, #f7f2e6 100%);
    --bubble-tail: #f7f2e6;
    --bubble-text: #231f1b;
    --bubble-shadow: 0 6px 18px rgba(0, 0, 0, 0.42), 0 0 12px rgba(255, 245, 215, 0.22);
    --badge-bg: rgba(29, 44, 32, 0.88);
    --badge-border: rgba(242, 194, 86, 0.72);
    --badge-shadow: 0 0 14px rgba(245, 180, 55, 0.48), inset 0 0 6px rgba(245, 180, 55, 0.22);

    /* Profile & passport (ported from feat/ui-polish, re-tinted on the design-merge canvas) */
    --bg-header: #0e282c;
    --on-header: #f3f6f4;
    --stamp-ink-1: #86c296;
    --stamp-ink-2: #93b3ea;
    --stamp-ink-3: #f08d70;
    --wood: #7a5332;
    --wood-dark: #553821;
    --wood-back: #5f4128;
    --weather-frost: #8fbbd6;

    /* HUD icons & live-walk accents (prototype.html Layer 5) */
    --rec-dot: #36d66e;
    --rec-dot-glow: rgba(54, 214, 110, 0.65);
    --fab-icon: #f1f5f4;
    --fab-icon-cut: #152e32;
    --toilet-water: #2997e8;
    --toilet-water-hi: #a6dcff;
    --toilet-poop: #ec822e;
    --metric-pin: #f3f6f4;
    --metric-clock: #efe4cc;
    --metric-icon-cut: #0e282c;
    --cell-gold: #ebb43b;
    --cell-gold-top: #f8cd64;
    --cell-gold-stroke: #fce08b;
    --sheet-stroke: rgba(60, 107, 104, 0.55);
    --tree-leaf: #2d6e3e;
    --tree-leaf-dark: #265e34;
    --tree-leaf-light: #377d49;
    --tree-trunk: #6e4726;
    color-scheme: dark;
  }
}

:root[data-theme='dark'],
[data-theme='dark'] {
  --bg-canvas: #18221b;
  --bg-surface: #233329;
  --bg-elevated: #2e4235;
  --sheet-bg: #071f23;
  --sheet-border: #1a3f43;
  --sheet-shadow: rgba(0, 0, 0, 0.45);
  --card-border: rgba(163, 181, 168, 0.14);

  --color-primary: #689f77;
  --color-accent: #e87a52;
  --color-accent-depth: #b85633;
  --color-glow: #f5b041;
  --cta-walk-bg: linear-gradient(180deg, #479e7f 0%, #348a6c 100%);
  --cta-walk-border: #297056;
  --cta-walk-depth: #1d5943;
  --cta-walk-shadow: 0 4px 0 #1d5943, 0 8px 22px rgba(0, 0, 0, 0.48);

  --text-primary: #f3f6f4;
  --text-secondary: #a3b5a8;
  --text-muted: #8faeb0;
  --status-danger: #f87171;
  --status-success: #4ade80;
  --status-ribbon: #facc15;
  --on-primary: #18221b;

  --metrics-card-bg: linear-gradient(180deg, #0e282c 0%, #0a2024 100%);
  --metrics-card-border: #244b4e;
  --metrics-divider: #1b3b3e;
  --metrics-card-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  --hud-pill-bg: rgba(14, 38, 42, 0.86);
  --hud-pill-border: rgba(72, 128, 128, 0.42);
  --hud-pill-shadow: 0 4px 16px rgba(0, 0, 0, 0.42);
  --fab-bg: linear-gradient(180deg, rgba(20, 48, 52, 0.92) 0%, rgba(12, 32, 36, 0.95) 100%);
  --fab-border: rgba(82, 145, 145, 0.42);
  --fab-shadow: 0 5px 16px rgba(0, 0, 0, 0.48);

  --route-core: #ffa928;
  --route-glow: #ffa019;
  --route-dash: #fffdf7;
  --fog: rgba(18, 26, 21, 0.82);
  --hex-frontier-start: rgba(22, 44, 52, 0.68);
  --hex-frontier-mid: rgba(36, 68, 74, 0.38);
  --hex-frontier-end: rgba(48, 96, 92, 0.12);
  --hex-mid-start: rgba(16, 34, 44, 0.8);
  --hex-mid-end: rgba(38, 68, 74, 0.44);
  --hex-outer-start: rgba(12, 26, 36, 0.88);
  --hex-outer-end: rgba(22, 42, 54, 0.74);
  --hex-stroke-outer: rgba(120, 178, 188, 0.45);
  --hex-stroke-inner: rgba(130, 210, 215, 0.35);
  --hex-lit-rim: #d4fcff;

  /* design-merge map, Layers 2–4: rims, treasure, lock, footprints, vignette and cloud shadows */
  --hex-lit-rim-mid: rgba(132, 205, 214, 0.62);
  --hex-lit-rim-end: rgba(46, 82, 88, 0.1);
  --hex-rim-glow: rgba(150, 240, 248, 0.48);
  --hex-inner-rim: rgba(158, 196, 202, 0.12);
  --hex-bone-start: rgba(94, 99, 56, 0.84);
  --hex-bone-mid: rgba(60, 70, 43, 0.76);
  --hex-bone-end: rgba(34, 48, 34, 0.72);
  --hex-bone-stroke: rgba(242, 202, 107, 0.92);
  --hex-bone-rim: rgba(255, 230, 153, 0.38);
  --hex-bone-glow: rgba(245, 196, 81, 0.55);
  --hex-bone-icon: #fce29c;
  --hex-bone-icon-stroke: #9e7b26;
  --hex-lock-ink: rgba(142, 162, 166, 0.46);
  --hex-lock-dot: #18282e;
  --route-footprint: rgba(255, 226, 122, 0.88);
  --vignette-inset: inset 0 0 48px 12px rgba(3, 10, 14, 0.78);
  --cloud-shadow-dense: drop-shadow(0 10px 18px rgba(4, 12, 14, 0.52));
  --cloud-shadow-wisp: drop-shadow(0 6px 12px rgba(4, 12, 14, 0.36));
  --mascot-drop: rgba(40, 30, 18, 0.28);
  --vignette-edge: radial-gradient(
    ellipse 74% 70% at 50% 44%,
    rgba(6, 18, 22, 0) 48%,
    rgba(6, 18, 24, 0.46) 68%,
    rgba(4, 14, 20, 0.84) 86%,
    rgba(3, 10, 15, 0.97) 100%
  );

  --map-land: #223127;
  --map-park: #1e3526;
  --map-street: #2e4235;
  --map-water: #1b2e33;

  /* Merged from feat/ui-polish (D-019 cancelled): surfaces & tactile depth */
  --bg-surface-glass: rgba(35, 51, 41, 0.9);
  --bg-elevated-subtle: rgba(46, 66, 53, 0.6);
  --card-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.42);
  --card-depth: rgba(0, 0, 0, 0.45);
  --color-accent-top: #f28d66;
  --color-accent-edge: #f7a98a;
  --color-accent-halo: rgba(232, 122, 82, 0.3);
  --color-primary-depth: #3d6649;
  --primary-btn-shadow: 0 3px 0 #3d6649, 0 6px 14px rgba(0, 0, 0, 0.4);
  --fab-shadow-pressed: 0 2px 6px rgba(0, 0, 0, 0.4);
  --icon-ink: #e6efe8;
  --status-success-soft: rgba(74, 222, 128, 0.16);

  /* Bottom sheet: translucent gradient over the map (owner choice) */
  --sheet-bg-glass: linear-gradient(180deg, rgba(7, 31, 35, 0.5) 0%, rgba(7, 31, 35, 0.94) 32%, #071f23 100%);
  --sheet-elevation: 0 -10px 30px rgba(0, 0, 0, 0.45);
  --sheet-handle: #2b5559;

  /* Mascot speech bubble & +1 cell badge (prototype.html Layer 4) */
  --bubble-bg: linear-gradient(180deg, #fffdf8 0%, #f7f2e6 100%);
  --bubble-tail: #f7f2e6;
  --bubble-text: #231f1b;
  --bubble-shadow: 0 6px 18px rgba(0, 0, 0, 0.42), 0 0 12px rgba(255, 245, 215, 0.22);
  --badge-bg: rgba(29, 44, 32, 0.88);
  --badge-border: rgba(242, 194, 86, 0.72);
  --badge-shadow: 0 0 14px rgba(245, 180, 55, 0.48), inset 0 0 6px rgba(245, 180, 55, 0.22);

  /* Profile & passport (ported from feat/ui-polish, re-tinted on the design-merge canvas) */
  --bg-header: #0e282c;
  --on-header: #f3f6f4;
  --stamp-ink-1: #86c296;
  --stamp-ink-2: #93b3ea;
  --stamp-ink-3: #f08d70;
  --wood: #7a5332;
  --wood-dark: #553821;
  --wood-back: #5f4128;
  --weather-frost: #8fbbd6;

  /* HUD icons & live-walk accents (prototype.html Layer 5) */
  --rec-dot: #36d66e;
  --rec-dot-glow: rgba(54, 214, 110, 0.65);
  --fab-icon: #f1f5f4;
  --fab-icon-cut: #152e32;
  --toilet-water: #2997e8;
  --toilet-water-hi: #a6dcff;
  --toilet-poop: #ec822e;
  --metric-pin: #f3f6f4;
  --metric-clock: #efe4cc;
  --metric-icon-cut: #0e282c;
  --cell-gold: #ebb43b;
  --cell-gold-top: #f8cd64;
  --cell-gold-stroke: #fce08b;
  --sheet-stroke: rgba(60, 107, 104, 0.55);
  --tree-leaf: #2d6e3e;
  --tree-leaf-dark: #265e34;
  --tree-leaf-light: #377d49;
  --tree-trunk: #6e4726;
  color-scheme: dark;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
}

h1,
h2,
h3,
button {
  font-family: var(--font-display);
}

/* Motion: mascot idle bob (home), fog cell unlock pop and the floating "+1" badge (useHexUnlock). */
@keyframes mascot-idle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes hex-pop-clear {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  45% {
    transform: scale(1.12);
    opacity: 0.85;
  }
  100% {
    transform: scale(0.6);
    opacity: 0;
  }
}

@keyframes float-up-fade {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateY(-34px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}