/**
 * ACSS -> AT Framework variable mapping.
 *
 * Warstwa kompatybilności dla projektów migrujących z Automatic CSS
 * (miluba.pl, mitoterapia.com) na Advanced Themer framework.
 *
 * Ładować po arkuszu AT Framework, a przed CSS komponentów, które używają
 * starych nazw ACSS (var(--primary), var(--text-m), var(--space-s), ...).
 *
 * Mapa pokrywa TYLKO zmienne (tokeny). Klasy utility / BEM nie są mapowane.
 *
 * Konwencje porównawcze:
 *   ACSS shades:   ultra-light > light > (base) > semi-dark > dark > ultra-dark
 *   AT shades:     l-6 > l-5 > l-4 > l-3 > l-2 > l-1 > (base) > d-1 > d-2 > ... > d-6
 *
 *   ACSS trans-N = N% alpha  (trans-10 = 10% widoczność)
 *   AT t-N:        t-1 (α 0.84) .. t-6 (α 0.05), odwrotna numeracja
 *     t-1 α .84 | t-2 α .68 | t-3 α .53 | t-4 α .37 | t-5 α .21 | t-6 α .05
 *
 *
 * DLACZEGO CALOSC SIEDZI W @layer lukuro.compat
 *
 * Warstwa kaskady zalatwia tu dwie rzeczy naraz, dwoma niezaleznymi mechanizmami.
 *
 * 1. PRIORYTET. Deklaracje spoza warstw bija KAZDA warstwe, niezaleznie od
 *    specyficznosci. Na projekcie ze stojacym pluginem Automatic CSS (miluba,
 *    mitoterapia) ACSS deklaruje te nazwy sam, poza warstwa, wiec wygrywa - a ta
 *    mapa schodzi do roli nieszkodliwego podkladu. To wlasciwe zachowanie: mapa
 *    jest proteza dla projektow BEZ ACSS i nie ma prawa nadpisywac oryginalu tam,
 *    gdzie oryginal jest zainstalowany. Wczesniej, poza warstwa, rozstrzygala
 *    o tym kolejnosc enqueue - czyli przypadek.
 *
 * 2. PICKER ADVANCED THEMERA. AT buduje liste podpowiedzi zmiennych skanujac
 *    arkusze na kanwie buildera (`populateCSSVariables`, assets/js/builder.js):
 *    przechodzi PLASKO po `sheet.cssRules` i bierze te, ktorych `selectorText`
 *    zawiera ":root". Regula w @layer to na tym poziomie CSSLayerBlockRule,
 *    ktora `selectorText` nie ma, a AT nie schodzi w zagniezdzenie. Efekt: te
 *    134 aliasy znikaja z podpowiedzi, zamiast zasmiecac je dlugiem, ktory
 *    docelowo ma zniknac. Nie jest to obejscie literalu ":root" w ich filtrze,
 *    tylko konsekwencja tego, czym warstwa jest w CSSOM.
 *
 * Warstwa dziala niezaleznie od ustawienia "Cascade layer" w Bricks Settings -
 * tamten przelacznik steruje wylacznie tym, czy Bricks laduje wlasne warianty
 * `-layer` swoich arkuszy.
 *
 * `lukuro-tokens.css` celowo zostaje POZA warstwa: sloty `--lukuro-color-*` maja
 * byc widoczne w podpowiedziach i maja wygrywac z tymi aliasami.
 *
 * Cialo bloku celowo NIE jest wciete o poziom glebiej - wciecie 226 linii
 * zamieniloby diff wydania w sciane szumu i ukrylo w niej faktyczna zmiane.
 */

@layer lukuro.compat;

