/*
 * Mazur SPA — design tokens.
 * Jedyne źródło prawdy dla kolorów, odstępów, typografii i kształtów.
 * Wartości pochodzą z wizualizacji (Mazur-SPA-wizualizacja). Cały CSS motywu
 * korzysta wyłącznie z tych zmiennych — nie wpisujemy wartości "na sztywno".
 */
:root {
	/* ── Kolory ── */
	--navy: #183048;          /* główny granat marki */
	--navy-d: #0f2536;        /* ciemniejszy granat (topbar, hover, stopka) */
	--accent: #3d90b4;        /* akcent — CTA drugorzędne, linki "więcej" */
	--accent-d: #2f7a9b;      /* akcent hover */
	--ink: #1f2733;           /* podstawowy kolor tekstu */
	--muted: #6b7683;         /* tekst drugorzędny */
	--line: #e5e9f0;          /* obramowania, separatory */
	--bg: #f4f6fa;            /* tło sekcji / placeholdery obrazów */
	--stock: #127a3e;         /* "w magazynie", ceny promocyjne OK */
	--order: #b7791f;         /* "na zamówienie" */
	--danger: #c0392b;        /* błędy, brak w magazynie */
	--star: #ffb400;          /* gwiazdki ocen */

	/* Pochodne używane w wielu miejscach makiet */
	--text-soft: #4a5563;     /* akapity na jasnym tle */
	--text-body: #48525f;     /* treści FAQ/opinie */
	--link-drop: #39424e;     /* linki w dropdownach */
	--sep: #dce5f5;           /* linia hr.sep */
	--card-hover-line: #cdd8ef;
	--surface: #fff;          /* białe powierzchnie kart/paneli */
	--black: #000;            /* etykieta Black Weeks */
	--text-read: #3f4a57;     /* dłuższe treści (opisy, entry-content) */
	--topbar-text: #dfe7f5;   /* tekst i linki na granatowym topbarze */
	--text-on-navy: #eaf1fb;  /* etykiety formularzy na granacie (askband) */
	--danger-on-navy: #ffc4bc;/* komunikaty błędów CF7 na granacie */
	--disabled: #c3ccdb;      /* przyciski/ikony nieaktywne (porównywarka) */
	--dot: #c9d4e8;           /* kropki nawigacji slidera */
	--success-soft: #eef7f1;  /* poświata ikony potwierdzenia zamówienia */
	--chip-text: #51606f;     /* chipy parametrów na karcie produktu */
	--btn-ghost-text: #5a6772;/* tekst przycisku ghost */
	--facet-text: #3a4550;    /* przyciski facetów na blogu */
	--facet-active-accent: #b9c8e6; /* licznik aktywnego facetu */

	/* Stopka (ciemna) */
	--foot-bg: var(--navy-d);
	--foot-bottom-bg: #0b1e2c;
	--foot-text: #c9d4ea;
	--foot-soft: #9fb0d0;
	--foot-dim: #8fa1c4;

	/* ── Typografia ── */
	--font: 'Segoe UI', Roboto, Arial, sans-serif;
	--fs-11: 11px;
	--fs-12: 12px;
	--fs-13: 13px;
	--fs-14: 14px;
	--fs-15: 15px;
	--fs-16: 16px;
	--fs-17: 17px;
	--fs-19: 19px;
	--fs-21: 21px;
	--fs-23: 23px;
	--fs-26: 26px;
	--fs-34: 34px;
	--lh: 1.5;

	/* ── Skala odstępów (4px baza) ── */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-13: 52px;
	--sp-14: 56px;
	--sp-16: 64px;

	/* ── Promienie ── */
	--r-xs: 3px;
	--r-s: 6px;
	--r-m: 8px;
	--r-l: 10px;
	--r-xl: 12px;
	--r-2xl: 14px;
	--r-pill: 50px;
	--r-round: 50%;

	/* ── Cienie ── */
	--sh-card: 0 10px 26px rgba(16, 60, 131, .13);
	--sh-drop: 0 16px 34px rgba(12, 44, 98, .20);
	--sh-nav: 0 2px 10px rgba(12, 44, 98, .18);
	--sh-float: 0 6px 18px rgba(12, 44, 98, .14);
	--sh-pic: 0 14px 34px rgba(16, 60, 131, .12);
	--sh-sticky: 0 8px 24px rgba(0, 0, 0, .25);
	--sh-menu: 12px 0 40px rgba(0, 0, 0, .2);

	/* ── Layout ── */
	--container: 1280px;
	--container-pad: 20px;
	--header-h: 92px;
	--topbar-h: 38px;

	/* ── Animacje ── */
	--tr-fast: .15s;
	--tr-med: .18s;
	--tr-slow: .25s;
}