/* ==========================================================================
   tokens.css — Stalbud International, system wizualny „Granat i beton”.
   Docelowa lokalizacja w motywie: staging/theme/stalbud/assets/css/tokens.css
   (zastępuje szkielet; zachowuje jego nazwy: --sb-font-heading, --sb-font-body,
   --sb-color-navy, --sb-color-concrete, --sb-color-steel, --sb-color-text,
   --sb-color-bg, --sb-color-border, --sb-color-focus, --sb-container, --sb-gutter).

   UWAGA: szkielet deklaruje @font-face w base.css. Ten plik ma te same deklaracje
   (ścieżki względem assets/css/ → ../fonts/). Po wdrożeniu tokens.css USUŃ blok
   @font-face z base.css, żeby fonty nie były zadeklarowane dwukrotnie.

   BREAKPOINTY (CSS nie dopuszcza var() w @media, więc tylko wartości):
     < 36em   (< 576 px)  telefon; projekt bazowy 390 px, 1 kolumna
     ≥ 36em   (≥ 576 px)  duży telefon / mały tablet: 2 kolumny dla kart i list
     ≥ 48em   (≥ 768 px)  tablet: 2–3 kolumny, tabele w układzie pełnym
     ≥ 56.25em (≥ 900 px) menu desktopowe (zgodne z nav.js; nie zmieniać)
     ≥ 75em   (≥ 1200 px) szeroki układ 12 kolumn
     Punkty kontrolne projektu: 390 / 768 / 1440 px. Brak poziomego przewijania.

   KOLORY: wyłącznie ustalone — granat, beton, błękit stalowy + pochodne
   (granat ciemny, błękit ciemny, dwa szare tekstu, biel). Żadnych innych barw.
   Kontrasty: patrz design-system.md §1 (liczone skryptem, WCAG 2.x).
   ========================================================================== */

