/* ------------------------------------------------------------------
   TOKENY — przepisane co do znaku z teczka.json#wyglad.
   Zrodlo: wlasnosci/pracaiumowy/teczka.json, sekcja `wyglad`
   (kolor.role, kolor.cta, siatka, typografia). Zadna wartosc w tym
   pliku nie jest wymyslona tutaj — jesli trzeba ja zmienic, zmienia
   sie ja w teczce i przepisuje tu, nie odwrotnie.
   ------------------------------------------------------------------ */

:root {
  /* --- kolor: wariant papierowy (dominujacy) --- */
  --piu-tlo:            #F5F0EE;
  --piu-powierzchnia:   #FDFBFA;
  --piu-tekst:          #2A2028;
  --piu-tekst-cichy:    #5E5158;
  --piu-akcent:         #7A2E4E;
  --piu-obwodka:        #C9B9B4;
  --piu-obwodka-pola:   #8F7D78;

  /* --- kolor: wariant nocny (przerywnik: pas terminu, stopka, hero) --- */
  --piu-tlo-noc:          #2E2129;
  --piu-powierzchnia-noc: #3B2B34;
  --piu-tekst-noc:        #F2E9EC;
  --piu-tekst-cichy-noc:  #C4AEB6;
  --piu-akcent-noc:       #DE9AB0;
  --piu-obwodka-noc:      #634D57;

  /* --- CTA: DWA tokeny, zadeklarowane WYLACZNIE tutaj.
         Twarda regula wlasciciela: guzik nie dziedziczy koloru sekcji.
         Sekcja nocna (.piu-noc) podmienia piec rol koloru i NIGDY
         tych czterech zmiennych — guzik wniesiony do obcej sekcji
         nie ma czego odziedziczyc. --- */
  --piu-cta-jasny-wypelnienie: #7A2E4E;
  --piu-cta-jasny-etykieta:    #FDFBFA;
  --piu-cta-ciemny-wypelnienie:#F7E3D6;
  --piu-cta-ciemny-etykieta:   #4A1B2E;

  /* --- siatka --- */
  --piu-strona:  1280px;   /* jeden pojemnik: naglowek, sekcje, stopka */
  --piu-proza:   608px;    /* ~70 znakow przy 17 px */
  --piu-margines: 20px;    /* progi, nie clamp — patrz siatka.margines_px */

  /* --- rytm: baza 4, kazdy krok suma dwoch poprzednich --- */
  --piu-r1: 4px;   --piu-r2: 8px;   --piu-r3: 12px;  --piu-r4: 20px;
  --piu-r5: 32px;  --piu-r6: 52px;  --piu-r7: 84px;  --piu-r8: 136px;
  --piu-sekcja: var(--piu-r6);      /* 52 px do 1023, 84 px od 1024 */

  /* --- typografia: skala modul 1.2, baza 17 --- */
  --piu-f-naglowkowa: Literata, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --piu-f-tekstowa: "Atkinson Hyperlegible", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --piu-t1: 12px;  --piu-t2: 14px;  --piu-t3: 17px;  --piu-t4: 20px;
  --piu-t5: 24px;  --piu-t6: 29px;  --piu-t7: 35px;  --piu-t8: 42px;
  --piu-i-naglowki: 1.18;
  --piu-i-tekst: 1.65;

  /* --- znak rozpoznawczy: linia marginesu --- */
  --piu-linia: 4px;
  --piu-naroznik: 2px;   /* prawie ostry celowo — dokument, nie pastylka */

  /* --- pieczec w logo (SVG bierze var(--pieczec)) --- */
  --pieczec: var(--piu-akcent);
}

@media (min-width: 720px)  { :root { --piu-margines: 32px; } }
@media (min-width: 1024px) { :root { --piu-margines: 48px; --piu-sekcja: var(--piu-r7); } }

/* Sekcja nocna podmienia PIEC rol koloru — i ani jednej zmiennej CTA.
   STOPKA jest tu razem z .piu-noc, bo maluje sie tym samym ciemnym tlem.
   Wczesniej brala tylko tlo i --piu-tekst-noc, a --piu-tekst-cichy
   zostawal w wartosci dziennej (#5E5158) — zmierzone: klauzula pod
   stopka miala kontrast 2,05 wobec wymaganych 4,5. Ten sam blad co
   opisany nizej: tlo zmienione, role koloru nie. */
.piu-noc,
.piu-stopka {
  /* `color` MUSI byc zadeklarowany jawnie. Podmiana samej zmiennej
     --piu-tekst nie wystarcza: `color` jest ustawiony na <body>, tam sie
     ROZWIAZUJE do wartosci wariantu jasnego, a dzieci dziedzicza juz
     policzona wartosc, nie zmienna. Skutek bez tej linii: naglowki byly
     jasne (bo maja wlasna deklaracje color), a proza zostawala CIEMNA
     NA CIEMNYM TLE. Zmierzone na sekcji `termin`: kontrast 1.00. */
  color: var(--piu-tekst-noc);
  --piu-tlo:          var(--piu-tlo-noc);
  --piu-powierzchnia: var(--piu-powierzchnia-noc);
  --piu-tekst:        var(--piu-tekst-noc);
  --piu-tekst-cichy:  var(--piu-tekst-cichy-noc);
  --piu-akcent:       var(--piu-akcent-noc);
  --piu-obwodka:      var(--piu-obwodka-noc);
  --pieczec:          var(--piu-akcent-noc);
}