/**
 * Tokeny projektu — wygenerowane z .agent/tokens.json (Figma 12203:34430, pin 2026-09-17).
 * To jedyne miejsce z wartościami hex i surowymi rozmiarami. CSS sekcji i modułów
 * korzysta wyłącznie z tych zmiennych.
 */

:root {
	/* --- kolory --- */
	--color-ink: #222222;
	--color-black: #000000;
	--color-white: #ffffff;
	--color-muted: #575757;
	--color-surface: #ffffff;
	--color-surface-soft: #f2f6f9;
	--color-surface-blue: #f1f6fe;
	--color-surface-green: #f8fff6;
	--color-primary: #08854a;
	--color-primary-bright: #30ca81;
	--color-primary-veil: #08854aa1;
	--color-border: #000000;

	/* Kolory zmierzone z renderu Figmy — nie są zmiennymi w pliku (DEV-10). */
	--color-navy: #0b3462;
	--color-navy-light: #1e4a7b;
	--color-teal-deep: #107a5c;
	--color-mint: #c4ebd9;
	--color-border-mint: #a4e2c4;
	--color-surface-steel: #c1d0e1;
	--color-ink-deep: #1f1f1f;
	--color-error: #b3261e;
	/* O firmie / Kariera: obwódka kafli działów (14557:4283) i tło pasa z etymologią nazwy. */
	--color-border-mint-strong: #85d8b0;
	--color-surface-mint: #c1e1cc;

	/* Zmienne Figmy nieobjęte pinem tokenów z 2026-09-17 (podstrony: filtry, karty, formularze). */
	--color-neutral-light-2: #9c9c9c;
	--color-primary-soft: rgba(8, 133, 74, 0.63);
	--color-border-bright: rgba(48, 202, 129, 0.3);
	--color-chip-mint: rgba(133, 216, 176, 0.36);

	/* Tekst i obramowania z Figmy (P0 / Q-tokeny-tekst, decyzja 1:1 Figma).
	   --color-ink i --color-muted zostają. */
	--color-title: #191919; /* colors/text/text-tittle-dark — tytuły */
	--color-body: #5d5d5d; /* colors/text/text-body-dark — treść */
	--color-dark: #161938; /* color/dark — ciemny tekst nagłówków */
	--color-border-gray: #e4e4e4; /* surowa wartość — dzielniki card-case i obramowania pól */
	--color-border-light: #ecefeb; /* color/neutral-lightest-2 — jasne obramowania i tła ikon */

	/* Linie: 25% ink / 25% primary na jasnym tle (zmierzone w sekcji statystyk). */
	--color-rule: rgba(34, 34, 34, 0.25);
	--color-rule-accent: rgba(8, 133, 74, 0.25);

	--gradient-tile: linear-gradient(
		180deg,
		var(--color-surface-soft) 0%,
		var(--color-surface-soft) 40%,
		var(--color-mint) 100%
	);
	--gradient-tile-active: linear-gradient(180deg, var(--color-navy-light) 0%, var(--color-teal-deep) 100%);

	/* aliasy używane przez stany modułów (modules.md) */
	--color-secondary: var(--color-primary-bright);
	--color-on-primary: var(--color-white);
	--color-accent: var(--color-primary-bright);
	--color-hairline: rgba(34, 34, 34, 0.12);
	--color-hairline-light: rgba(255, 255, 255, 0.24);

	/* --- typografia --- */
	--font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-display-2xl: 150px;
	--fs-display-xl: 100px;
	--fs-display-lg: 72px;
	--fs-display-md: 64px; /* Headings/Text-5xl 64/72 — nagłówki O firmie i Kariery. */
	--fs-h1: 60px;
	--fs-h2: 48px;
	--fs-h3: 40px;
	--fs-h4: 32px;
	--fs-h5: 24px;
	--fs-h6: 20px;
	--fs-body-lg: 20px;
	--fs-body: 18px;
	--fs-body-sm: 16px;
	--fs-small: 14px;
	--fs-tiny: 12px;
	--fs-label: 18px;

	--lh-display: 1.2;
	--lh-heading: 1.2;
	--lh-h4: 1.3;
	--lh-h5: 1.4;
	--lh-body: 1.5;
	--lh-label: 1.35;

	--ls-display: -0.02em;
	--ls-heading: -0.02em;
	--ls-body: 0;

	/* --- odstępy --- */
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 78px;
	--space-section: 100px;

	/* --- promienie --- */
	--radius-sm: 8px;
	--radius-md: 20px;
	--radius-pill: 999px;

	/* --- kontener --- */
	--container-max: 1284px;
	--container-gutter: 78px;
	--container-frame: 1440px;

	/* --- cienie --- */
	--shadow-tile: 0 12px 32px rgba(11, 52, 98, 0.18);
	--shadow-panel: 0 12px 32px rgba(34, 34, 34, 0.14);

	/* --- ruch --- */
	--transition-fast: 0.18s ease;
}

/* Skalowanie typografii i odstępów poniżej breakpointu tabletu.
   Pełna interpolacja mobilna to faza F5 (DEV-01) — tu tylko tyle,
   żeby desktopowe wartości nie rozsadziły layoutu na mniejszym ekranie. */
@media (max-width: 991px) {
	:root {
		--fs-display-2xl: 64px;
		--fs-display-xl: 48px;
		--fs-display-lg: 40px;
		--fs-display-md: 36px;
		--fs-h1: 34px;
		--fs-h2: 30px;
		--fs-h3: 28px;
		--fs-h4: 24px;
		--fs-h5: 20px;
		--fs-h6: 18px;
		--fs-body-lg: 18px;
		--fs-body: 16px;
		--fs-body-sm: 14px;
		--fs-small: 13px;
		--fs-label: 16px;

		--container-gutter: 24px;
		--space-xl: 40px;
		--space-section: 64px;
	}
}