/* tokens.css — system designu (redesign 2026-06). Look&feel = apple.com.
   Ładowany PRZED base.css i app.css. Definiuje tokeny + most do starych zmiennych
   `--pico-*`, na których jadą komponenty w app.css (zero Pico, jeden język). */

:root {
  /* Typografia — font systemowy (SF Pro na sprzęcie Michała), zero web-fontów. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Skala typografii */
  --fs-display: clamp(2.5rem, 6vw, 3.5rem);
  --fs-h1: clamp(2rem, 4.5vw, 2.75rem);
  --fs-h2: 1.75rem;
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;   /* 17px */
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --tracking-tight: -0.022em;

  /* Kolor — jasny motyw, powściągliwy */
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --bg-card: #ffffff;
  --ink: #1d1d1f;
  --ink-muted: #6e6e73;
  --hairline: #e4e4e7;

  /* Jeden akcent — zieleń emblematu WC2026 (#006836) */
  --accent: #006836;
  --accent-hover: #00532a;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 104, 54, 0.08);
  --accent-soft-2: rgba(0, 104, 54, 0.14);

  /* Status (kropki, nie tła) */
  --ok: #1f8a3e;
  --warn: #b8860b;
  --bad: #c0392b;

  /* Przestrzeń */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Promień */
  --r-card: 18px;
  --r-md: 12px;
  --r-pill: 999px;

  /* Cień (miękki) */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 6px 16px rgba(0, 0, 0, 0.07), 0 18px 44px rgba(0, 0, 0, 0.10);

  /* Kolumny */
  --col-read: 720px;
  --col-wide: 1040px;

  /* ===== Most do starych zmiennych Pico (app.css jedzie na tokenach) ===== */
  --pico-primary: var(--accent);
  --pico-primary-hover: var(--accent-hover);
  --pico-primary-inverse: var(--accent-ink);
  --pico-primary-background: var(--accent);
  --pico-color: var(--ink);
  --pico-muted-color: var(--ink-muted);
  --pico-muted-border-color: var(--hairline);
  --pico-border-radius: var(--r-md);
  --pico-card-background-color: var(--bg-card);
  --pico-card-sectioning-background-color: var(--bg-soft);
  --pico-card-sectionning-background-color: var(--bg-soft); /* literówka w app.css */
  --pico-font-family-monospace: var(--font-mono);
  --pico-del-color: var(--bad);

  --pulse-meta-color: var(--ink-muted);
}