/* ============================================================================
   tokeny.css — fonty self-hostowane + design tokeny CHIAROSCURO
   Źródło: docs/DESIGN-SYSTEM.md §2–3. Wartości kontrastu policzone tam wzorem WCAG.
   Zero żądań do fonts.googleapis.com / fonts.gstatic.com (RODO).
   ============================================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-pl.woff2") format("woff2-variations"),
       url("/assets/fonts/fraunces-pl.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 92%;
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-pl.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-pl.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ——— POWIERZCHNIE (od nocy do światła) ——— */
  --c-noc:            #0E1218;
  --c-pow-1:          #141A23;
  --c-pow-2:          #1C242F;
  --c-pow-3:          #26303D;
  --c-pow-3-hover:    #2F3A48;
  --c-granat:         #1E3366;
  --c-granat-glebia:  #141F3D;
  --c-plyta:          #E8E4DB;
  --c-plyta-cien:     #D8D3C7;
  --c-stopka:         #0A0D12;

  /* ——— TEKST NA CIEMNYM ——— */
  --c-tekst:          #ECEFF3;
  --c-tekst-2:        #AEB8C4;
  --c-tekst-3:        #8C97A5;
  --c-tekst-wyl:      #6B7685;
  --c-granat-tekst-2: #B9C2CE;

  /* ——— TEKST NA PŁYCIE ——— */
  --c-plyta-tekst:    #1C242F;
  --c-plyta-tekst-2:  #3A4452;
  --c-plyta-tekst-3:  #5A6675;
  --c-plyta-czerwien: #B52612;

  /* ——— MARKA ——— */
  --c-czerwien:       #F33F27;
  --c-czerwien-jasna: #FF7059;
  --c-czerwien-cien:  #7A1A0E;
  --c-zloto:          #D6B36A;
  --c-zloto-cien:     #4A3C1C;
  --c-swiatlo:        #F6F1E6;

  /* ——— KRAWĘDZIE ——— */
  --c-hairline:       #2A3340;
  --c-krawedz:        #6B7685;
  --c-krawedz-mocna:  #8C97A5;
  --c-plyta-hairline: #C6C0B2;

  /* ——— STANY ——— */
  --c-otwarte:        #6FD08C;
  --c-zamkniete:      #8C97A5;
  --c-blad:           #FF7059;
  --c-blad-tlo:       #2A1512;
  --c-sukces-tlo:     #122418;

  /* ——— TYPOGRAFIA ——— */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-tekst:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-2xs:  clamp(0.6875rem, 0.67rem + 0.08vw,  0.75rem);
  --t-xs:   clamp(0.75rem,   0.72rem + 0.15vw,  0.8125rem);
  --t-sm:   clamp(0.875rem,  0.85rem + 0.12vw,  0.9375rem);
  --t-base: clamp(1rem,      0.96rem + 0.20vw,  1.0625rem);
  --t-md:   clamp(1.125rem,  1.06rem + 0.30vw,  1.25rem);
  --t-lg:   clamp(1.375rem,  1.25rem + 0.60vw,  1.75rem);
  --t-xl:   clamp(1.75rem,   1.50rem + 1.20vw,  2.5rem);
  --t-2xl:  clamp(2.25rem,   1.80rem + 2.20vw,  3.75rem);
  --t-3xl:  clamp(2.75rem,   2.00rem + 3.80vw,  5.5rem);
  --t-ogrom:clamp(4rem,      2.00rem + 10vw,    9rem);

  --lh-ciasna:   1.04;
  --lh-naglowek: 1.18;
  --lh-tekst:    1.65;
  --lh-luzna:    1.8;
  --ls-ciasny:   -0.022em;
  --ls-etykieta: 0.14em;

  /* ——— ODSTĘPY ——— */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --s-sekcja:        clamp(4rem, 2.5rem + 6vw, 9rem);
  --s-sekcja-ciasna: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

  /* ——— SIATKA ——— */
  --maks-tresc:    1320px;
  --maks-czytanie: 66ch;
  --rynna:         clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --margines-bok:  clamp(1rem, 0.6rem + 2.2vw, 3rem);
  /* odległość od krawędzi kontenera do krawędzi okna — do elementów full-bleed */
  --wyjscie: max(var(--margines-bok), calc((100vw - var(--maks-tresc)) / 2));

  /* ——— PROMIENIE ——— */
  --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 14px; --r-kolo: 9999px;

  /* ——— CIENIE I POŚWIATY ——— */
  --krawedz-gorna: inset 0 1px 0 0 rgb(255 255 255 / 0.055);
  --cien-1: 0 2px 8px -4px rgb(0 0 0 / 0.5);
  --cien-2: 0 12px 32px -14px rgb(0 0 0 / 0.68);
  --cien-3: 0 28px 64px -24px rgb(0 0 0 / 0.78);
  --poswiata-cel: 0 0 48px -10px rgb(246 241 230 / 0.22);
  --poswiata-cta: 0 0 0 1px rgb(243 63 39 / 0.45), 0 10px 34px -14px rgb(243 63 39 / 0.45);

  /* ——— TŁA ATMOSFERYCZNE ——— */
  --tlo-oswietlenie-celu:
    radial-gradient(70% 55% at 72% 18%, rgb(246 241 230 / 0.10) 0%, transparent 62%),
    radial-gradient(90% 70% at 10% 95%, rgb(30 51 102 / 0.34) 0%, transparent 70%);
  --tlo-pas-granatowy: linear-gradient(168deg, var(--c-granat) 0%, var(--c-granat-glebia) 100%);
  --tlo-ziarno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E");

  /* ——— RUCH ——— */
  --ruch-szybki: 150ms;
  --ruch-bazowy: 220ms;
  --ruch-wolny:  300ms;
  --ruch-reveal: 420ms;
  --krzywa-std:     cubic-bezier(0.4, 0, 0.2, 1);
  --krzywa-wyjscia: cubic-bezier(0.22, 0.61, 0.36, 1);
  --krzywa-wejscia: cubic-bezier(0.4, 0, 1, 1);

  /* ——— WARSTWY ——— */
  --z-tlo: 0; --z-tresc: 10; --z-sticky: 100; --z-szuflada: 200;
  --z-cookies: 300; --z-modal: 400; --z-skiplink: 500;

  /* wysokość nagłówka przyklejonego — do scroll-margin (WCAG 2.4.11) */
  --h-naglowek: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ruch-szybki: 1ms; --ruch-bazowy: 1ms; --ruch-wolny: 1ms; --ruch-reveal: 1ms;
  }
}