/* TOKENY MARKI - jedyne miejsce, w którym zmieniasz kolory, kroje i rytm strony.
   Zasada z wzorców: sekcja NIE ma własnych kolorów wpisanych na sztywno. Sekcja czyta tokeny.
   Nowa marka = nowy plik z nadpisaniem tych zmiennych (zob. zloz.py --marka marka.json). */
:root{
  /* paleta: tusz / papier / akcent. Ciemna strona domyślnie, jasne sekcje przez .papier */
  --tusz:#0E0E10;          /* tło ciemne */
  --tusz-2:#15151A;        /* panele na ciemnym */
  --papier:#F4F1EB;        /* tło jasnej sekcji */
  --papier-2:#E9E4DA;      /* panele na jasnym */
  --tekst:#F4F1EB;         /* tekst na ciemnym */
  --tekst-2:rgba(244,241,235,.62);
  --tekst-3:rgba(244,241,235,.36);
  --linia:rgba(244,241,235,.12);
  --akcent:#E8FF47;        /* JEDEN kolor akcentu. Nie dodawaj drugiego bez powodu */
  --akcent-tekst:#0E0E10;  /* tekst na akcencie */
  --gradient:linear-gradient(135deg,#E8FF47 0%,#8FFFB0 100%); /* używaj oszczędnie */

  /* kroje: display (nagłówki), body (tekst), mono (etykiety, liczby, kod) */
  --krój-display:'Geist',system-ui,sans-serif;
  --krój-body:'Geist',system-ui,sans-serif;
  --krój-mono:'JetBrains Mono',ui-monospace,monospace;
  --waga-display:800;
  --tracking-display:-.045em;   /* Geist na dużych napisach chodzi ciaśniej */
  --lh-display:1.0;

  /* skala typografii: clamp = responsywna bez media queries */
  --t-hero:clamp(44px,8.5vw,128px);
  --t-h2:clamp(32px,5vw,72px);
  --t-h3:clamp(22px,2.6vw,34px);
  --t-lead:clamp(17px,1.35vw,21px);
  --t-body:clamp(15px,1.05vw,17px);
  --t-etykieta:12px;             /* mono, uppercase, letter-spacing .14em */

  /* rytm i siatka */
  --kontener:1240px;
  --margines:clamp(20px,4vw,64px);
  --sekcja-pion:clamp(88px,10vw,150px);   /* keynote żyje marginesem */
  --promien:18px;
  --promien-s:10px;

  /* ruch */
  --ease:cubic-bezier(.22,1,.36,1);
  --czas:.7s;
}
/* Jasna sekcja: podmienia tokeny lokalnie, komponenty działają dalej */
.papier{
  --tusz:var(--papier); --tusz-2:var(--papier-2);
  --tekst:#1B1B1D; --tekst-2:rgba(27,27,29,.64); --tekst-3:rgba(27,27,29,.38);
  --linia:rgba(27,27,29,.12);
  background:var(--tusz); color:var(--tekst);
}
@media (prefers-reduced-motion:reduce){:root{--czas:0s}}