/* ============================================================
   Design tokens — Zniżki KDR.
   KLIMAT: „paragon i pieczątka rabatu: papierowe ecru w tle,
   butelkowa zieleń oszczędności (akcent 1) i malinowy stempel
   (akcent 2), perforacje i liczby jak na kasie”.
   Ecru = papier paragonu (ciepłe, ale bez beżu psispacera),
   zieleń = zaoszczędzone pieniądze, malina = tusz pieczątki rabatu,
   mono do liczb = wydruk z kasy. Wszystko inne liczy się z tych.
   ============================================================ */
:root {
  /* surfaces */
  --bg: #f7f2e7;
  --bg-2: #ebe1cc;   /* wyraźnie ciemniejsze od --bg — bandy mają być WIDOCZNE */
  --panel: rgba(255, 253, 248, .78);
  --panel-2: rgba(255, 253, 248, .95);

  /* ink — dim/faint alphas are the LOWEST that pass 4.5:1 contrast on
     --bg/--bg-2/white; when changing surfaces, re-check both */
  --ink: #231d15;
  --dim: rgba(35, 29, 21, .76);
  --faint: rgba(35, 29, 21, .68);
  --line: rgba(35, 29, 21, .14);
  --chalk: #17120b;                 /* headlines */
  --popup: #fffdf8;                 /* solid bg for native popups (select options) */

  /* accents — ADAPT: color is a FEATURE of these layouts, not decoration.
     Always define TWO hues (primary + secondary) — gradients, tinted washes
     and colored data (type colors) are built from them. Mirror brand.accent. */
  --accent: #1d5b3f;
  --accent-soft: rgba(29, 91, 63, .13);
  --accent-ink: #ffffff;            /* text ON accent fills */
  --accent-deep: #174a33;           /* accent as text on light bg */
  --accent-2: #be1e5a;              /* secondary hue (gradients, highlights) */
  --accent-2-soft: rgba(190, 30, 90, .11);
  --accent-2-deep: #971546;
  /* two gradients, two roles — do NOT merge them:
     --grad     decorative (clip-text headline, halo) — full two-hue range ok
     --grad-cta fills under --accent-ink text — stay in ONE hue family so the
                text stays readable across the whole button */
  --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-cta: linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%);
  /* soft radial washes behind the hero — the "inviting" glow */
  --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 — ADAPT: mirror site.config.json brand fonts */
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* geometry */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow: 0 8px 28px rgba(60, 42, 18, .09);
  --maxw: 1120px;
}

/* DARK VARIANT: this file IS the theme — a dark app only swaps tokens here:
   invert surfaces (--bg ~#0e1116, --bg-2 lighter, panels = translucent white
   2-6%), ink → light grays, --popup dark, color-scheme: dark, and bump soft
   alphas (~.2) so tints stay visible. style.css needs no changes. Leaflet
   popups stay light (library CSS) — acceptable. Re-check all contrasts. */

/* 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 page palette —
   without it, Windows/Chrome in dark mode paints dropdowns dark for a flash.
   Dark variant: switch to `dark`. */
/* overflow-x: CLIP, not hidden — hidden creates a scroll container and kills
   position:sticky; clip only cuts painting (hero halo bleeds past viewport) */
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; }