/* =========================================================================
 * MediTravel — 00-tokens.css
 * Design tokeny dle prototypu index.html (redesign 2026).
 * Jediné místo, kde se definují barvy, typografie, layout, z-index.
 * ======================================================================= */

:root {
	/* ---- Barvy (Material-like paleta z prototypu) ---- */
	--mt-primary: #006590;            /* hlavní modrá */
	--mt-primary-strong: #004c6e;     /* tmavší hover/aktivní */
	--mt-primary-container: #009ee0;  /* světlejší kontejner */
	--mt-secondary: #F18F01;          /* oranžová — hover odkazů, CTA */
	--mt-secondary-container: #fd8a30;
	--mt-tertiary: #596400;

	--mt-bg: #f8fafb;                 /* background / surface */
	--mt-surface-white: #FFFCF9;      /* teplá bílá — header, footer, karty */
	--mt-surface-container: #eceeef;  /* kruhy ikon, jemné podklady */
	--mt-surface-container-low: #f2f4f5; /* pozadí sekce Nabídka pobytů */
	--mt-accent-soft: #E0F2FE;        /* jemně modré pozadí */

	--mt-ink: #2C2621;                /* text-ink — silné texty */
	--mt-muted: #8a7d72;              /* text-muted — copyright, popisky */
	--mt-on-surface: #191c1d;
	--mt-on-surface-variant: #3e4850; /* běžný text na světlém povrchu */
	--mt-outline: #6e7881;
	--mt-outline-variant: #bec8d1;    /* bordery (často s alpha .3) */
	--mt-error: #ba1a1a;

	--mt-border-soft: rgba(190, 200, 209, 0.3); /* outline-variant/30 */

	/* ---- Typografie ----
	 * KOREKCE 1 (21. 7. 2026): display font Playfair Display → Manrope
	 * (klient: žádné patky na webu). Fallback bezpatkový. */
	--mt-font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--mt-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* fluid clamp — obsahové velikosti nikdy natvrdo v px */
	--mt-fs-display: clamp(32px, 4.5vw, 48px);      /* display-lg */
	--mt-fs-h1: clamp(28px, 3.4vw, 40px);
	--mt-fs-h2: clamp(24px, 2.8vw, 32px);           /* headline-lg */
	--mt-fs-h3: clamp(20px, 2vw, 24px);             /* headline-md */
	--mt-fs-body-lg: clamp(16px, 1.3vw, 18px);
	--mt-fs-body: clamp(15px, 1.1vw, 16px);         /* body-md */
	--mt-fs-small: 14px;                            /* text-sm */
	--mt-fs-label-lg: 14px;                         /* label-lg (menu, odkazy) */
	--mt-fs-label-sm: 12px;                         /* label-sm (copyright) */

	--mt-ls-label: 0.05em;                          /* letter-spacing menu */
	--mt-ls-widest: 0.1em;                          /* nadpisy sloupců patičky */

	/* ---- Layout ---- */
	--mt-container: 1200px;
	--mt-gutter: 24px;
	--mt-section-gap: 80px;
	--mt-header-h: 80px;
	--mt-header-h-scrolled: 64px;

	/* ---- Z-index plán ---- */
	--mt-z-header: 200;
	--mt-z-backdrop: 990;
	--mt-z-drawer: 1000;

	/* ---- Rádiusy ---- */
	--mt-r-sm: 2px;
	--mt-r: 4px;
	--mt-r-lg: 8px;
	--mt-r-xl: 12px;
	--mt-r-full: 12px;  /* design "rounded-full" = 12px (config full: 0.75rem), NE kruh! */
	--mt-r-pill: 999px; /* nepoužívat pro prvky z designu */

	/* ---- Stíny & přechody ---- */
	--mt-shadow-header: 0 20px 25px -5px rgba(44, 38, 33, 0.08), 0 8px 10px -6px rgba(44, 38, 33, 0.06);
	--mt-shadow-card: 0 10px 30px rgba(44, 38, 33, 0.08);
	--mt-tr: 0.25s ease;
}

/* Mobil: užší gutter — přes token se sladí header, patička i obsahové řádky */
@media (max-width: 640px) {
	:root {
		--mt-gutter: 16px; /* margin-mobile z prototypu */
	}
}