@layer lukuro.compat {

:root {
	/* ============================================================
	 * KOLORY — PRIMARY
	 * ============================================================ */
	--primary: var(--at-primary);
	--primary-hover: var(--at-primary-d-1);
	--primary-light: var(--at-primary-l-2);
	--primary-ultra-light: var(--at-primary-l-5);
	--primary-semi-dark: var(--at-primary-d-1);
	--primary-dark: var(--at-primary-d-2);
	--primary-ultra-dark: var(--at-primary-d-5);

	/* Primary — transparencje (ACSS N% alfa -> najbliższy AT t-*) */
	--primary-trans-10: var(--at-primary-t-6);  /* α .10 -> α .05 */
	--primary-trans-20: var(--at-primary-t-5);  /* α .20 -> α .21 */
	--primary-trans-30: var(--at-primary-t-4);  /* α .30 -> α .37 */
	--primary-trans-40: var(--at-primary-t-4);
	--primary-trans-50: var(--at-primary-t-3);
	--primary-trans-60: var(--at-primary-t-3);
	--primary-trans-70: var(--at-primary-t-2);
	--primary-trans-80: var(--at-primary-t-2);
	--primary-trans-90: var(--at-primary-t-1);

	/* Primary-dark — warianty shade-then-alpha (ACSS łączy shade + trans) */
	--primary-dark-trans-10: hsla(var(--at-primary-h), var(--at-primary-s), var(--at-primary-d-2-l, 34%), 0.10);
	--primary-dark-trans-20: hsla(var(--at-primary-h), var(--at-primary-s), var(--at-primary-d-2-l, 34%), 0.20);
	--primary-dark-trans-30: hsla(var(--at-primary-h), var(--at-primary-s), var(--at-primary-d-2-l, 34%), 0.30);

	--primary-ultra-dark-trans-10: hsla(var(--at-primary-h), var(--at-primary-s), 12%, 0.10);
	--primary-ultra-dark-trans-20: hsla(var(--at-primary-h), var(--at-primary-s), 12%, 0.20);

	/* ============================================================
	 * KOLORY — SECONDARY / ACCENT
	 * ============================================================ */
	--accent: var(--at-secondary);
	--accent-hover: var(--at-secondary-d-1);
	--accent-light: var(--at-secondary-l-2);
	--accent-ultra-light: var(--at-secondary-l-5);
	--accent-semi-dark: var(--at-secondary-d-1);
	--accent-dark: var(--at-secondary-d-2);
	--accent-ultra-dark: var(--at-secondary-d-5);

	--accent-trans-10: var(--at-secondary-t-6);
	--accent-trans-20: var(--at-secondary-t-5);
	--accent-trans-30: var(--at-secondary-t-4);

	/* Secondary alias (niektóre projekty ACSS używają --secondary) */
	--secondary: var(--at-secondary);
	--secondary-hover: var(--at-secondary-d-1);
	--secondary-light: var(--at-secondary-l-2);
	--secondary-ultra-light: var(--at-secondary-l-5);
	--secondary-dark: var(--at-secondary-d-2);
	--secondary-ultra-dark: var(--at-secondary-d-5);

	--secondary-trans-10: var(--at-secondary-t-6);
	--secondary-trans-20: var(--at-secondary-t-5);
	--secondary-trans-30: var(--at-secondary-t-4);

	/* ============================================================
	 * KOLORY — NEUTRAL
	 * ============================================================ */
	--neutral: var(--at-neutral);
	--neutral-hover: var(--at-neutral-d-1);
	--neutral-light: var(--at-neutral-l-2);
	--neutral-ultra-light: var(--at-neutral-l-5);
	--neutral-semi-dark: var(--at-neutral-d-1);
	--neutral-dark: var(--at-neutral-d-2);
	--neutral-ultra-dark: var(--at-neutral-d-5);

	--neutral-trans-10: var(--at-neutral-t-6);
	--neutral-trans-20: var(--at-neutral-t-5);
	--neutral-trans-30: var(--at-neutral-t-4);
	--neutral-trans-40: var(--at-neutral-t-4);
	--neutral-trans-50: var(--at-neutral-t-3);

	/* ============================================================
	 * KOLORY — BASE
	 * ============================================================ */
	--black: var(--at-black);
	--white: var(--at-white);

	--black-trans-10: var(--at-black-t-6);
	--black-trans-20: var(--at-black-t-5);
	--black-trans-30: var(--at-black-t-4);
	--black-trans-50: var(--at-black-t-3);

	--white-trans-10: var(--at-white-t-6);
	--white-trans-20: var(--at-white-t-5);
	--white-trans-30: var(--at-white-t-4);
	--white-trans-50: var(--at-white-t-3);

	/* ============================================================
	 * KOLORY — TEKST / LINKI
	 * ACSS nie ma 1:1 w AT, mapujemy przez neutral + dedykowane link
	 * ============================================================ */
	--text-color: var(--at-neutral-d-4);
	--text-dark: var(--at-neutral-d-4);
	--text-dark-muted: var(--at-neutral-d-2);
	--text-light: var(--at-neutral-l-5);
	--text-light-muted: var(--at-neutral-l-3);

	--link: var(--at-link-color);
	--link-hover: var(--at-link-color--hover);
	--link-active: var(--at-link-color--active);

	/* ============================================================
	 * KOLORY — STATUS (ACSS: success/warning/danger/info)
	 * ============================================================ */
	--success: var(--at-success);
	--warning: var(--at-warning);
	--danger: var(--at-danger);
	--error: var(--at-danger);
	--info: var(--at-info);

	/* ============================================================
	 * TYPOGRAFIA — font sizes
	 * ACSS: xs, s, m, l, xl, xxl  |  AT: 2xs, xs, s, m, l, xl, 2xl, 3xl
	 * ============================================================ */
	--text-xs: var(--at-text--xs);
	--text-s: var(--at-text--s);
	--text-m: var(--at-text--m);
	--text-l: var(--at-text--l);
	--text-xl: var(--at-text--xl);
	--text-xxl: var(--at-text--2xl);

	/* Nagłówki ACSS (h1..h6) -> AT heading scale */
	--h1: var(--at-heading--xl);
	--h2: var(--at-heading--l);
	--h3: var(--at-heading--m);
	--h4: var(--at-heading--s);
	--h5: var(--at-heading--xs);
	--h6: var(--at-heading--2xs);

	/* Waga nagłówków.
	   AT nie generuje tokenu wagi (jedyny `*-font-weight` w jego zestawie to
	   `--at-mark-font-weight: inherit`), więc jako jedyna pozycja w tej mapie
	   nie cytuje tokenu, tylko podaje wartość wprost. Bez niej `font-weight:
	   var(--heading-font-weight)` w `checkout.css:104` i `coupon-redeem.css:337`
	   rozwiązuje się do pustki i nagłówek traci pogrubienie. */
	--heading-font-weight: 700;

	/* Alias ACSS v3+ */
	--h1-size: var(--at-heading--xl);
	--h2-size: var(--at-heading--l);
	--h3-size: var(--at-heading--m);
	--h4-size: var(--at-heading--s);
	--h5-size: var(--at-heading--xs);
	--h6-size: var(--at-heading--2xs);

	/* ============================================================
	 * SPACING
	 * ACSS: xs, s, m, l, xl, xxl  |  AT: 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl
	 * ============================================================ */
	--space-xs: var(--at-space--xs);
	--space-s: var(--at-space--s);
	--space-m: var(--at-space--m);
	--space-l: var(--at-space--l);
	--space-xl: var(--at-space--xl);
	--space-xxl: var(--at-space--2xl);

	/* ============================================================
	 * LAYOUT — gutter, gap, container, section
	 * ============================================================ */
	--gutter: var(--at-gutter);
	--container-gap: var(--at-container-gap);
	--content-gap: var(--at-content-gap);
	--content-gap-s: var(--at-content-gap--s);
	--content-gap-xs: var(--at-content-gap--xs);

	--grid-gap: var(--at-grid-gap);
	--grid-gap-s: var(--at-grid-gap--s);
	--grid-gap-l: var(--at-grid-gap--l);

	--section-max-width: var(--at-section-max-width);
	--section-padding-block: var(--at-section-padding-block);
	--site-box-max-width: var(--at-site-box-max-width);

	/* ============================================================
	 * BORDER RADIUS
	 * ACSS: s, m, l, xl, xxl, full  |  AT: 2xs, xs, s, m, l, xl, full
	 * ============================================================ */
	--radius-s: var(--at-radius--s);
	--radius-m: var(--at-radius--m);
	--radius-l: var(--at-radius--l);
	--radius-xl: var(--at-radius--xl);
	--radius-xxl: var(--at-radius--xl);
	--radius-full: var(--at-radius-full);
	--radius: var(--at-radius--s);

	/* ============================================================
	 * BORDER
	 * ============================================================ */
	--border-color: var(--at-border-color);
	--border-width: var(--at-border-width);
	--border: var(--at-border--standard);

	/* ============================================================
	 * SHADOW
	 * ============================================================ */
	--shadow-s: var(--at-shadow--s);
	--shadow-m: var(--at-shadow--m);
	--shadow-l: var(--at-shadow--l);
	--shadow-xl: var(--at-shadow--xl);
	--shadow-xxl: var(--at-shadow--2xl);

	/* ============================================================
	 * TRANSITIONS
	 * ACSS: transition-duration / transition-timing
	 * AT:   duration--fast/medium/slow, brak ease token
	 * ============================================================ */
	--transition-duration: var(--at-duration--medium);
	--transition-duration-fast: var(--at-duration--fast);
	--transition-duration-slow: var(--at-duration--slow);
	--transition-timing: ease-in-out;

	/* ============================================================
	 * FOCUS
	 * ============================================================ */
	--focus-outline-color: var(--at-focus-outline-color);
	--focus-outline-offset: var(--at-focus-outline-offset);
	--focus-outline-width: var(--at-focus-outline-width);

	/* ============================================================
	 * HEADER
	 *
	 * Kanonem wysokości nagłówka jest --lukuro-header-height z modułu
	 * layout-metrics (#17): wartość MIERZONA z #brx-header, aktualizowana
	 * przy zmianie breakpointu i po doładowaniu fontów.
	 *
	 * --at-header-height jest tu wyłącznie ostatnim fallbackiem, bo AT niczego
	 * nie mierzy: wartość wpisuje się ręcznie w Theme Settings -> Advanced CSS
	 * ("Manually set the header height at different breakpoints"), fabrycznie
	 * stoi tam placeholder 150px, a na projekcie bez wypełnionego bloku
	 * wychodzi 0px. Alias bez tego pierwszeństwa cicho podstawiał liczbę
	 * wpisaną ręcznie wszędzie, gdzie ktoś użył starej nazwy - bez objawu
	 * innego niż offset nietrafiony o kilkadziesiąt px.
	 *
	 * Nowy kod nie używa żadnej z tych dwóch nazw. Patrz docs/design-tokens.md,
	 * sekcja "Metryki layoutu".
	 * ============================================================ */
	--header-height: var(--lukuro-header-height, var(--at-header-height));
}

} /* @layer lukuro.compat */