/* ---- Fonty lokalne (SIL OFL 1.1; zmienne, oś wght; latin + latin-ext) ----- */
/* Manrope 200–800 */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-wght-normal.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Sans 3 200–900 */
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin-wght-normal.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ---- Kroje ---------------------------------------------------------- */
	--sb-font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sb-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sb-fw-regular: 400;
	--sb-fw-medium: 500;
	--sb-fw-semibold: 600;
	--sb-fw-bold: 700;
	--sb-fw-heading: 800;      /* Manrope: H1–H3 (mocna typografia) */
	--sb-fw-heading-s: 600;    /* Manrope: H4, etykiety */

	/* ---- Kolory bazowe (ustalone) ---------------------------------------- */
	--sb-color-navy: #14284b;       /* granat: nagłówki, ciemne tła */
	--sb-color-concrete: #e9ecef;   /* beton: tła sekcji */
	--sb-color-steel: #2f6fde;      /* błękit stalowy: przyciski, akcent UI */

	/* ---- Pochodne (dozwolone) -------------------------------------------- */
	--sb-color-white: #ffffff;
	--sb-color-navy-dark: #0c1a33;  /* stopka, hover na granacie, stan błędu */
	--sb-color-navy-darker: #081327; /* stopka */
	--sb-color-steel-dark: #1f55b8; /* linki tekstowe, hover przycisku */
	--sb-color-gray-text: #4a5668;  /* tekst zasadniczy na bieli i betonie */
	--sb-color-gray: #5b6677;       /* tekst pomocniczy, obrys pól formularza */
	--sb-color-eyebrow-dark: #9fc0ff; /* etykieta eyebrow na granacie (≥7:1) */

	/* Linie dekoracyjne = granat z przezroczystością (nie nowa barwa). */
	--sb-line: rgb(20 40 75 / 0.18);
	--sb-line-strong: rgb(20 40 75 / 0.40);
	--sb-line-on-navy: rgb(233 236 239 / 0.28);

	/* ---- Role (zgodne ze szkieletem) ------------------------------------- */
	--sb-color-bg: var(--sb-color-white);
	--sb-color-text: var(--sb-color-gray-text);
	--sb-color-heading: var(--sb-color-navy);
	--sb-color-link: var(--sb-color-steel-dark);
	--sb-color-link-hover: var(--sb-color-navy);
	--sb-color-border: var(--sb-line);
	--sb-color-border-field: var(--sb-color-gray);   /* ≥3:1 na bieli i betonie */
	--sb-color-focus: var(--sb-color-steel);
	--sb-color-focus-on-navy: var(--sb-color-white);
	--sb-color-error: var(--sb-color-navy-dark);     /* błąd = ikona + tekst + gruby obrys, nie kolor */

	/* ---- Typografia płynna (390 → 1440 px) -------------------------------
	   rozmiary px: 390 / 768 / 1440
	   H1 32/39/52 · H2 26/30/38 · H3 21/23/26 · H4 18/19/20
	   lead 19/20/22 · tekst 17/17/18 · small 14/14/15 · eyebrow 13/13/14 */
	--sb-fs-h1: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem);
	--sb-fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.125rem);
	--sb-fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
	--sb-fs-h4: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);
	--sb-fs-lead: clamp(1.1875rem, 1.08rem + 0.45vw, 1.5rem);
	--sb-fs-body: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem);
	--sb-fs-small: clamp(0.875rem, 0.8518rem + 0.0952vw, 0.9375rem);
	--sb-fs-eyebrow: clamp(0.8125rem, 0.7893rem + 0.0952vw, 0.875rem);

	--sb-lh-h1: 1.08;
	--sb-lh-h2: 1.15;
	--sb-lh-h3: 1.3;
	--sb-lh-h4: 1.35;
	--sb-lh-body: 1.6;     /* dopuszczalny zakres 1,5–1,7 */
	--sb-lh-small: 1.5;
	--sb-ls-heading: -0.022em;
	--sb-ls-eyebrow: 0.14em;
	--sb-measure: 68ch;    /* długość wiersza 60–75 znaków */

	/* ---- Odstępy (baza 4 px) --------------------------------------------- */
	--sb-space-1: 0.25rem;  /*  4 */
	--sb-space-2: 0.5rem;   /*  8 */
	--sb-space-3: 0.75rem;  /* 12 */
	--sb-space-4: 1rem;     /* 16 */
	--sb-space-5: 1.5rem;   /* 24 */
	--sb-space-6: 2rem;     /* 32 */
	--sb-space-7: 3rem;     /* 48 */
	--sb-space-8: 4rem;     /* 64 */
	--sb-space-9: 6rem;     /* 96 */
	/* płynne: rytm sekcji i odstęp kolumn (56→112 px, 20→40 px) */
	--sb-section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
	--sb-gap: clamp(1.25rem, 0.7857rem + 1.9048vw, 2.5rem);

	/* ---- Układ ----------------------------------------------------------- */
	--sb-container: 72rem;          /* 1152 px treści */
	--sb-container-narrow: 48rem;   /* 768 px: wstęp, FAQ, cytat prawny */
	--sb-gutter: 1.25rem;           /* 20 px na 390 px */
	--sb-tap: 2.75rem;              /* min. obszar dotykowy 44 px */

	/* ---- Promienie (powściągliwe, „rysunek techniczny”) ------------------- */
	--sb-radius-none: 0;
	--sb-radius-sm: 8px;    /* przyciski, pola, znaczniki */
	--sb-radius-md: 12px;    /* karty, tabele */
	--sb-radius-lg: 16px;
	--sb-radius-xl: 24px;
	--sb-radius-pill: 999px;    /* sloty zdjęć, panele */

	/* ---- Obrysy ---------------------------------------------------------- */
	--sb-border-w: 1px;
	--sb-border-w-strong: 2px;
	--sb-focus-w: 3px;
	--sb-focus-offset: 2px;

	/* ---- Cienie (z granatu; używać oszczędnie — domyślnie obrys, nie cień) - */
	--sb-shadow-sm: 0 1px 2px rgb(12 26 51 / 0.06), 0 2px 6px rgb(12 26 51 / 0.05);
	--sb-shadow-md: 0 2px 4px rgb(12 26 51 / 0.05), 0 10px 24px -6px rgb(12 26 51 / 0.14);
	--sb-shadow-lg: 0 4px 8px rgb(12 26 51 / 0.06), 0 22px 44px -10px rgb(12 26 51 / 0.28);
	--sb-shadow-xl: 0 30px 70px -16px rgb(12 26 51 / 0.38);

	/* ---- Ruch ------------------------------------------------------------ */
	--sb-dur-fast: 150ms;   /* hover, fokus */
	--sb-dur: 600ms;        /* wejście sekcji (fade + translate) */
	--sb-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--sb-reveal-shift: 16px;

	/* ---- Proporcje slotów na zdjęcia ------------------------------------- */
	--sb-ratio-wide: 16 / 9;   /* sb-photo--wide */
	--sb-ratio-card: 4 / 3;    /* sb-photo--card */
	--sb-ratio-tall: 4 / 5;    /* sb-photo--tall */
	--sb-ratio-square: 1 / 1;  /* sb-photo--square */
}

