/**
 * Tokeny designu — patrz TOKENS.md.
 * Jedyne miejsce w motywie, w którym pojawiają się wartości surowe.
 *
 * @package wzwiazku
 */

:root {
	/* --- Paleta bazowa --- */
	--wzw-ink: #1b2b4e;
	--wzw-ink-muted: #4a5568;
	--wzw-accent: #b5543c;
	--wzw-surface: #ffffff;
	--wzw-rule: #e8e8e8;

	/* --- Paleta pochodna --- */
	--wzw-prose: #26344f;
	--wzw-surface-alt: #fcfcfc;
	--wzw-surface-sunken: #f5f6f8;
	--wzw-accent-soft: rgba(181, 84, 60, 0.35);
	--wzw-hatch: rgba(255, 255, 255, 0.14);
	--wzw-on-ink: #ffffff;

	/* --- Akcenty sekcji --- */
	--wzw-dot-yellow: #f5b324;
	--wzw-dot-navy: #1b2b4e;
	--wzw-dot-sky: #4fb3d9;
	--wzw-dot-brick: #b5543c;
	--wzw-dot-violet: #7a5af8;
	--wzw-dot-sand: #e9dcc5;

	/* Kolor kropki sekcji — nadpisywany per moduł. */
	--wzw-dot: var(--wzw-ink);

	/* --- Rodziny --- */
	--wzw-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--wzw-font-ui: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--wzw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--wzw-display-vf: "SOFT" 100, "WONK" 0, "opsz" 144;

	/* --- Skala typografii --- */
	--wzw-fs-10: 10px;
	--wzw-fs-11: 11px;
	--wzw-fs-12: 12px;
	--wzw-fs-13: 13px;
	--wzw-fs-14: 14px;
	--wzw-fs-15: 15px;
	--wzw-fs-16: 16px;
	--wzw-fs-17: 17px;
	--wzw-fs-18: 18px;
	--wzw-fs-19: 19px;
	--wzw-fs-20: 20px;
	--wzw-fs-22: 22px;
	--wzw-fs-24: 24px;
	--wzw-fs-26: 26px;
	--wzw-fs-28: 28px;
	--wzw-fs-32: 32px;
	--wzw-fs-34: 34px;
	--wzw-fs-40: 40px;

	/* Rozmiary zmienne między breakpointami. */
	--wzw-fs-h1: var(--wzw-fs-34);
	--wzw-fs-body: var(--wzw-fs-17);

	/* --- Interlinia --- */
	--wzw-lh-tight: 1.1;
	--wzw-lh-title: 1.15;
	--wzw-lh-snug: 1.25;
	--wzw-lh-card: 1.35;
	--wzw-lh-normal: 1.4;
	--wzw-lh-relaxed: 1.55;
	--wzw-lh-prose: 1.65;
	--wzw-lh-flat: 1;

	/* --- Tracking --- */
	--wzw-ls-tight: -0.025em;
	--wzw-ls-display: -0.02em;
	--wzw-ls-snug: -0.015em;
	--wzw-ls-title: -0.01em;
	--wzw-ls-caps: 0.08em;
	--wzw-ls-mono: 0.06em;
	--wzw-ls-none: 0;

	/* --- Grubości --- */
	--wzw-fw-regular: 400;
	--wzw-fw-medium: 500;
	--wzw-fw-semibold: 600;
	--wzw-fw-bold: 700;

	/* --- Skala odstępów --- */
	--wzw-s1: 8px;
	--wzw-s2: 16px;
	--wzw-s3: 24px;
	--wzw-s4: 40px;
	--wzw-s5: 64px;
	--wzw-s6: 96px;

	/* Wartości spoza skali obecne w designie. */
	--wzw-s-1: 1px;
	--wzw-s-2: 2px;
	--wzw-s-4: 4px;
	--wzw-s-5: 5px;
	--wzw-s-6: 6px;
	--wzw-s-7: 7px;
	--wzw-s-9: 9px;
	--wzw-s-10: 10px;
	--wzw-s-11: 11px;
	--wzw-s-12: 12px;
	--wzw-s-13: 13px;
	--wzw-s-14: 14px;
	--wzw-s-18: 18px;
	--wzw-s-20: 20px;
	--wzw-s-22: 22px;
	--wzw-s-26: 26px;
	--wzw-s-32: 32px;
	--wzw-s-38: 38px;
	--wzw-s-48: 48px;
	--wzw-s-56: 56px;
	--wzw-s-64: 64px;
	--wzw-s-88: 88px;
	--wzw-s-130: 130px;
	--wzw-s-140: 140px;
	--wzw-s-160: 160px;
	--wzw-s-200: 200px;
	--wzw-s-220: 220px;
	--wzw-s-240: 240px;
	--wzw-s-280: 280px;

	/* --- Promienie --- */
	--wzw-r-img: 8px;
	--wzw-r-btn: 8px;
	--wzw-r-pill: 999px;
	--wzw-r-dot: 4px;
	--wzw-r-thumb: 6px;
	--wzw-r-hair: 1px;

	/* --- Cienie --- */
	--wzw-shadow-none: none;

	/* --- Kontener i miary --- */
	--wzw-container: 1200px;
	--wzw-container-pad: 24px;
	--wzw-measure-prose: 720px;
	--wzw-measure-media: 960px;
	--wzw-measure-doc: 900px;
	--wzw-measure-lead: 58ch;
	--wzw-measure-title: 22ch;
	--wzw-measure-foot: 34ch;
	/* Wysokość logo w nagłówku. Header rośnie do niej sam — jeden token
	   steruje całą górą strony. Design bez logo miał pasek 64 px. */
	--wzw-logo-h: 56px;
	--wzw-logo-footer-h: 44px;
	--wzw-header-h: 64px;
	--wzw-tap-min: 44px;
	--wzw-nav-item-h: 56px;

	/* --- Siatki modułów --- */
	--wzw-grid-gap-a: 48px;
	--wzw-grid-gap-b: 40px;
	--wzw-grid-gap-c: 32px;
	--wzw-grid-gap-d: 24px;
	--wzw-grid-gap-side: 56px;

	/* --- Breakpointy (dokumentacja; @media wymaga wartości liczbowych) --- */
	--wzw-bp-sm: 640px;
	--wzw-bp-md: 768px;
	--wzw-bp-lg: 1024px;
	--wzw-bp-xl: 1101px;

	/* --- Ruch --- */
	--wzw-dur: 0.2s;
	--wzw-ease: ease;

	/* --- Grubości linii --- */
	--wzw-hair: 1px;
	--wzw-burger-line: 1.5px;
	--wzw-toc-bar: 2px;

	/* --- Krycie --- */
	--wzw-op-placeholder: 0.75;
	--wzw-op-placeholder-light: 0.85;
}

/* Skala typografii zmienna między breakpointami: H1 i treść. */
@media (min-width: 640px) {
	:root {
		--wzw-logo-h: 90px;
	}
}

@media (min-width: 768px) {
	:root {
		--wzw-fs-h1: var(--wzw-fs-40);
		--wzw-fs-body: var(--wzw-fs-19);
	}
}