/*
 * Name: Warstwa ft-core: style
 * Slug: ft-core
 * Version: 1.0.0
 * Description: Tokeny projektu bmwparts24.pl, baza typografii i wspólne komponenty (przycisk, badge, karta, pole formularza, reveal).
 * Module: core
 * Scope: front
 * Load: manual
 *
 * 1.0.0: pierwsza wersja warstwy. Tokeny z TOKENS.md, rozszerzenia layoutu i paleta legacy
 *        zachowująca dzisiejszy wygląd sekcji i sklepu.
 */

/* ==========================================================================
   1. TOKENY
   Wartości z TOKENS.md (wiążące). Rozszerzenia 1.0.0 są opisane w README.md.
   Sekcje i wtyczki zawsze piszą var(--ft-x, wartość-zapasowa).
   ========================================================================== */
:root {
	/* Marker obecności warstwy, widoczny w DevTools na :root. */
	--ft-core: 1;

	/* Kolor (TOKENS.md) */
	--ft-color-primary: #1A6DCC;
	--ft-color-primary-hover: #0F5BAF;
	--ft-color-primary-soft: #E8F1FB;
	--ft-color-text: #1B1F23;
	--ft-color-muted: #5C636B;
	--ft-color-bg: #FFFFFF;
	--ft-color-surface: #F5F5F4;
	--ft-color-border: #E2E4E7;
	--ft-color-dark: #111418;
	--ft-color-success: #1E8E3E;
	--ft-color-warning: #B26A00;
	--ft-color-danger: #C62828;
	--ft-color-sold: #C62828;

	/* Typografia (TOKENS.md) */
	--ft-font-heading: 'Syne', system-ui, sans-serif;
	--ft-font-body: 'Instrument Sans', system-ui, sans-serif;
	--ft-text-xs: 0.75rem;
	--ft-text-sm: 0.875rem;
	--ft-text-md: 1rem;
	--ft-text-lg: 1.25rem;
	--ft-text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--ft-text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);

	/* Odstępy (TOKENS.md) */
	--ft-space-1: 0.25rem;
	--ft-space-2: 0.5rem;
	--ft-space-3: 0.75rem;
	--ft-space-4: 1rem;
	--ft-space-5: 1.5rem;
	--ft-space-6: 2rem;
	--ft-space-7: 3rem;
	--ft-space-8: 4rem;

	/* Promienie (TOKENS.md) */
	--ft-radius-sm: 4px;
	--ft-radius-md: 8px;
	--ft-radius-lg: 14px;

	/* Cienie (TOKENS.md) */
	--ft-shadow-sm: 0 1px 2px rgba(17, 20, 24, 0.06), 0 1px 3px rgba(17, 20, 24, 0.08);
	--ft-shadow-md: 0 4px 12px rgba(17, 20, 24, 0.08), 0 2px 4px rgba(17, 20, 24, 0.06);
	--ft-shadow-lg: 0 12px 32px rgba(17, 20, 24, 0.12);

	/* Ruch (TOKENS.md) */
	--ft-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ft-dur: 200ms;
	--ft-dur-slow: 400ms;

	/* Warstwy (TOKENS.md) */
	--ft-z-dropdown: 1000;
	--ft-z-overlay: 1100;

	/* Fokus (TOKENS.md) */
	--ft-focus: 0 0 0 3px rgba(26, 109, 204, 0.35);

	/* Rozszerzenia 1.0.0: layout i rytm tekstu */
	--ft-container: 1200px;
	--ft-container-wide: 1400px;
	--ft-gutter: clamp(1rem, 4vw, 2rem);
	--ft-lh-tight: 1.15;
	--ft-lh-body: 1.6;
	--ft-radius-pill: 999px;

	/* Paleta legacy 1.0.0: wartości używane dziś w co najmniej dwóch miejscach
	   (sekcje i sklep), spoza palety TOKENS.md. Zachowują obecny wygląd.
	   Ujednolicenie robi się tutaj jedną zmianą, na przykład
	   --ft-legacy-primary-hover: var(--ft-color-primary-hover); */
	--ft-legacy-primary-hover: #155BA8;
	--ft-legacy-muted: #6E757E;
	--ft-legacy-muted-strong: #5A616B;
	--ft-legacy-faint: #9CA3AD;
	--ft-legacy-sky: #6CB4F0;
	--ft-legacy-primary-tint: #F0F7FF;
	--ft-legacy-primary-tint-strong: #E0EEFA;
	--ft-legacy-primary-wash: #F8FAFE;
	--ft-legacy-surface-cool: #FAFBFC;
	--ft-legacy-surface-gray: #F0F1F3;
	--ft-legacy-border-warm: #E0E0DE;
	--ft-legacy-border-soft: #ECEEF0;
	--ft-legacy-border-gray: #E5E7EB;
	--ft-legacy-danger-soft: #FEF2F2;
	--ft-legacy-ease: cubic-bezier(0.25, 0, 0.25, 1);
	--ft-legacy-dur: 280ms;
}