/* ---- Konteksty tła: przełączają role kolorów dla całej sekcji -------------
   Użycie: klasa na kontenerze sekcji (CSS Classes w Elementorze).
   Wartości wynikają z tabeli kontrastów (design-system.md §1). */
.sb-bg-white {
	--sb-surface: var(--sb-color-white);
	--sb-fg-heading: var(--sb-color-navy);
	--sb-fg-text: var(--sb-color-gray-text);
	--sb-fg-muted: var(--sb-color-gray);
	--sb-fg-link: var(--sb-color-steel-dark);
	--sb-fg-link-hover: var(--sb-color-navy);
	--sb-fg-line: var(--sb-line);
	--sb-fg-focus: var(--sb-color-steel);
	background-color: var(--sb-surface);
	color: var(--sb-fg-text);
}
.sb-bg-concrete {
	--sb-surface: var(--sb-color-concrete);
	--sb-fg-heading: var(--sb-color-navy);
	--sb-fg-text: var(--sb-color-gray-text);
	--sb-fg-muted: var(--sb-color-gray);
	--sb-fg-link: var(--sb-color-steel-dark);
	--sb-fg-link-hover: var(--sb-color-navy);
	--sb-fg-line: var(--sb-line);
	--sb-fg-focus: var(--sb-color-steel);
	background-color: var(--sb-surface);
	color: var(--sb-fg-text);
}
.sb-bg-navy {
	--sb-surface: var(--sb-color-navy);
	--sb-fg-heading: var(--sb-color-white);
	--sb-fg-text: var(--sb-color-concrete);
	--sb-fg-muted: var(--sb-color-concrete);   /* szarości nie przechodzą na granacie */
	--sb-fg-link: var(--sb-color-white);       /* link na granacie: biały + podkreślenie */
	--sb-fg-link-hover: var(--sb-color-concrete);
	--sb-fg-line: var(--sb-line-on-navy);
	--sb-fg-focus: var(--sb-color-white);
	background-color: var(--sb-surface);
	color: var(--sb-fg-text);
}
.sb-bg-navy-dark {
	--sb-surface: var(--sb-color-navy-dark);
	--sb-fg-heading: var(--sb-color-white);
	--sb-fg-text: var(--sb-color-concrete);
	--sb-fg-muted: var(--sb-color-concrete);
	--sb-fg-link: var(--sb-color-white);
	--sb-fg-link-hover: var(--sb-color-concrete);
	--sb-fg-line: var(--sb-line-on-navy);
	--sb-fg-focus: var(--sb-color-white);
	background-color: var(--sb-surface);
	color: var(--sb-fg-text);
}

/* ---- Hero (sb-hero): zawsze kontekst granatowy (zdjęcie + nakładka lub samo tło).
   Po .sb-bg-* w pliku, więc przy równej specyficzności wygrywa. */
.sb-hero {
	--sb-surface: var(--sb-color-navy-dark);
	--sb-fg-heading: var(--sb-color-white);
	--sb-fg-text: var(--sb-color-white);
	--sb-fg-muted: var(--sb-color-concrete);
	--sb-fg-link: var(--sb-color-white);
	--sb-fg-link-hover: var(--sb-color-concrete);
	--sb-fg-line: var(--sb-line-on-navy);
	--sb-fg-focus: var(--sb-color-white);
	background-color: var(--sb-surface);
	color: var(--sb-fg-text);
}
.sb-bg-navy .sb-eyebrow, .sb-bg-navy-dark .sb-eyebrow, .sb-hero .sb-eyebrow { --sb-eyebrow-color: var(--sb-color-eyebrow-dark); }

/* ---- Ruch zredukowany ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	:root {
		--sb-dur-fast: 0.01ms;
		--sb-dur: 0.01ms;
		--sb-reveal-shift: 0px;
	}
}