/* 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). */

: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(72px, 7.2vw, 118px);   /* H1 hero, D41: bylo clamp(46px,30px+4vw,68px) z pomiaru wektorowego makiety, podbite na RADZIOCH_DESIGN_SYSTEM.md "Display XL/hero" - dokument nadrzedny nad pomiarem per-sekcja przy konflikcie wartosci uniwersalnych (decyzja Jakuba 15.09). SPRAWDZIC kolizje z maska zdjecia przed uznaniem za zamkniete. */
  --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. */

  --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. */
  }
}

/* ==========================================================================
   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(--surface-white);
  --accent-ctx-hover: var(--text-on-dark-muted);
  --accent-ctx-fg: var(--surface-dark);
  --line-ctx: var(--line-on-dark);
  --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);
}

.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);
}