/* =========================================================================
   SafeWalkr — shared design tokens (landing + app)
   One light system built from street hardware: paper ground the colour of
   fresh thermoplastic, asphalt kept for the crosswalk bands and framed
   specimens, one accent colour switchable at runtime via html[data-accent].
   ========================================================================= */

:root {
  /* Ground + surfaces (light) */
  --paper: #f6f7f5;
  --surface: #ffffff;
  --ink: #171b1c;
  --ink-soft: #3e4745;
  --ink-quiet: #64706d;
  --line: #e2e6e3;
  --line-soft: #edf0ed;

  /* Street hardware, kept from the original world */
  --asphalt: #16191a;
  --asphalt-2: #1e2324;
  --asphalt-line: #2a3031;
  --thermo: #f2f4f0;
  --thermo-dim: #d9ded6;
  --ink-on-asphalt: #ccd4d1;
  --ink-on-asphalt-quiet: #9aa5a2;

  /* Fixed semantic colours (never follow the accent) */
  --gold: #ffb500;          /* the school pin */
  --gold-deep: #8f6400;
  --hazard: #c2401c;        /* missing sidewalk */
  --ok: #2f9e75;
  --warn: #e3a72f;
  --bad: #b12a34;

  /* Shape + motion */
  --radius-s: 9px;
  --radius: 12px;
  --radius-lg: 16px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-1: 0 1px 2px rgba(20, 28, 26, 0.05), 0 8px 24px rgba(20, 28, 26, 0.07);
  --shadow-2: 0 2px 6px rgba(20, 28, 26, 0.09), 0 18px 44px rgba(20, 28, 26, 0.14);

  /* Type */
  --font-display: "Overpass", "Public Sans", system-ui, sans-serif;
  --font-text: "Public Sans", system-ui, -apple-system, sans-serif;

  /* Asphalt aggregate: fine generated noise. Dark variant for asphalt
     surfaces, light variant blended onto paper sections. */
  --grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --grit-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");

  /* Accent — default: deep teal (FCPS). Overridden by html[data-accent]. */
  --accent: #00677f;          /* text/border-safe on light ground */
  --accent-strong: #004f61;
  --accent-fill: #00677f;     /* solid fills: primary buttons, panels */
  --on-accent: #f3fafb;       /* text on --accent-fill */
  --accent-wash: #e8f1f4;     /* tinted backgrounds */
  --accent-wash-line: #cfe2e8;
  --accent-ring: rgba(0, 103, 127, 0.3);
}

html[data-accent="gold"] {
  --accent: #8f6400;
  --accent-strong: #6e4d00;
  --accent-fill: #ffb500;
  --on-accent: #241a00;
  --accent-wash: #faf1d8;
  --accent-wash-line: #ecdcae;
  --accent-ring: rgba(180, 130, 0, 0.35);
}

html[data-accent="moss"] {
  --accent: #57660f;
  --accent-strong: #414d0a;
  --accent-fill: #57660f;
  --on-accent: #f6f9ea;
  --accent-wash: #eef1dd;
  --accent-wash-line: #dbe1bd;
  --accent-ring: rgba(87, 102, 15, 0.32);
}

/* ------------------------------------------------------------------ picker
   Temporary design-review control injected by theme.js. Remove theme.js's
   ACCENT_PICKER flag (or the script tag) to ship without it. */

.accentPicker {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-text);
}

.accentPicker__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding-left: 2px;
}

.accentPicker__swatch {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s;
}

.accentPicker__swatch:hover {
  transform: scale(1.12);
}

.accentPicker__swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.accentPicker__swatch.isActive {
  box-shadow: 0 0 0 2px var(--ink);
}

.accentPicker__swatch--teal { background: #00677f; }
.accentPicker__swatch--gold { background: #ffb500; }
.accentPicker__swatch--moss { background: #57660f; }