/**
 * Tokeny designu „Redline”.
 *
 * Wartości akcentu są nadpisywane inline z opcji motywu (inc/branding.php) —
 * te tutaj służą jako sensowny domyślny wygląd zaraz po włączeniu motywu.
 */

:root {
	/* Kolory bazowe */
	--color-ink: #16181c;
	--color-bg: #fbfaf8;
	--color-surface: #ffffff;
	--color-surface-alt: #f3f1ec;
	--color-border: #e7e4de;
	--color-border-strong: #d8d4cc;
	--color-text-muted: #5c584f;
	--color-text-faint: #a5a099;
	--color-text-faint-strong: #8a867e;

	/* Akcent — nadpisywany z opcji motywu */
	--color-accent: #c8361f;
	--color-accent-hover: #a02a17;
	--color-accent-on-dark: #e05a44;
	--color-accent-soft: #fde9d9;

	/* Kolory funkcyjne */
	--color-star: #f0b429;
	--color-positive: #0f8a5f;
	--color-mark: #fde9d9;

	/* Ciemne tła pomocnicze */
	--color-dark-border: #2a2c31;
	--color-dark-surface: #1f2126;
	--color-dark-placeholder: #26282c;
	--color-dark-placeholder-alt: #2e3035;
	--color-dark-text-faint: #6d6a63;

	/*
	 * Typografia oparta wyłącznie na fontach systemowych — motyw nie pobiera
	 * niczego z zewnętrznych serwerów. Nagłówki celują w krój wąski
	 * (Arial Narrow na Windows i macOS, Roboto Condensed na Androidzie),
	 * z odwrotem do zwykłego bezszeryfowego tam, gdzie wąskiego nie ma.
	 */
	--font-display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace;

	--text-h1-article: 40px;
	--text-h1-archive: 46px;
	--text-hero: 34px;
	--text-section: 24px;
	--text-card: 20px;
	--text-card-list: 22px;
	--text-card-small: 17px;
	--text-h2: 26px;
	--text-lead: 17px;
	--text-body: 15.5px;
	--text-excerpt: 13.5px;
	--text-meta: 11px;
	--text-label: 10px;

	--leading-tight: 1.1;
	--leading-title: 1.25;
	--leading-body: 1.7;
	--leading-lead: 1.65;

	--tracking-label: 1.5px;
	--tracking-wide: 2px;

	/* Odstępy */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-10: 40px;

	/* Geometria */
	--container: 1180px;
	--container-padding: 40px;
	--container-padding-mobile: 18px;
	--sidebar-article: 260px;
	--sidebar-archive: 300px;
	--gap-grid: 20px;
	--gap-columns: 32px;
	--measure: 65ch;

	--radius-card: 10px;
	--radius-control: 6px;
	--radius-thumb: 8px;
	--radius-pill: 99px;
	--radius-lightbox: 12px;

	--shadow-card-hover: 0 6px 18px rgba(22, 24, 28, 0.1);
	--shadow-button-hover: 0 3px 8px rgba(200, 54, 31, 0.3);

	--topbar-height: 4px;
	--transition: 170ms ease-out;
	--hit-target: 44px;
}

@media (max-width: 900px) {
	:root {
		--text-h1-article: 27px;
		--text-h1-archive: 30px;
		--text-hero: 23px;
		--text-card: 18px;
		--text-card-list: 18px;
		--text-card-small: 15px;
		--container-padding: var(--container-padding-mobile);
	}
}