/* ============================================================ wattery design tokeny — sdílený základ pro všechny tři weby (realizace.wattery.cz / wattery.cz / eshop.wattery.cz) Přesné hodnoty odečtené z produktových karet wattery.cz — NEZAOKROUHLOVAT / NEMĚNIT bez rozhodnutí o brandu. Motivy: light (výchozí) a dark, přepínané data-theme na . ============================================================ */ :root { /* --- Značkové konstanty (stejné v obou motivech) --- */ --card-bg-top: #003332; --card-bg-bottom: #00463b; --card-gradient: linear-gradient(180deg, var(--card-bg-top) 0%, var(--card-bg-bottom) 100%); --accent: #4adda0; --accent-hover: #5ce6ad; /* ~8 % světlejší */ --accent-glow: rgba(74, 221, 160, 0.25); --band-bg: #00181a; --band-gradient: linear-gradient(180deg, #000e10 0%, #002c2b 100%); --text-on-dark: #ffffff; --text-on-dark-soft: rgba(255, 255, 255, 0.78); --text-on-accent: #003332; /* --- Geometrie karty --- Light motiv: karty BEZ zeleného okraje (na světlém pozadí působil nalepeně) — jen tmavě zelená plocha + neutrální stín. Akcentový okraj zůstává jen v dark motivu (viz níže), kde je součást brandu. */ --card-radius: 18px; --card-border: none; --card-shadow: 0 16px 40px -20px rgba(0, 40, 37, 0.35); --card-hover-shadow: 0 24px 55px -22px rgba(0, 40, 37, 0.4); /* --- Typografie --- */ --font-display: 'Sora Variable', 'Segoe UI', system-ui, sans-serif; --font-body: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* --- Rozměry --- */ --container: 72rem; --radius-s: 10px; --radius-pill: 999px; /* ===== Motiv LIGHT (výchozí) ===== */ --page-bg: #f4f8f5; --page-bg-raised: #ffffff; --page-glow: radial-gradient(60rem 40rem at 85% -10%, rgba(74, 221, 160, 0.14), transparent 60%); --text: #0c2321; --text-soft: #3d5a53; --accent-text: #0f6e56; /* akcent jako text na světlém pozadí */ --line: rgba(15, 110, 86, 0.16); --chip-bg: rgba(74, 221, 160, 0.14); --header-bg: rgba(244, 248, 245, 0.85); } [data-theme='dark'] { --page-bg: #00302e; --page-bg-raised: #003b36; --page-glow: radial-gradient(55rem 38rem at 80% -8%, rgba(74, 221, 160, 0.16), transparent 60%), linear-gradient(180deg, #00302e 0%, #001f1a 100%); --text: #ffffff; --text-soft: rgba(255, 255, 255, 0.72); --accent-text: var(--accent); --line: rgba(74, 221, 160, 0.22); --chip-bg: rgba(74, 221, 160, 0.12); --header-bg: rgba(0, 40, 37, 0.8); /* Karty v dark motivu o něco světlejší; bez zeleného okraje — od tmavého pozadí je oddělí světlejší plocha + jemný stín. */ --card-bg-top: #00413a; --card-bg-bottom: #00564a; --card-border: none; --card-shadow: 0 16px 44px -18px rgba(0, 0, 0, 0.5); --card-hover-shadow: 0 24px 55px -20px rgba(0, 0, 0, 0.55); }