/* ==========================================================================
   2. ZAKRES SEKCJI
   .ft-scope na elemencie głównym sekcji: box-sizing potomków, font treści,
   wygładzanie. .ft-scope--reset dodatkowo zeruje marginesy i paddingi potomków
   (tak jak dotychczasowe resety w sekcjach). Specyficzność 0,1,0, bez !important,
   więc reguły sekcji z własnym prefiksem zawsze mogą ją nadpisać.
   ========================================================================== */
.ft-scope {
	font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
}
.ft-scope *,
.ft-scope *::before,
.ft-scope *::after {
	box-sizing: border-box;
}
.ft-scope--reset *,
.ft-scope--reset *::before,
.ft-scope--reset *::after {
	margin: 0;
	padding: 0;
}
.ft-scope [hidden],
.ft-scope[hidden] {
	display: none !important;
}
.ft-scope a:focus-visible,
.ft-scope button:focus-visible,
.ft-scope select:focus-visible,
.ft-scope input:focus-visible,
.ft-scope textarea:focus-visible,
.ft-scope [tabindex]:focus-visible {
	outline: 2px solid var(--ft-color-primary, #1A6DCC);
	outline-offset: 2px;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.ft-container {
	width: 100%;
	max-width: var(--ft-container, 1200px);
	margin-inline: auto;
	padding-inline: var(--ft-gutter, clamp(1rem, 4vw, 2rem));
}
.ft-container--wide {
	max-width: var(--ft-container-wide, 1400px);
}

/* ==========================================================================
   4. TYPOGRAFIA
   Klasy, nie selektory elementów: warstwa nie zmienia typografii motywu.
   Podwójny selektor z .entry-content wygrywa z regułami Astry dla h1 do h6.
   ========================================================================== */
.entry-content .ft-title,
.ft-title {
	margin: 0;
	font-family: var(--ft-font-heading, 'Syne', system-ui, sans-serif);
	font-size: var(--ft-text-xl, clamp(1.5rem, 1.2rem + 1.2vw, 2rem));
	font-weight: 700;
	line-height: var(--ft-lh-tight, 1.15);
	letter-spacing: -0.02em;
	color: inherit;
	text-wrap: balance;
}
.entry-content .ft-title--hero,
.ft-title--hero {
	font-size: var(--ft-text-2xl, clamp(2rem, 1.5rem + 2vw, 3rem));
}
.entry-content .ft-subtitle,
.ft-subtitle {
	margin: 0;
	font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
	font-size: var(--ft-text-lg, 1.25rem);
	font-weight: 600;
	line-height: var(--ft-lh-tight, 1.15);
	color: inherit;
}
.entry-content .ft-lead,
.ft-lead {
	margin: 0;
	font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
	font-size: var(--ft-text-lg, 1.25rem);
	line-height: var(--ft-lh-body, 1.6);
	color: var(--ft-color-muted, #5C636B);
	max-width: 65ch;
	text-wrap: pretty;
}
.ft-eyebrow {
	display: inline-block;
	font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
	font-size: var(--ft-text-xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ft-color-primary, #1A6DCC);
}
.ft-text {
	font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
	font-size: var(--ft-text-md, 1rem);
	line-height: var(--ft-lh-body, 1.6);
	color: var(--ft-color-text, #1B1F23);
}
.ft-muted {
	color: var(--ft-color-muted, #5C636B);
}

/* ==========================================================================
   5. KOMPONENTY
   Sekcja nadpisuje komponent wyłącznie własnym prefiksem, nigdy przez !important
   i nigdy przez zmianę reguły w tym pliku.
   ========================================================================== */

/* Przycisk */
.entry-content a.ft-btn,
.ft-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ft-space-2, 0.5rem);
	min-height: 44px;
	padding: var(--ft-space-3, 0.75rem) var(--ft-space-5, 1.5rem);
	border: 1px solid transparent;
	border-radius: var(--ft-radius-sm, 4px);
	background-color: var(--ft-color-primary, #1A6DCC);
	color: var(--ft-color-bg, #FFFFFF);
	font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
	font-size: var(--ft-text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
		border-color var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
		color var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
		box-shadow var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
		transform var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.entry-content a.ft-btn:hover,
.ft-btn:hover {
	background-color: var(--ft-color-primary-hover, #0F5BAF);
	color: var(--ft-color-bg, #FFFFFF);
	box-shadow: var(--ft-shadow-md, 0 4px 12px rgba(17, 20, 24, 0.08), 0 2px 4px rgba(17, 20, 24, 0.06));
	transform: translateY(-1px);
}
.ft-btn:active {
	transform: translateY(0);
}
.ft-btn:focus-visible {
	outline: none;
	box-shadow: var(--ft-focus, 0 0 0 3px rgba(26, 109, 204, 0.35));
}
.ft-btn[disabled],
.ft-btn[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}
.ft-btn svg {
	flex-shrink: 0;
	transition: transform var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.entry-content a.ft-btn--primary,
.ft-btn--primary {
	background-color: var(--ft-color-primary, #1A6DCC);
	color: var(--ft-color-bg, #FFFFFF);
}
.entry-content a.ft-btn--ghost,
.ft-btn--ghost {
	background-color: transparent;
	border-color: var(--ft-color-primary, #1A6DCC);
	color: var(--ft-color-primary, #1A6DCC);
}
.entry-content a.ft-btn--ghost:hover,
.ft-btn--ghost:hover {
	background-color: var(--ft-color-primary, #1A6DCC);
	border-color: var(--ft-color-primary, #1A6DCC);
	color: var(--ft-color-bg, #FFFFFF);
	box-shadow: none;
}
.ft-btn--block {
	display: flex;
	width: 100%;
}

/* Badge */
.ft-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ft-space-1, 0.25rem);
	padding: var(--ft-space-1, 0.25rem) var(--ft-space-3, 0.75rem);
	border: 1px solid transparent;
	border-radius: var(--ft-radius-sm, 4px);
	background-color: var(--ft-color-primary-soft, #E8F1FB);
	color: var(--ft-color-primary, #1A6DCC);
	font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
	font-size: var(--ft-text-xs, 0.75rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ft-badge--success {
	background-color: color-mix(in srgb, var(--ft-color-success, #1E8E3E) 10%, var(--ft-color-bg, #FFFFFF));
	border-color: color-mix(in srgb, var(--ft-color-success, #1E8E3E) 30%, var(--ft-color-bg, #FFFFFF));
	color: var(--ft-color-success, #1E8E3E);
}
/* Stan „Sprzedano”: pełne wypełnienie, biały tekst, kontrast 5,6:1. */
.ft-badge--sold {
	background-color: var(--ft-color-sold, #C62828);
	border-color: var(--ft-color-sold, #C62828);
	color: var(--ft-color-bg, #FFFFFF);
	font-weight: 700;
	letter-spacing: 0.08em;
}
/* Duży znacznik, na przykład SPRZEDANO na karcie produktu. */
.ft-badge--lg {
	padding: var(--ft-space-2, 0.5rem) var(--ft-space-4, 1rem);
	border-radius: var(--ft-radius-md, 8px);
	font-size: var(--ft-text-lg, 1.25rem);
}

/* Karta */
.ft-card {
	display: flex;
	flex-direction: column;
	gap: var(--ft-space-3, 0.75rem);
	padding: var(--ft-space-5, 1.5rem);
	border: 1px solid var(--ft-color-border, #E2E4E7);
	border-radius: var(--ft-radius-md, 8px);
	background-color: var(--ft-color-bg, #FFFFFF);
	box-shadow: var(--ft-shadow-sm, 0 1px 2px rgba(17, 20, 24, 0.06), 0 1px 3px rgba(17, 20, 24, 0.08));
	transition: box-shadow var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
		transform var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
		border-color var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.ft-card--hover:hover {
	border-color: var(--ft-color-primary, #1A6DCC);
	box-shadow: var(--ft-shadow-md, 0 4px 12px rgba(17, 20, 24, 0.08), 0 2px 4px rgba(17, 20, 24, 0.06));
	transform: translateY(-2px);
}

/* Pole formularza */
.ft-field {
	display: flex;
	flex-direction: column;
	gap: var(--ft-space-2, 0.5rem);
}
.ft-label {
	font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
	font-size: var(--ft-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--ft-color-text, #1B1F23);
}
.ft-input {
	width: 100%;
	min-height: 44px;
	padding: var(--ft-space-3, 0.75rem) var(--ft-space-4, 1rem);
	border: 1px solid var(--ft-color-border, #E2E4E7);
	border-radius: var(--ft-radius-sm, 4px);
	background-color: var(--ft-color-bg, #FFFFFF);
	color: var(--ft-color-text, #1B1F23);
	font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
	font-size: var(--ft-text-md, 1rem);
	line-height: 1.4;
	transition: border-color var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
		box-shadow var(--ft-dur, 200ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
textarea.ft-input {
	min-height: 8rem;
	resize: vertical;
}
.ft-input:hover {
	border-color: var(--ft-legacy-faint, #9CA3AD);
}
.ft-input:focus-visible {
	outline: none;
	border-color: var(--ft-color-primary, #1A6DCC);
	box-shadow: var(--ft-focus, 0 0 0 3px rgba(26, 109, 204, 0.35));
}
.ft-input[aria-invalid="true"],
.ft-input.is-error {
	border-color: var(--ft-color-danger, #C62828);
}
.ft-input:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.ft-hint {
	font-size: var(--ft-text-xs, 0.75rem);
	color: var(--ft-color-muted, #5C636B);
}
.ft-form-error,
.ft-alert {
	padding: var(--ft-space-3, 0.75rem) var(--ft-space-4, 1rem);
	border: 1px solid color-mix(in srgb, var(--ft-color-danger, #C62828) 35%, var(--ft-color-bg, #FFFFFF));
	border-radius: var(--ft-radius-md, 8px);
	background-color: var(--ft-legacy-danger-soft, #FEF2F2);
	color: var(--ft-color-danger, #C62828);
	font-family: var(--ft-font-body, 'Instrument Sans', system-ui, sans-serif);
	font-size: var(--ft-text-sm, 0.875rem);
	line-height: 1.5;
}

/* ==========================================================================
   6. POMOCNICZE
   ========================================================================== */
.ft-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   7. RUCH: wejście w kadr
   Ukrycie działa tylko z klasą ft-js na <html> (dodaje ją moduł core w <head>),
   więc bez JavaScriptu treść jest zawsze widoczna. Obserwator: ft-core-reveal.js.
   Nie używaj .ft-reveal na H1 ani na głównym CTA.
   ========================================================================== */
.ft-js .ft-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--ft-dur-slow, 400ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
		transform var(--ft-dur-slow, 400ms) var(--ft-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.ft-js .ft-reveal.is-visible {
	opacity: 1;
	transform: none;
}
.ft-js .ft-reveal[data-delay="1"] { transition-delay: 80ms; }
.ft-js .ft-reveal[data-delay="2"] { transition-delay: 160ms; }
.ft-js .ft-reveal[data-delay="3"] { transition-delay: 240ms; }

/* ==========================================================================
   8. OGRANICZENIE RUCHU
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ft-js .ft-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.ft-btn,
	.ft-card,
	.ft-input,
	.ft-btn svg {
		transition: none;
	}
	.ft-btn:hover,
	.ft-card--hover:hover {
		transform: none;
	}
}

/* ==========================================================================
   HISTORIA ZMIAN
   1.0.0  tokeny z TOKENS.md, rozszerzenia layoutu, paleta legacy, zakres sekcji,
          typografia, przycisk, badge (w tym --sold i --lg), karta, pole, alert,
          visually-hidden, reveal, reduced motion
   ========================================================================== */