/* ============================================================
   Design tokens — Gdzie naładować.
   Klimat: „nocna trasa i zielone światło gotowości — kobaltowy granat drogi,
   bursztyn wskaźnika ładowania, dużo światła i czytelne liczby".
   Archetyp home: D „Mapa jako strona" (docs/09). Paleta celowo inna niż
   w kortach (cegła + granat) i w szablonie (morski turkus) i bez neonowej
   limonki, którą rynek EV nadużywa.
   ============================================================ */
:root {
  /* surfaces — chłodny papier */
  --bg: #f5f7fb;
  --bg-2: #e3e9f3;
  --panel: rgba(255, 255, 255, .78);
  --panel-2: rgba(255, 255, 255, .95);

  /* ink — granat zamiast czerni */
  --ink: #0f1a2e;
  --dim: rgba(15, 26, 46, .74);
  --faint: rgba(15, 26, 46, .66);
  --line: rgba(15, 26, 46, .13);
  --chalk: #0a1426;
  --popup: #ffffff;

  /* accents: kobalt (droga) + bursztyn (wskaźnik ładowania) */
  --accent: #1d4ed8;
  --accent-soft: rgba(29, 78, 216, .12);
  --accent-ink: #ffffff;
  --accent-deep: #1e40af;
  --accent-2: #d97706;
  --accent-2-soft: rgba(217, 119, 6, .14);
  --accent-2-deep: #92400e;
  --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-cta: linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%);
  --halo: radial-gradient(560px 340px at 12% 0%, var(--accent-soft), transparent 65%),
          radial-gradient(520px 320px at 88% 12%, var(--accent-2-soft), transparent 65%);

  /* status */
  --ok: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;

  /* type */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: ui-monospace, 'Cascadia Code', monospace;

  /* geometry — ostrzejsze rogi niż w kortach (technicznie, nie sportowo) */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow: 0 10px 34px rgba(10, 20, 38, .10);
  --maxw: 1160px;
}

/* minimal reset (components live in style.css) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; color-scheme: light; overflow-x: clip; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--f-body);
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }