/*
 * SPK - tokeny projektu (N0.7 etapu "nowe landingi").
 * Jedyny plik CSS z wartościami kolorów (qa-static.sh). Nazwy 1:1 z paczki projektanta, wartości z "Wytyczne
 * wdrozeniowe.md" §1 i z landingów (nie z "System SPK", spec 6.1). Ładowany na całym serwisie: tylko zmienne
 * na :root, bez selektorów elementów (nie zmienia wyglądu stron Elementora).
 * Fonty: @font-face wstawia inc/spk-assets.php (adresy z uploads serwisu, decyzja P2; rodzina "SPK Montserrat" -
 * patrz komentarz przy spk_fonty()).
 */
:root {
	/* Kolory marki */
	--pink-500: #E5007C;
	--pink-700: #B8005F;          /* hover, mały tekst różowy na jasnym tle */
	--pink-900: #8F004A;          /* stan wciśnięty przycisku głównego */
	--pink-300: #FF5CB0;          /* akcent tylko na ciemnym tle */
	--pink-100: #FDE8F2;          /* tła (newsletter, inicjały) */
	--pink-50: #FDF0F6;           /* tło hover i pozycji aktywnej (menu, paginacja) */
	--plum-900: #2E0F28;          /* sekcje ciemne, CTA końcowe */
	--plum-700: #44183B;
	--ink-950: #141213;           /* tylko BSP */
	--ink-900: #1D1A1C;           /* tekst */
	--ink-600: #3A3438;           /* tekst drugorzędny */
	--ink-500: #4F484D;           /* metadane, miniony termin (4,5:1 i więcej) */
	--ink-400: #8A8187;           /* obramowanie pól (UI, 3:1) */
	--line: #ECE6EA;              /* linie, obramowanie kart */
	--line-strong: #D6CED3;       /* obramowanie przycisków drugorzędnych w paginacji i filtrach */
	--bg-soft: #F6F3F5;           /* tło szarych sekcji */
	--white: #FFFFFF;

	/* Statusy i komunikaty */
	--success: #136B35;
	--success-bg: #E6F6EC;
	--warning: #7A4E00;
	--warning-bg: #FFF1D6;
	--error: #A21E17;
	--error-bg: #FDECEA;
	--error-border: #C4251C;
	--status-running: #6A2C7E;
	--status-running-bg: #F1E7F5;
	--status-closed: #5C4A5B;
	--status-closed-bg: #EEEBEE;

	/* Gradient stopki i panelu mobilnego */
	--gradient-start: #E5007C;
	--gradient-end: #9A1A7E;
	--gradient-brand: linear-gradient(100deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	/* Ciemniejsze warianty: pigułka "Moje konto" w nagłówku (hover, wciśnięcie; 2026-09-30) */
	--gradient-hover-start: var(--pink-700);
	--gradient-hover-end: #7A1464;
	--gradient-active-start: var(--pink-900);
	--gradient-active-end: #5C0E4B;
	--gradient-brand-hover: linear-gradient(100deg, var(--gradient-hover-start) 0%, var(--gradient-hover-end) 100%);
	--gradient-brand-active: linear-gradient(100deg, var(--gradient-active-start) 0%, var(--gradient-active-end) 100%);

	/* Fokus (outline 3px, offset 2px; kolor jak w "System SPK": ink-900 na jasnym, biały na ciemnym) */
	--focus: #1D1A1C;
	--focus-dark: #FFFFFF;
	--focus-width: 3px;
	--focus-offset: 2px;

	/* Pasek miejsc BSP: segment wolny na --ink-950. Makieta: #3A3437 (ok. 1,6:1); decyzja użytkownika 2026-09-24:
	   rozjaśniony do kontrastu >= 3:1 (WCAG 1.4.11), wartość = --ink-400 (ok. 4,9:1). Zajęty segment: --pink-300. */
	--seat-free: #8A8187;

	/* LP BSP na ciemnym tle ink-950 (makieta LP Black Swan Prestige): karty (statystyki hero, koordynatorka, tło zdjęcia),
	   linie pasa ceny w hero, tekst drugorzędny (lead, opisy) i tekst karty koordynatorki. Kontrasty w raporcie N6
	   (tools/qa/kontrast.mjs z parami _local/nowe-lp/N6/kontrast-bsp.json). */
	--bsp-karta: #221E20;
	--bsp-linia: #3A3437;
	--bsp-tekst: #D6CED3;
	--bsp-tekst-jasny: #E9E4E7;

	/* Promienie i cień */
	--radius-s: 8px;
	--radius-m: 16px;
	--radius-pill: 999px;
	--shadow-pop: 0 12px 32px rgba(29, 26, 28, .12);
	--overlay: rgba(20, 18, 19, .55);
	--overlay-panel: rgba(46, 15, 40, .55);        /* tło pod panelem mobilnym nagłówka (makieta SPKHeader) */
	--shadow-panel: -12px 0 32px rgba(29, 26, 28, .18);
	--on-dark-20: rgba(255, 255, 255, .2);         /* tła ikon social na gradiencie */
	--on-dark-35: rgba(255, 255, 255, .35);        /* linia nad dolnym paskiem stopki */
	--shadow-cta: 0 24px 48px rgba(0, 0, 0, .25);  /* biała karta ceny w CTA końcowym na ciemnym tle (4 makiety LP) */

	/* Układ */
	--content-max: 1360px;
	--gutter: clamp(16px, 3vw, 40px);
	--section-y: clamp(64px, 8vw, 96px);
	--header-h: 88px;
	--header-h-compact: 64px;
	--anchor-offset: 72px;

	/* Odstępy (tylko ta skala) */
	--s-4: 4px;
	--s-8: 8px;
	--s-12: 12px;
	--s-16: 16px;
	--s-24: 24px;
	--s-32: 32px;
	--s-48: 48px;
	--s-64: 64px;
	--s-96: 96px;

	/* Typografia */
	--font-head: 'TT Norms Pro', 'SPK Montserrat', Montserrat, system-ui, sans-serif;
	--font-body: 'SPK Montserrat', Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fs-h1: clamp(30px, 3.4vw, 46px);
	--lh-h1: 1.08;
	--fs-h2: clamp(26px, 2.8vw, 38px);
	--lh-h2: 1.15;
	--fs-h3: 24px;
	--fs-h3-card: 20px;
	--fs-h4: 18px;
	--lh-head: 1.25;
	--fs-lead: clamp(17px, 1.4vw, 19px);
	--fs-body: 16px;
	--fs-body-s: 15px;
	--lh-body: 1.6;
	--fs-small: 14px;
	--fs-xs: 13px;
	--fs-eyebrow: 13px;
	--ls-eyebrow: .12em;
	--fs-btn: 15px;
	--ls-btn: .04em;
	--fs-stat: clamp(36px, 3.6vw, 48px);

	/* Przyciski */
	--btn-h: 52px;
	--btn-h-s: 44px;
	--btn-h-l: 60px;

	/* Ruch */
	--t-fast: 150ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 0ms;
	}
}