/* Baltz Street: Design tokens (light and dark palettes), type and base element styles. */

/* Layout: a full-bleed illustrated block (street runs top-to-bottom on phones, left-to-right on desktop),
   a draggable bottom sheet on phones, a floating left panel at 900px and up. */
:root {
  --nudge: 0.1em;
  --ground: #e7ecf1;
  --paper: #ffffff;
  --paper-2: #f0f3f7;
  --ink: #15202d;
  --muted: #5a6878;
  --line: #d4dbe3;
  --asphalt: #3a4551;
  --lane: #eef1f4;
  --curb: #d6dde4;
  --curb-edge: #b6c1cc;
  --lot: #bccbf3;
  --lot-edge: #15202d;
  --lot-empty: #f8fafc;
  --lot-empty-edge: #94a2b2;
  --door-default: #22324f;
  --accent: #1e3ecc;
  --accent-ink: #ffffff;
  --chk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --accent-soft: rgba(30, 62, 204, 0.1);
  --mark: #ffe14d;
  --mark-ink: #15202d;
  --awaybg: #2f3b49;
  --danger: #c2412d;
  --danger-ink: #ffffff;
  --knob: #e3c46b;
  --face: #46566a;
  --face-ink: #ffffff;
  --plaque: #ffffff;
  --plaque-ink: #15202d;
  --good: #1e7a55;
  --shadow: 0 18px 40px rgba(16, 28, 44, 0.16), 0 2px 8px rgba(16, 28, 44, 0.08);
  --shadow-sm: 0 2px 10px rgba(16, 28, 44, 0.12);
  --display: "Overpass", system-ui, sans-serif;
  --body: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Overpass", system-ui, sans-serif;
  color-scheme: light;
}

/* dark only when someone picks it (the theme switch in the avatar menu); light is the default */
:root[data-theme="dark"] {
  --ground: #0e141b;
  --paper: #17202a;
  --paper-2: #1f2a36;
  --ink: #e3e9f0;
  --muted: #8e9cab;
  --line: #2b3744;
  --asphalt: #252f3a;
  --lane: #7d8997;
  --curb: #19222c;
  --curb-edge: #2f3b48;
  --lot: #2c3d6e;
  --lot-edge: #7f95da;
  --lot-empty: #131a22;
  --lot-empty-edge: #3f4c5b;
  --door-default: #55688c;
  --accent: #93a8ff;
  --accent-ink: #0b1230;
  --chk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230B1230' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --accent-soft: rgba(147, 168, 255, 0.16);
  --mark: #e8cb3e;
  --mark-ink: #15202d;
  --awaybg: var(--ink);
  --danger: #c2412d;
  --danger-ink: #ffffff;
  --knob: #e3c46b;
  --face: #4b5b70;
  --face-ink: #f2f5f8;
  --plaque: #e3e9f0;
  --plaque-ink: #15202d;
  --good: #5fc898;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* Grid: every size, gap and position is a multiple of 4px. Type pairs: 12/16, 14/20, 16/24, 20/28, 40/40, 52/48.
   Exempt on purpose: 1–2px strokes, shadows, motion, and the tiny illustration details inside cars and doors. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}