/* ============================================================
   Design tokens — the brand system for "Korty w Polsce".

   KLIMAT (jedno zdanie, pod nie dobrany każdy token):
   "popołudnie na korcie ziemnym: kredowe linie na ceglastej mączce,
    granat siatki, spokojne światło — rzeczowo i ciepło".

   Akcent 1 = ceglasta mączka (--accent) → wypełnienia, CTA, chipsy,
   słupki gęstości. Tekst NA ceglastym jest BIAŁY (--accent-ink).
   Akcent 2 = granat siatki i ogrodzenia (--accent-2) → gradient w H1,
   naprzemienne tinty kafli, hover regionów mapy.

   ŚWIADOMIE NIE: ciemne tło + limonka. To sygnatura boiskawpolsce.pl
   (patrz ../app-layout/docs/09-oryginalnosc.md — kolizja palet).

   Kontrasty pilnuje CONTRAST GUARD w pipeline/build.mjs — build się
   wywala poniżej 4.5:1, więc ta lista nie może się zdezaktualizować.
   ============================================================ */
:root {
  /* surfaces — ciepły kredowy papier, jak wapno linii kortu */
  --bg: #faf8f5;
  --bg-2: #efe9e1;                  /* wyraźnie ciemniejsze — bandy muszą być widoczne */
  --panel: rgba(255, 255, 255, .74);
  --panel-2: rgba(255, 255, 255, .93);

  /* ink — ciepła prawie-czerń, nie neutralny grafit */
  --ink: #241a15;
  --dim: rgba(36, 26, 21, .74);
  --faint: rgba(36, 26, 21, .66);   /* .62 nie przechodziło na --bg-2 (4.49:1) */
  --line: rgba(36, 26, 21, .13);
  --popup: #ffffff;                 /* solidne tło natywnych popupów (opcje select) */
  --chalk: #16100c;                 /* headlines */

  /* ---- akcent 1: CEGLASTY (mączka kortu ziemnego) ---- */
  --accent: #b3462f;                /* wypełnienia: chipsy on, CTA, słupki */
  --accent-soft: rgba(179, 70, 47, .16);
  --accent-ink: #ffffff;            /* tekst NA ceglastym — biały */
  --accent-deep: #8f3524;           /* ceglasty jako TEKST na jasnym tle */

  /* ---- akcent 2: GRANAT (siatka, ogrodzenie) ---- */
  --accent-2: #17435e;
  --accent-2-soft: rgba(23, 67, 94, .12);
  --accent-2-deep: #0f2f45;

  /* gradient dekoracyjny ceglasty → granat: <em> w H1 (background-clip:text),
     paski sekcji. NIE do wypełnień pod tekstem — biały --accent-ink zniknąłby
     na jaśniejszym końcu, gdyby ktoś ten gradient tam wstawił. */
  --grad: linear-gradient(118deg, var(--accent) 0%, #8d4a3e 45%, var(--accent-2) 100%);
  /* gradient CTA: cały w rodzinie ceglastej, więc biały tekst czyta się
     na całej szerokości przycisku */
  --grad-cta: linear-gradient(118deg, #c1503a 0%, var(--accent) 50%, #97381f 100%);

  /* poświata za hero: ciepły reflektor z lewej, granatowy chłód z prawej */
  --halo: radial-gradient(620px 380px at 10% -4%, var(--accent-soft), transparent 66%),
          radial-gradient(560px 340px at 92% 14%, var(--accent-2-soft), transparent 66%);

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

  /* type — mirror site.config.json brand fonts */
  --f-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: ui-monospace, 'Cascadia Code', monospace;

  /* geometry — trochę ciaśniejsze promienie niż domyślne: sportowo, nie miękko */
  --r-sm: 8px;
  --r-md: 13px;
  --r-lg: 20px;
  --shadow: 0 8px 30px rgba(22, 16, 12, .09);
  --maxw: 1120px;
}

/* minimal reset (components live in style.css) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* color-scheme keeps native UI (select popups, scrollbars) on the LIGHT palette —
   without it, Windows/Chrome in dark mode paints dropdowns dark for a flash */
/* overflow-x: clip (nie hidden!) — poświata hero (.hero::before, inset -40vw)
   wystaje poza viewport i nadmuchiwała scrollWidth dokumentu. clip przycina,
   ale NIE tworzy kontenera przewijania, więc sticky header działa dalej. */
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; }
/* fokus zawsze widoczny i akcentowy — klawiatura równa myszce */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }