/* ==========================================================================
   MON PLAISIR — TOKENY
   Przepisane 1:1 z design-system/tokens/*. Jedyne różnice wobec systemu:
   1. @font-face nie ma tutaj — deklaruje je theme.json (settings.typography
      .fontFamilies[].fontFace) z plików w assets/fonts/. Zero żądań do Google.
   2. --mp-text-display to clamp() zamiast 4rem — hero skaluje się płynnie
      (wymóg wp/prompt-claude-code.md, sekcja 3).
   3. Aliasy nocne obowiązują też dla .is-style-nocna (wariant sekcji z styles/nocna.json).
   Nie dopisuj tu komponentów — te są w components.css.
   ========================================================================== */

/* ——— Kroje ——— */
:root {
	--mp-font-heading: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--mp-font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
	--mp-font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ——— Kolor: cztery rampy ——— */
:root {
	/* Atrament — czerń logotypu, lekko ciepła, nigdy #000 */
	--mp-ink-100: #E6E4E0;
	--mp-ink-200: #C6C3BD;
	--mp-ink-300: #9C9891;
	--mp-ink-400: #726E67;
	--mp-ink-500: #4E4B45;
	--mp-ink-600: #35322E;
	--mp-ink-700: #23211E;
	--mp-ink-800: #171614;
	--mp-ink-900: #0E0E0D;

	/* Papier — ciepła biel archiwum, nigdy #FFF */
	--mp-paper-100: #FDFCFA;
	--mp-paper-200: #F7F4EE;
	--mp-paper-300: #EFEAE1;
	--mp-paper-400: #E3DCD0;
	--mp-paper-500: #D3C9B8;

	/* Mosiądz — jedyny akcent */
	--mp-brass-100: #F7EFDF;
	--mp-brass-200: #EFDDBD;
	--mp-brass-300: #DFC292;
	--mp-brass-400: #C9A063;
	--mp-brass-500: #B4823A;
	--mp-brass-600: #94682B;
	--mp-brass-700: #6F4E21;
	--mp-brass-800: #4A3417;
	--mp-brass-900: #2A1E0E;

	/* Noc — tła sekcji ciemnych */
	--mp-night-500: #232838;
	--mp-night-600: #1A1E2B;
	--mp-night-700: #14171F;
	--mp-night-800: #0F1117;
	--mp-night-900: #0A0B0F;

	/* Stany systemowe */
	--mp-success-500: #3F7A42;
	--mp-warning-500: #A9741B;
	--mp-danger-500: #9B3B2E;

	/* ——— ALIASY SEMANTYCZNE — tylko tych używaj w komponentach ——— */
	--mp-bg: var(--mp-paper-200);
	--mp-bg-subtle: var(--mp-paper-300);
	--mp-surface: var(--mp-paper-100);
	--mp-surface-raised: var(--mp-paper-100);
	--mp-text: var(--mp-ink-900);
	--mp-text-secondary: var(--mp-ink-600);
	--mp-text-muted: var(--mp-ink-400);
	--mp-text-inverse: var(--mp-paper-200);
	--mp-border: var(--mp-paper-400);
	/* Granica komponentu sterującego (przycisk obrysowy, pole formularza) musi mieć
	   3:1 wobec tła — WCAG 2.2, 1.4.11. Ink-200 dawał 1,46:1 na papierze,
	   czyli ramka była praktycznie niewidoczna. Ink-400 daje 4,18:1. */
	--mp-border-strong: var(--mp-ink-400);
	/* KOREKTA KONTRASTU wobec design systemu (zmierzone, WCAG 2.2 AA):
	   brass-600 na papierze daje 4,48:1 (tło 200) i 4,10:1 (tło 300) — poniżej progu
	   4,5:1 dla tekstu, a nadtytuł ma 13 px. Tekstowy akcent schodzi więc o krok niżej,
	   na brass-700: 6,86:1 / 6,29:1 / 7,35:1. Reguła systemu („mosiądz jako tekst
	   dopiero od 600 w górę”) zostaje zachowana. */
	--mp-accent: var(--mp-brass-700);
	/* Wypełnienia i linie: brass-500 zostaje tam, gdzie nie niesie tekstu
	   (kreska 48 × 2 px, pasek postępu, obramowania). */
	--mp-accent-bold: var(--mp-brass-500);
	/* Tło przycisku z jasnym napisem: brass-500 dawał 3,31:1, brass-600 daje 4,79:1. */
	--mp-accent-fill: var(--mp-brass-600);
	--mp-accent-hover: var(--mp-brass-800);
	--mp-accent-soft: var(--mp-brass-100);
	--mp-on-accent: var(--mp-paper-100);
	--mp-focus: var(--mp-brass-700);
	--mp-overlay: color-mix(in srgb, var(--mp-night-900) 72%, transparent);
}

/* ——— Typografia ——— */
:root {
	/* Wysokość przyklejonego nagłówka — używana też jako odsunięcie treści. */
	--mp-header-h: 76px;

	--mp-text-display: clamp(2.5rem, 6vw, 4rem); /* 40 → 64px */
	--mp-text-h1: 2.75rem;                       /* 44 */
	--mp-text-h2: 2rem;                          /* 32 */
	--mp-text-h3: 1.5rem;                        /* 24 */
	--mp-text-h4: 1.25rem;                       /* 20 */
	--mp-text-lead: 1.1875rem;                   /* 19 */
	--mp-text-body: 1.0625rem;                   /* 17 */
	--mp-text-small: 0.9375rem;                  /* 15 */
	--mp-text-kicker: 0.8125rem;                 /* 13 */
	--mp-text-caption: 0.75rem;                  /* 12 */

	--mp-leading-tight: 1.05;
	--mp-leading-heading: 1.15;
	--mp-leading-body: 1.65;
	--mp-leading-loose: 1.8;

	--mp-tracking-display: -0.01em;
	--mp-tracking-heading: 0.02em;
	--mp-tracking-kicker: 0.18em;
	--mp-tracking-body: 0;

	--mp-weight-regular: 400;
	--mp-weight-medium: 500;
	--mp-weight-bold: 700;

	--mp-measure: 68ch;
	--mp-measure-narrow: 46ch;
}

/* ——— Odstępy ——— */
:root {
	--mp-space-1: 0.25rem;
	--mp-space-2: 0.5rem;
	--mp-space-3: 0.75rem;
	--mp-space-4: 1rem;
	--mp-space-5: 1.5rem;
	--mp-space-6: 2rem;
	--mp-space-7: 3rem;
	--mp-space-8: 4rem;
	--mp-space-9: 6rem;
	--mp-space-10: 8rem;
	--mp-space-11: 10rem;

	--mp-section-y: var(--mp-space-9);
	--mp-section-y-sm: var(--mp-space-7);
	--mp-gutter: var(--mp-space-5);
	/* JEDNA szerokość dla całego serwisu. Wcześniej były trzy (1180 / 760 / 1440)
	   i sekcje prozatorskie wcinały się względem nagłówków nad nimi — lewa
	   krawędź nie trzymała pionu. Długość wiersza pilnuje osobno miara 68 znaków
	   na akapicie, bo to zadanie typografii, nie kontenera. */
	--mp-container: 1366px;
}

/* ——— Promienie i głębia ——— */
:root {
	--mp-radius-none: 0;
	--mp-radius-sm: 2px;
	--mp-radius-md: 4px;
	--mp-radius-lg: 8px;
	--mp-radius-pill: 999px;
	--mp-radius-circle: 50%;

	--mp-border-hairline: 1px;
	--mp-border-rule: 2px;

	--mp-shadow-none: none;
	--mp-shadow-sm: 0 1px 2px color-mix(in srgb, var(--mp-ink-900) 8%, transparent);
	--mp-shadow-md: 0 4px 16px -4px color-mix(in srgb, var(--mp-ink-900) 14%, transparent);
	--mp-shadow-lg: 0 18px 48px -12px color-mix(in srgb, var(--mp-ink-900) 26%, transparent);
	--mp-glow-brass: 0 0 0 1px var(--mp-accent-bold), 0 0 24px -6px color-mix(in srgb, var(--mp-brass-500) 45%, transparent);
}

/* ——— Ruch ——— */
:root {
	--mp-duration-instant: 90ms;
	--mp-duration-fast: 160ms;
	--mp-duration-base: 220ms;
	--mp-duration-slow: 320ms;
	--mp-duration-reveal: 640ms;

	--mp-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--mp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	--mp-transition-hover:
		color var(--mp-duration-fast) var(--mp-ease-out),
		background-color var(--mp-duration-fast) var(--mp-ease-out),
		border-color var(--mp-duration-fast) var(--mp-ease-out),
		opacity var(--mp-duration-fast) var(--mp-ease-out);
}

/* ——— Sekcja nocna: przełącza wyłącznie aliasy ——— */
.mp-night,
[data-mp-theme="night"],
.is-style-nocna {
	--mp-bg: var(--mp-night-800);
	--mp-bg-subtle: var(--mp-night-700);
	--mp-surface: var(--mp-night-700);
	--mp-surface-raised: var(--mp-night-600);
	--mp-text: var(--mp-paper-200);
	--mp-text-secondary: var(--mp-ink-200);
	--mp-text-muted: var(--mp-ink-300);
	--mp-text-inverse: var(--mp-ink-900);
	--mp-border: var(--mp-night-500);
	--mp-border-strong: var(--mp-ink-500);
	--mp-accent: var(--mp-brass-300);
	--mp-accent-bold: var(--mp-brass-400);
	/* Na nocy przycisk ma ciemny napis na jasnym mosiądzu — 8,14:1. */
	--mp-accent-fill: var(--mp-brass-400);
	--mp-accent-hover: var(--mp-brass-200);
	--mp-accent-soft: color-mix(in srgb, var(--mp-brass-500) 16%, transparent);
	--mp-on-accent: var(--mp-night-900);
	--mp-focus: var(--mp-brass-300);
	color-scheme: dark;
	background-color: var(--mp-bg);
	color: var(--mp-text);
}

/* Krok skali na mobile — hero ma clamp(), więc go tu nie ruszamy */
@media (max-width: 720px) {
	:root {
		--mp-text-h1: 2rem;
		--mp-text-h2: 1.625rem;
		--mp-text-h3: 1.3125rem;
	}
}

/* Rynna na telefonie schodzi z 24 do 16 px. Przy 390 px szerokości ekranu
   24 px z każdej strony zjada 12% widoku, a wiersz tekstu robi się za krótki —
   16 px to wartość, na której stoją i iOS, i Material Design. Powyżej 560 px
   miejsca jest dość, więc wraca pełna rynna z design systemu. */
@media (max-width: 560px) {
	:root { --mp-gutter: var(--mp-space-4); }
}