/* ==========================================================================
   Design tokens — HoroskopNaMiru.cz
   Jediný zdroj pravdy pro barvy, typografii, rozestupy, stíny, pohyb a vrstvení.
   Nic v main.css nesmí obsahovat natvrdo zapsanou barvu ani velikost písma.
   ========================================================================== */

:root {
	/* --- Barvy: noční základ ------------------------------------------- */
	--color-bg: #090b18;
	--color-bg-soft: #111427;
	--color-surface: #15182d;
	--color-surface-raised: #1c2039;

	--color-text: #f5f0e8;
	--color-text-muted: #aaa7b8;

	--color-gold: #c9a66b;
	--color-gold-light: #dec79e;
	--color-gold-dim: rgba(201, 166, 107, 0.16);

	--color-lavender: #aaa1d8;
	--color-lavender-dim: rgba(170, 161, 216, 0.14);

	--color-border: rgba(255, 255, 255, 0.1);
	--color-border-strong: rgba(255, 255, 255, 0.18);

	/* --- Barvy: světlá editorial plocha (článek) ------------------------ */
	--article-bg: #faf8f3;
	--article-bg-soft: #f2eee4;
	--article-text: #20202a;
	--article-text-muted: #5c5b66;
	--article-border: rgba(32, 32, 42, 0.12);
	--article-gold: #a07d3c;
	--article-lavender: #5f568f;

	/* --- Stavové barvy -------------------------------------------------- */
	--color-danger: #e0796f;
	--color-success: #7fbf9a;
	--color-focus: #dec79e;

	/* --- Typografie ----------------------------------------------------- */
	--font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
		"Times New Roman", Georgia, serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Fluidní škála. clamp(min, preferované, max) — mobile-first bez media query. */
	--text-xs: 0.75rem;      /* 12 */
	--text-sm: 0.875rem;     /* 14 */
	--text-base: 1rem;       /* 16 */
	--text-md: 1.0625rem;    /* 17 — tělo článku na mobilu */
	--text-lg: 1.125rem;     /* 18 */
	--text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--text-3xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
	--text-4xl: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
	--text-hero: clamp(2.5rem, 1.6rem + 4.4vw, 5rem);

	--leading-tight: 1.08;
	--leading-snug: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.7;
	--leading-article: 1.75;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.02em;
	--tracking-caps: 0.14em;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* --- Rozestupy (4px základ) ----------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 3rem;
	--space-9: 4rem;
	--space-10: 5rem;
	--space-11: 6rem;
	--space-12: 8rem;

	/* Vertikální rytmus sekcí — na mobilu těsnější. */
	--section-gap: clamp(3rem, 2rem + 5vw, 6.5rem);

	/* --- Kontejnery ----------------------------------------------------- */
	--container-wide: 1360px;
	--container: 1200px;
	--container-narrow: 920px;
	--container-text: 720px;
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

	/* --- Zaoblení ------------------------------------------------------- */
	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	/* --- Stíny ---------------------------------------------------------- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
	--shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
	--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
	--shadow-gold: 0 10px 40px rgba(201, 166, 107, 0.18);

	/* --- Vrstvení ------------------------------------------------------- */
	--z-base: 0;
	--z-raised: 10;
	--z-sticky: 100;
	--z-header: 200;
	--z-sticky-cta: 300;
	--z-overlay: 400;
	--z-dialog: 500;
	--z-toast: 600;

	/* --- Pohyb ---------------------------------------------------------- */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--duration-fast: 120ms;
	--duration: 220ms;
	--duration-slow: 420ms;
	--duration-orbit: 240s;

	/* --- Breakpointy (dokumentace; CSS je nečte) ------------------------- */
	/* 375 / 390 / 430 mobil · 768 tablet · 1024 malý desktop
	   1280 desktop · 1440+ široký desktop */

	/* --- Bezpečné zóny -------------------------------------------------- */
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-top: env(safe-area-inset-top, 0px);

	--header-height: 64px;
	--header-height-scrolled: 56px;
}

@media (min-width: 1024px) {
	:root {
		--header-height: 84px;
		--header-height-scrolled: 64px;
		--text-md: 1.1875rem; /* 19px — tělo článku na desktopu */
	}
}

/* --------------------------------------------------------------------------
   Světlá plocha. Aplikuje se na .surface-light (článek, formuláře v článku).
   Přemapuje stejné proměnné, takže komponenty fungují v obou režimech
   bez jediné duplicitní deklarace.
   -------------------------------------------------------------------------- */
.surface-light {
	--color-bg: var(--article-bg);
	--color-bg-soft: var(--article-bg-soft);
	--color-surface: #ffffff;
	--color-surface-raised: #ffffff;
	--color-text: var(--article-text);
	--color-text-muted: var(--article-text-muted);
	--color-gold: var(--article-gold);
	--color-gold-light: #8a6a2f;
	--color-gold-dim: rgba(160, 125, 60, 0.12);
	--color-lavender: var(--article-lavender);
	--color-lavender-dim: rgba(95, 86, 143, 0.1);
	--color-border: var(--article-border);
	--color-border-strong: rgba(32, 32, 42, 0.22);
	--color-focus: #6b5220;
	--shadow-sm: 0 1px 2px rgba(32, 32, 42, 0.08);
	--shadow: 0 8px 24px rgba(32, 32, 42, 0.09);
	--shadow-lg: 0 20px 60px rgba(32, 32, 42, 0.14);
	--shadow-gold: 0 10px 40px rgba(160, 125, 60, 0.14);

	background-color: var(--color-bg);
	color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Omezení pohybu — respektuje systémové nastavení uživatele.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 1ms;
		--duration: 1ms;
		--duration-slow: 1ms;
		--duration-orbit: 1ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}