/* Tokeny projektu, Kamila Radzioch. Słownik zmigrowany na kanon agencji
   (wiki/standardy/format-artefaktow.md, wzorzec szablony/starter-statyk).
   Wartości źródłowe: paczka-projekt/00-global (design-tokens.css Karola,
   09.09.2026) + spec/spec.json (pomiar makiety, kontener 1304 potwierdzony).
   Zrodlo_palety: design-tokens.css Karola (przekazane wprost jako hexy
   marki, nie odmierzone z logo, bo logo idzie do kasacji - dekyzja 17.08). */

/* Fonty, self-hosted (wdroz-e8.10, 16.09.2026). Pliki pobrane i zweryfikowane
   pod katem pokrycia latin+latin-ext juz 14.09.2026 (paczka-projekt/00-global/
   fonty/fonty.md, `fonty.py --katalog` kod 0), ale nigdy nie skopiowane do
   motywu ani wpiete w enqueue - do dzis strona ladowala je z fonts.googleapis.com/
   fonts.gstatic.com (CDN zewnetrzny, ~187KB transferu, dodatkowe polaczenia DNS/TLS,
   PIPELINE.md F0 mylnie zakladalo ze self-hosting jest gotowy). Warianty variable
   (jeden plik pokrywa cala wage 400-600 Bodoni / 400-700 Manrope), latin+latin-ext
   osobno bo przegladarka pobiera tylko blok znakow faktycznie uzywany na stronie.
   unicode-range: standardowe zakresy Google Fonts (latin/latin-ext), nie generowane
   lokalnie. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/BodoniModa-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/BodoniModa-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/BodoniModa-italic-400_600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/BodoniModa-italic-400_600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Manrope-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Manrope-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Powierzchnie ------------------------------------------------------ */
  --surface-dark:  #0C090B;   /* rbt-ink: sekcje ciemne, hero, stopka */
  --surface-dark-warm: #17110F; /* rbt-ink-warm: alternatywne ciemne sekcje, D41 RADZIOCH_DESIGN_SYSTEM.md */
  --surface-espresso: #271914; /* rbt-espresso: warianty ciemne cieplejsze */
  --surface-cream: #F4F0E9;   /* rbt-ivory: sekcje jasne, tło strony */
  --surface-paper: #EAE3DA;   /* rbt-paper: karty na cream, panele */
  --surface-white: #FFFDF8;   /* rbt-white: karty jasne, formularze */

  /* --- Tekst ---------------------------------------------------------------
     Kontekst .on-dark/.on-light ustawia --fg/--fg-muted z tych wartości. */
  --text-on-dark:        #FFFDF8;
  --text-on-dark-muted:  rgba(255, 253, 248, 0.68);
  /* D43 audyt hover: RADZIOCH_DESIGN_SYSTEM.md podaje .72 konkretnie dla
     linku nawigacji headera (.rbt-nav-link), nie dla calego rodzinnego tekstu
     stlumionego (stopka §18 ma osobno podana .68 - potwierdzone poprawne).
     Osobny token zamiast zmiany --text-on-dark-muted sitewide, zeby nie
     zregresowac stopki i innych miejsc uzywajacych tej samej zmiennej. */
  --text-nav-link:       rgba(255, 253, 248, 0.72);
  --text-on-light:       #332B2B;
  --text-on-light-muted: #8F8580;

  /* --- Akcent ----------------------------------------------------------------
     Dwa akcenty marki: bordo (wine) na dużych plamach i przyciskach ciemnych,
     szampan (champagne) na przyciskach jasnych i detalach. */
  --accent:            #70293B;  /* rbt-wine */
  --accent-hover:      #491923;  /* rbt-wine-deep */
  --accent-deep:       #491923;
  --accent-deep-hover: #2E0F16;
  --gold:              #CAA66F;  /* rbt-champagne */
  --gold-hover:        #B48A59;
  --gold-light:        #DFC49C;  /* rbt-champagne-light */
  --blush:             #D7B6AA;

  /* --- Linie ------------------------------------------------------------------
     D41: --line-on-dark podbite z .14 na .18, RADZIOCH_DESIGN_SYSTEM.md
     --rbt-border-light jest teraz nadrzedny nad wczesniejszym pomiarem. */
  --line-on-light: rgba(12, 9, 11, 0.12);
  --line-on-dark:  rgba(255, 253, 248, 0.18);
  --line-on-light-strong: rgba(12, 9, 11, 0.22);  /* rbt-border-dark-strong */
  --line-on-dark-strong:  rgba(255, 253, 248, 0.34); /* rbt-border-light-strong */
  --overlay-dark: rgba(12, 9, 11, 0.72); /* rbt-overlay-dark */
  --overlay-soft: rgba(12, 9, 11, 0.46); /* rbt-overlay-soft */

  /* --- Typografia, kroje ----------------------------------------------------
     Zawsze latin + latin-ext (00-global/fonty.md). */
  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-text:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Typografia, skala płynna ----------------------------------------------
     Skala odczytana z makiety (H1 "Od zera / do milionera" duży display,
     eyebrow drobny wersalikowy). Wartości docelowe do doszlifowania w F4b
     po zmierzeniu tuszu skryptem cele_z_kadru.py. */
  --fs-display-1: clamp(52px, 5vw, 80px);   /* H1 hero, korekta 16.09.2026: Jakub na zywym renderze home "ogromne, nieczytelne" - poprzednia wartosc clamp(72px,7.2vw,118px) z D41/RADZIOCH_DESIGN_SYSTEM.md dawala 103.68px na 1440, zdanie z dwoch linii zajmowalo cala wysokosc hero. Zmniejszone o ok. 30% (72px na 1440), wciaz najwiekszy H1 w projekcie (wiekszy od --fs-h1-hero-landing 64px), floor obnizony rownolegle bo brak osobnego override mobile - stara wartosc wymuszala 72px nawet na 390px. */
  --fs-display-2: clamp(34px, 24px + 2.6vw, 52px); /* H2 sekcji */
  --fs-display-3: clamp(24px, 20px + 1vw, 30px);   /* H3, karty pakietów */
  --fs-body:      clamp(16px, 15px + 0.3vw, 17px);
  --fs-small:     14px;  /* 14.09.2026 D27 amendment: Jakub zobaczyl 16px na zywo, nav za duzy. Skorygowane z 16px na 14px, --fs-eyebrow zostaje 16px. Patrz decyzje.md D27 */
  --fs-eyebrow:   16px;  /* standaryzowane 14.09.2026 D27, decyzja Jakuba: pomiar z makiety PNG niepewny (~10px, dwie metody), zamiast gonic raster ustawiamy 16px sitewide */
  --fs-h1-podstrona: clamp(32px, 3vw, 48px); /* D52 15.09.2026: skorygowane z clamp(56px,5.5vw,88px). Jakub na zywo "strasznie ogromny" na /kursy/. Pomiar wektorowy PyMuPDF+Quartz (paczka-projekt/zrodla/pdf-desktop/radzioch_kursy.pdf, raster natywny 2880px = kanon 1440px 1:1) daje cap-height litery "P" w H1 makiety = 32px przy 1440. Zywy render mial 79.2px font-size (cap-height litery "W" wektorowo 61px, wspolczynnik cap-height/font-size Bodoni Moda ~0.745-0.77). Odwrocone: font-size docelowy = 32/0.745 =~ 43px przy 1440, stara wartosc dawala 79.2px - prawie 2x za duzo. Cala krzywa clamp przeskalowana wspolczynnikiem ~0.543 (43/79.2), nie tylko punkt 1440, zeby zachowac ksztalt. Stara wartosc byla 1:1 przepisana z RADZIOCH_DESIGN_SYSTEM.md sekcja 4 (tabela generyczna "H1 podstrony"), nigdy niezwalidowana wektorowo dla TEJ konkretnej podstrony - dokument tu byl niepoprawny, patrz decyzje.md D52 dla pelnego wyjasnienia zasady "dokument nadrzedny" (D41) i kiedy pomiar per-sekcja jednak wygrywa. */
  --fs-h1-hero-landing: clamp(38px, 3.75vw, 64px); /* D55 15.09.2026, /szkolenie-instruktorskie/ S1: NOWY token, ani --fs-display-1 (home, 118px) ani --fs-h1-podstrona (kursy, 48px) nie pasowaly - hero tej podstrony jest hero-glowny (on-dark, zdjecie w luku), nie hero-tekstowy jak /kursy/, ale tresciowo mniejszy niz hero sprzedazowy home. Pomiar wektorowy PyMuPDF+Quartz (radzioch_szkolenie_instruktorskie_online.pdf, natywny 2880x5000 = kanon 1440 dokladny 2x-downsample): cap-height litery "Z" w "Zostan" (linia1 H1) = 41px przy 1440, izolowana ciasnym kadrem, stabilna. Wspolczynnik cap-height/font-size Bodoni Moda 0.745-0.77 (zakres z D52) -> font-size = 41/0.756 (srodek zakresu) = ~54px. Krzywa dobrana tak, by preferred (3.75vw) dawal dokladnie 54px przy 1440 (3.75*14.4=54), floor/ceiling dobrane do zachowania hierarchii (mniejszy od --fs-display-1, wiekszy od --fs-h1-podstrona). Mobile PONIZEJ, pomiar rastra ODRZUCONY swiadomie. */


  --lh-display: 1.08;
  --lh-body:    1.6;
  --ls-eyebrow: 0.14em;

  /* --- Przestrzeń -------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;
  --space-13: 160px;
  --space-section: clamp(96px, 8vw, 152px); /* rbt-section-space-desktop */
  --space-section-mobile: 72px;
  --card-gap: 32px;
  --card-pad: 40px;         /* rbt: padding karty standardowej */
  --card-pad-featured: 48px; /* rbt: padding karty wyroznionej/sprzedazowej desktop, D41 40->48 */
  --card-pad-featured-mobile: 28px;

  /* --- Kontener i marginesy ----------------------------------------------------- */
  --container: 1728px; /* gorny limit .container (90% viewport), decyzja Jakuba 14.09.2026, base.css */
  --container-readable: 760px; /* rbt-container-readable, D41, jeszcze nieuzywany */
  --gutter: 68px; /* nadal uzywane przez .hero__stat, nie przez .container */

  /* --- Kształt --------------------------------------------------------------------
     Makieta jest kanciasta: przyciski i karty bez zaokrągleń, jedyny łuk
     to maska zdjęcia hero (00-global/hero/hero-photo-mask.svg). */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --shadow-karta: 0 18px 48px rgba(24, 8, 13, 0.10); /* = rbt-shadow-soft, potwierdzone identyczne w RADZIOCH_DESIGN_SYSTEM.md D41 */
  --shadow-lift: 0 24px 64px rgba(24, 8, 13, 0.16); /* rbt-shadow-lift, D41, hover kart-linkow */

  /* --- Kontrolki ------------------------------------------------------------------ */
  --control-h-desktop: 62px;
  --control-h-mobile: 56px;

  /* --- Ruch ------------------------------------------------------------------------- */
  --dur:  500ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* D41: bylo (.22,.61,.36,1), RADZIOCH_DESIGN_SYSTEM.md nadrzedny */
  --dur-fast: 180ms;  /* rbt-duration-fast, D41 */
  --dur-base: 320ms;  /* rbt-duration-base, D41 */
  --dur-slow: 650ms;  /* rbt-duration-slow, D41 */

  /* --- Warstwy, z-index --------------------------------------------------------
     D41, RADZIOCH_DESIGN_SYSTEM.md sekcja 22. Wczesniej wartosci hardkodowane
     ad-hoc w base.css (deko-r 0/1, header 50, panel mobile 60) bez formalnej
     skali - teraz jako tokeny, docelowo podmienic uzycia (nie zrobione w tej
     turze, sam token dodany zeby nowe komponenty mialy z czego korzystac). */
  --z-base: 0;
  --z-decoration: 1;
  --z-content: 2;
  --z-sticky: 50;
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --space-section: var(--space-section-mobile);
    --fs-h1-podstrona: clamp(24px, 6.5vw, 34px); /* D52 15.09.2026: skorygowane z clamp(42px,12vw,60px), sama proporcja przeskalowania co desktop (~0.543), patrz komentarz przy wersji desktop wyzej i decyzje.md D52. */
    --fs-h1-hero-landing: clamp(26px, 7.8vw, 40px); /* D55 15.09.2026: pomiar rastra mobile (PDF natywny 1080px, MediaBox rzeczywisty 360pt, wiec kanon poprawny to 360 nie 390 - 3x-downsample dokladny) dal cap-height "Z" = 14px -> font-size ~18.5px, PODEJRZANIE blisko lead mobile (18px), IDENTYCZNY wzorzec awarii jak w D52 ("~19-21px, blisko leadu, slaba hierarchia"). Zamiast gonic zawodny raster: przeskalowano desktop przez wspolczynnik mobile/desktop juz zwalidowany na TEJ samej stronie dla analogicznego hero-glowny (home, --fs-display-1: floor 48/72=.667, ceiling 68/118=.576, vw 15/7.2=2.08x) - floor 38*.68=~26, ceiling 64*.62=~40, vw 3.75*2.08=7.8vw. Przy 390px daje 30.4px (miedzy lead 18 i eyebrow, wyrazna hierarchia, bez kolizji rastra). */
  }
}

