/* spruce design tokens — RETRO PIXEL-GAME skin, CIVIC edition.
   Deep forest-green chrome (trust/stewardship) + warm parchment panels, with
   bright semantic status pops (leaf/coral/gold/sky/indigo) for the game energy.
   Chunky beveled panels, pixel fonts. One fixed look (no dark mode). */

/* Pixelify Sans, self-hosted (variable weight 400-700; was a render-blocking
   cross-origin Google Fonts stylesheet — now precached with the shell and
   available offline). Files fetched from fonts.gstatic.com v3. */
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/pixelify-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/pixelify-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* fonts — Pixelify Sans: pixel look, actually legible */
  --font-display: "Pixelify Sans", monospace;
  --font: "Pixelify Sans", monospace;

  /* palette — forest-green civic chrome + warm parchment */
  --bg:        #1e5641;   /* deep forest green — header/chrome */
  --bg-2:      #2a6d53;   /* lighter forest — primary action */
  --surface:   #f5ecd6;   /* warm parchment panel */
  --surface-2: #e8d7b2;   /* deeper parchment */
  --ink:       #1b382c;   /* dark pine text/borders */
  --ink-soft:  #526b5f;   /* muted pine */
  --on-dark:      #f4edda; /* cream text on forest chrome */
  --on-dark-soft: #bcd3c1; /* muted sage-cream on forest */

  /* status (map + UI) — semantic, mutually distinct, playful */
  --status-unvisited: #5c7d87;  /* muted steel-teal — untouched */
  --status-clean:     #4fb96a;  /* fresh leaf green — clean */
  --status-flagged:   #ef6a4d;  /* coral — needs cleaning */
  --status-addressed: #f4b13a;  /* honey gold — pending */
  --status-done:      #2f9be0;  /* bright sky blue — done */
  --you:              #6a5cf0;  /* electric indigo — you */

  /* pixel bevel */
  --hi: rgba(255, 255, 255, .55);
  --lo: rgba(0, 0, 0, .28);
  --border-dark: #1b382c;

  /* standard, recognizable neighborhood map (CARTO Voyager) — no heavy filter,
     just a whisper of warmth so it sits with the palette */
  --tile-filter: saturate(1.05);
  --map-bg: #e7eae2;

  /* spacing / radii (radii ~0 for pixel sharpness) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0;

  /* motion */
  --dur-fast: 90ms; --dur: 160ms; --dur-slow: 420ms;
  --ease: steps(3, end);                 /* steppy = pixel movement */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}