/**
 * Dizajnový systém TulipoBox – tokeny.
 *
 * Jediný zdroj farieb, rozostupov, zaoblení a písma pre celý plugin. Hodnoty
 * sú prepísané z dizajnového systému značky, nedopĺňajú sa odhadom. Moduly
 * nesiahajú na farbu priamo, berú si ju odtiaľto.
 *
 * Odvodené tokeny (stlmený text, obrysy, panel, chybová farba) v systéme nie sú
 * – dopočítali sme ich tak, aby prešli kontrastom WCAG AA. Pri každom je
 * uvedený nameraný pomer.
 *
 * @package TulipoBox
 */

:root {
	/* --- Farby značky ---------------------------------------------------- */

	--tlpb-surface: #fff8ec;        /* krémový podklad stránky */
	--tlpb-ink: #5a4642;            /* hlavný text (8,3:1 na kréme) */
	--tlpb-apricot: #f4c892;        /* primárna identitná farba */
	--tlpb-sage: #acbead;           /* sekundárna identitná farba */
	--tlpb-mauve: #ae94b2;          /* terciárna identitná farba */
	--tlpb-plum: #713e5a;           /* tlačidlá a výzvy k akcii */
	--tlpb-on-accent: #fff8ec;      /* text na plum/mauve (7,8:1) */

	/* --- Odvodené od značky ---------------------------------------------- */

	/* Stlmený text. Nie priehľadnosť – tá by spadla pod čitateľnú hranicu.
	   4,7:1 na kréme, 4,9:1 na bielej, čiže AA aj pre drobné písmo. */
	--tlpb-ink-muted: #7e6d67;

	/* Deliace čiary. Sú len ozdobné, kontrast sa na ne nevzťahuje. */
	--tlpb-line: #e6ded5;

	/* Obrys polí a tlačidiel. Ovládací prvok musí mať 3:1, preto je tmavší
	   než deliaca čiara (3,2:1 na bielej). */
	--tlpb-field-line: #9c8d86;

	/* Karta nad krémovou stránkou. Systém pre ňu farbu nemá, biela je voči
	   kréme neutrálna a text na nej drží 8,8:1. */
	--tlpb-panel: #ffffff;

	/* Chyby. 6,0:1 na kréme aj na bielej. */
	--tlpb-danger: #b32d2e;

	/* Podklad chybového hlásenia – chybová farba zmiešaná s bielou (90 %).
	   Text na ňom drží 7,5:1, chybová farba 5,4:1. Od krému sa líši len
	   jemne, signál nesie ikona a nadpis. */
	--tlpb-danger-soft: #f7eaea;

	/* Podklady štítkov stavu (aktívne predplatné, objednávka v príprave).
	   Sú to identitné farby zmiešané s bielou – šalvia 45 %, marhuľa 40 % –
	   lebo samotná šalvia by s textom nedala 4,5:1. Text na nich má byť vždy
	   `--tlpb-ink` (6,6:1 na šalvii, 7,4:1 na marhuli), nie stlmený. */
	--tlpb-sage-soft: #dae2da;
	--tlpb-apricot-soft: #fbe9d3;

	/* Tmavá šalvia pre drobné ikony „príroda“ (lístok pri doprave). Samotná
	   šalvia má na kréme len 1,8:1 a ikona by zanikla; toto je šalvia
	   stmavená na 5,6:1 na kréme a 4,5:1 na `--tlpb-sage-soft`. Červená by
	   čítala ako chyba, zelená je ustálený znak ekológie. */
	--tlpb-sage-deep: #4f6b52;

	/* --- Rozostupy (4px mriežka) ----------------------------------------- */

	--tlpb-space-1: 4px;
	--tlpb-space-2: 8px;
	--tlpb-space-3: 12px;
	--tlpb-space-4: 16px;
	--tlpb-space-5: 24px;
	--tlpb-space-6: 32px;
	--tlpb-space-7: 48px;
	--tlpb-space-8: 64px;

	/* --- Zaoblenie -------------------------------------------------------- */

	--tlpb-radius-sm: 8px;
	--tlpb-radius-md: 16px;
	--tlpb-radius-lg: 24px;
	--tlpb-radius-pill: 999px;

	/* --- Rozmery ---------------------------------------------------------- */

	/* Výška polí a hlavných tlačidiel. Odvodené: systém ju nemá, 52 px je
	   výška polí na pokladni – stránka produktu tak drží tú istú mieru. */
	--tlpb-control-h: 52px;

	/* --- Písmo ------------------------------------------------------------ */

	/* Pally (displej) systém dodáva ako súbory a plugin ho nenesie – na
	   pokladni sa písmo takejto veľkosti nikde nepoužíva. Ak ho niekde budeme
	   potrebovať, doplníme súbory a @font-face sem. */
	--tlpb-font-display: 'Pally', 'Nunito', sans-serif;
	--tlpb-font-heading: 'Nunito', sans-serif;
	--tlpb-font-body: 'Lora', serif;

	/* Písma pre e-maily. Odvodené: e-mailové aplikácie webové písma väčšinou
	   nenačítajú (Gmail ich ignoruje), takže za značkové písmo dávame
	   systémovú náhradu s podobným tvarom – Nunito → Trebuchet MS / Arial
	   (zaoblená bezpätková), Lora → Georgia (pätková). Kde je Nunito alebo
	   Lora nainštalovaná, použije sa ona. */
	--tlpb-font-heading-email: 'Nunito', 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
	--tlpb-font-body-email: 'Lora', Georgia, 'Times New Roman', serif;

	--tlpb-text-h1: 32px;
	--tlpb-text-h2: 24px;
	--tlpb-text-h3: 18px;
	--tlpb-text-lg: 18px;
	--tlpb-text-body: 16px;
	--tlpb-text-sm: 14px;

	/* --- Tiene ------------------------------------------------------------ */

	/* Tieň má odtieň atramentu, nie čiernu – na kréme nešedivie. */
	--tlpb-shadow-card: 0 1px 2px rgba( 90, 70, 66, 0.06 ), 0 8px 24px rgba( 90, 70, 66, 0.08 );
	--tlpb-focus-ring: 0 0 0 3px rgba( 113, 62, 90, 0.35 );
}