/* =========================================================================
   Cheval — tokeny wizualne
   -------------------------------------------------------------------------
   To jedyne miejsce, w którym zmienia się kolory, kroje i odstępy.
   Wartości kolorów odczytane z projektu w Figmie ze zrzutów ekranu —
   po potwierdzeniu w panelu stylów wystarczy podmienić je tutaj.
   ========================================================================= */

:root {
	/* --- Kolory marki --- */
	--c-navy:        #1B2151;   /* przyciski, stopka, nagłówki */
	--c-navy-dark:   #141A3E;   /* hover przycisków, dolny pas stopki */
	--c-navy-soft:   #2A3272;   /* akcenty, aktywna pozycja menu */

	/* --- Tekst --- */
	--c-ink:         #1F2233;   /* tekst podstawowy */
	--c-ink-2:       #4A4F66;   /* tekst drugorzędny */
	--c-muted:       #767B92;   /* podpisy, marka nad nazwą produktu */

	/* --- Tła --- */
	--c-bg:          #FFFFFF;
	--c-bg-alt:      #F4F5F8;   /* pas „Zaufane marki”, sekcje przeplatane */
	--c-bg-card:     #FFFFFF;

	/* --- Linie --- */
	--c-rule:        #E3E5EC;
	--c-rule-strong: #C9CCD8;

	/* --- Semantyka --- */
	--c-star:        #E8A33D;   /* gwiazdki ocen */
	--c-sale:        #C0392B;   /* cena promocyjna, badge */
	--c-stock:       #2C6B4C;   /* „Produkt dostępny” */
	--c-nostock:     #9C3535;

	/* --- Typografia --- */
	--f-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-xs:   12px;
	--fs-sm:   14px;
	--fs-base: 16px;
	--fs-lg:   18px;
	--fs-xl:   22px;
	--fs-2xl:  28px;
	--fs-3xl:  clamp(28px, 4vw, 40px);
	--fs-hero: clamp(32px, 5.2vw, 52px);

	/* --- Siatka i odstępy --- */
	--wrap:      1240px;   /* szerokość kontenera z projektu */
	--gutter:    20px;
	--gap:       24px;
	--section-y: clamp(48px, 7vw, 80px);

	/* --- Wykończenie --- */
	--radius:      4px;
	--radius-lg:   8px;
	--shadow:      0 1px 2px rgba(31, 34, 51, .06), 0 8px 24px -16px rgba(31, 34, 51, .3);
	--shadow-card: 0 1px 3px rgba(31, 34, 51, .08);

	/* --- Ruch --- */
	--ease: cubic-bezier(.2, .7, .3, 1);
	--dur:  .18s;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}