/* =====================================================================
   variables.css - nadpisania zmiennych Fictioneera (paleta, typografia, szerokosci)
   Patrz docs/01-fictioneer-analysis.md (tabela zmiennych) i 05-redesign-spec.md sekcja A.

   KLUCZOWE: Fictioneer to globalny silnik HSL. Tla/teksty licza sie z bazy hue
   (dark ~222deg) + globalne pokretla --hue-rotate / --saturation / --darken.
   Recolorujemy PRZEZ te pokretla, nie przepisujac kazdej zmiennej (zlota zasada z docs/01).
   Akcent ember ustawiamy wprost przez --primary-* (nie podlega hue-rotate).

   Wartosci globalnych pokretel to STARTERY - do dostrojenia NA ZYWO w Fazie 2
   (maintenance mode), bo dokladny near-black violet najlepiej dobrac na realnym renderze.
   Brand: ember #e06c50 na ciepło-fioletowym "near-black mystery".
   ===================================================================== */

/* ---------- DARK (tryb glowny: dark_mode_as_default) ---------- */
:root[data-mode="dark"] {
	/* Globalny recolor calej palety dark: baza 222deg -> ~262deg (fiolet),
	   lekko stonowane, glebszy near-black. TUNE: dostroic na zywo. */
	--hue-rotate: 40deg;   /* 222 + 40 = ~262 -> fioletowy ground */
	--saturation: 0.85;    /* <1 = lekko stonowane (mystery) */
	--darken: 0.82;        /* <1 = ciemniej (near-black 6-8%) */

	/* Ember - jedyny mocny akcent (CTA / linki / hover / focus). */
	--primary-400: #e8866f;
	--primary-500: #e06c50;
	--primary-600: #c8553a;

	/* Kolor UI przegladarki mobilnej (format Fictioneera "H S L", bez jednostek). */
	--theme-color-base: 262 22 6;
}

/* ---------- LIGHT (drugorzedny - zachowujemy dzialajacy przelacznik) ----------
   Prototyp nie definiowal light, wiec to dobrana jasna paleta brandowa (cieply + ember).
   TODO(tune-live): docelowo ciepla kosc sloniowa; na start lekki cieply shift. */
:root[data-mode="light"] {
	--hue-rotate: 16deg;   /* lekko cieplejszy niz domyslny chlodny light */
	--saturation: 0.9;
	--primary-400: #d96f53;
	--primary-500: #c8553a;
	--primary-600: #a43f25;
	--theme-color-base: 36 28 96;
}

/* ---------- Wspolne (oba tryby): typografia + szerokosci ----------
   REMAP rodzin przez --ff-* (NIGDY hardcode font-family w regulach).
   Fonty bundlowane w Fictioneerze (self-hosted): cormorant-garamond, inter, ...
   TODO(verify): potwierdzic dokladne nazwy @font-face w fonts-full.css przed deployem. */
:root {
	/* Treść UI - czytelny humanist. */
	--ff-base: "Inter", var(--ff-system);

	/* Naglowki / tytuly - wyrazisty literacki serif "mystery". */
	--ff-heading: "Cormorant Garamond", Georgia, var(--ff-base);
	--ff-note: "Inter", var(--ff-base);

	/* Role naglowkowe dziedzicza serif. */
	--ff-site-title: var(--ff-heading);
	--ff-story-title: var(--ff-heading);
	--ff-chapter-title: var(--ff-heading);
	--ff-chapter-list-title: var(--ff-heading);
	--ff-card-title: var(--ff-heading);

	/* Szerokosc powierzchni "odkrywania" (homepage/listy). Czytnik wezszy -
	   steruje nim default formatting (functions.php, ~760px) + suwak czytelnika. */
	--site-width: 1200px;
}

/* ---------- Czytnik: delikatne dostrojenie rytmu kolumny tekstu ----------
   Szerokosc i wiekszosc typografii idzie z default formatting + modalem czytelnika.
   Tu tylko subtelny odstep akapitow. */
.chapter-formatting {
	--paragraph-spacing: 1.6em;
}