/* ==========================================================================
   Konteksty tła. Sekcja deklaruje .on-dark albo .on-light, komponenty w
   środku czytają var(--fg), var(--accent-ctx) itd.
   ========================================================================== */

.on-dark {
  --bg: var(--surface-dark);
  --fg: var(--text-on-dark);
  --fg-muted: var(--text-on-dark-muted);
  --accent-ctx: var(--gold);
  --accent-ctx-hover: var(--gold-hover);
  --accent-ctx-fg: var(--surface-dark);
  --line-ctx: var(--line-on-dark);
  --btn-solid-bg: var(--gold);
  --btn-solid-fg: var(--surface-dark);
  --btn-outline-fg: var(--text-on-dark);
  background: var(--bg);
  color: var(--fg);
}

.on-light {
  --bg: var(--surface-cream);
  --fg: var(--text-on-light);
  --fg-muted: var(--text-on-light-muted);
  --accent-ctx: var(--accent);
  --accent-ctx-hover: var(--accent-hover);
  --accent-ctx-fg: var(--surface-white);
  --line-ctx: var(--line-on-light);
  --btn-solid-bg: var(--surface-dark);
  --btn-solid-fg: var(--surface-white);
  --btn-outline-fg: var(--text-on-light);
  background: var(--bg);
  color: var(--fg);
}

.on-wine {
  --bg: var(--accent-deep);
  --fg: var(--text-on-dark);
  --fg-muted: rgba(255, 253, 248, 0.72);
  --accent-ctx: var(--gold);
  --accent-ctx-hover: var(--gold-hover);
  --accent-ctx-fg: var(--surface-dark);
  --line-ctx: rgba(255, 253, 248, 0.18);
  --btn-solid-bg: var(--surface-white);
  --btn-solid-fg: var(--surface-dark);
  --btn-outline-fg: var(--text-on-dark);
  background: var(--bg);
  color: var(--fg);
}