/* =========================================================================
   STEGU DESIGN SYSTEM — TOKENS
   Jediný zdroj pravdy pro CSS proměnné.
   Načítat jako PRVNÍ před všemi ostatními soubory.
   =========================================================================
   Pořadí <link> tagů v Shoptetu:
     1. tokens.css       ← tento soubor
     2. shoptet-fixes.css
     3. content.css
     4. homepage.css
     5. gallery.css
   ========================================================================= */

:root {
	/* =========================================
     1. PRIMITIVA (Základní paleta - Global Palette)
     Definujeme surové odstíny. Názvy odrážejí barvu, ne použití.
     ========================================= */

	/* Brand barvy - Červená */
	--stegu-color-red-500: #b71c2b; /* Základní brand */
	--stegu-color-red-700: #8e1523; /* Tmavší brand */

	/* Accent barvy - Zlatá/Oranžová */
	--stegu-color-gold-500: #db9b2e;
	--stegu-color-gold-700: #b97d23;

	/* Funkční barvy - Modrá, Zelená, Červená (chyby) */
	--stegu-color-blue-500: #2a7aaf;
	--stegu-color-blue-700: #1f5d89;
	--stegu-color-green-500: #28a745;
	--stegu-color-danger-500: #dc3545;

	/* Neutrální barvy - Šedá a Černá (Grayscale) */
	--stegu-color-gray-900: #1f1f1f; /* Téměř černá */
	--stegu-color-gray-800: #343434; /* Tmavě šedá */
	--stegu-color-gray-500: #666666; /* Střední šedá */
	--stegu-color-gray-300: #c9c9c9; /* Světlejší šedá (Strong border) */
	--stegu-color-gray-200: #e2e2e2; /* Světlá šedá (Weak border) */
	--stegu-color-gray-100: #f8f8f8; /* Téměř bílá (Background) */
	--stegu-color-white: #ffffff;

	/* =========================================
     2. SÉMANTIKA (Aliasy pro použití - Semantic Tokens)
     Mapujeme primitiva na konkrétní účel v UI.
     Tyto proměnné používáme v CSS třídách níže.
     ========================================= */

	/* --- Akční prvky (Tlačítka, Interaktivní prvky) --- */
	/* Primary: Hlavní akce (Koupit, Odeslat) */
	--stegu-action-primary: var(--stegu-color-red-500);
	--stegu-action-primary-int: var(
		--stegu-color-red-700
	); /* Interaction (Hover/Active) */

	/* Secondary: Doplňkové akce (CTA, Zvýraznění) */
	--stegu-action-secondary: var(--stegu-color-gold-500);
	--stegu-action-secondary-int: var(--stegu-color-gold-700);

	/* Neutral: Méně důležité akce (Zpět, Filtry) */
	--stegu-action-neutral: var(--stegu-color-gray-200);
	--stegu-action-neutral-int: var(--stegu-color-gray-300);

	/* --- Typografie (Text) --- */
	--stegu-text-main: var(--stegu-color-gray-800); /* Základní text */
	--stegu-text-strong: var(
		--stegu-color-gray-900
	); /* Nadpisy, Důležité, Hover textu */
	--stegu-text-muted: var(
		--stegu-color-gray-500
	); /* Doplňkové info, popisky */
	--stegu-text-inverse: var(--stegu-color-white); /* Text na tmavém pozadí */

	/* --- Pozadí (Surface/Background) --- */
	--stegu-surface-base: var(--stegu-color-white); /* Karty, obsah, modály */
	--stegu-surface-alt: var(--stegu-color-gray-100); /* Pozadí sekcí, filtry */
	--stegu-surface-dark: var(--stegu-color-gray-800); /* Footer, tmavé sekce */

	/* --- Ohraničení (Borders) --- */
	--stegu-border-weak: var(
		--stegu-color-gray-200
	); /* Jemné linky, oddělovače */
	--stegu-border-strong: var(
		--stegu-color-gray-300
	); /* Vstupy, aktivní prvky */

	/* --- Stavové hlášky (Feedback & Info) --- */
	--stegu-state-info: var(--stegu-color-blue-500);
	--stegu-state-info-int: var(--stegu-color-blue-700); /* Hover pro odkazy */
	--stegu-state-success: var(--stegu-color-green-500);
	--stegu-state-error: var(--stegu-color-danger-500);
}