/* Generated: 2026-10-05 14:01:20 */ /* ============================================================ Design system — tokeny (Phase 99 / E1b, 2026-10-01) Závazná pravidla: docs/CSS-ARCHITECTURE.md § Design system Rozhodnutí: docs/phase-99-mobilni-redesign/README.md (AR1–AR7) Dvě vrstvy (AR3): 1. PALETA `--ds-color-*` — surové barvy, nic jiného je nečte. 2. VÝZNAM `--ds-*` — účel prvku; komponenty `.ds-*` čtou JEN tyto. Tenant/skupina může později přetížit významový token ve svém custom-stylesheet.css (načítá se až po tomto souboru). Načítá se JEN se zapnutým přepínačem `designSystem.mobile`, ale pak na VŠECH zařízeních (AR6). Jména `--ds-*` legacy CSS nepoužívá, takže samotné načtení nic viditelně nemění. Breakpointy pro `.ds-*` (CSS proměnné v @media nefungují, proto jen dohoda; mobile-first = @media (min-width: …)). Převzaté z hranic, které legacy CSS už používá (max 480/767/1024/1199 ↔ min 481/768/1025/1200): sm 481px · md 768px · lg 1025px · xl 1200px Barvy: e-mail P. Beneše 1. 10. 2026 (tabulka C1). ⚠ Kontrast pěti textových kombinací je pod WCAG AA — rozhodnutí vlastníka (O2), řeší se změnou významového tokenu, ne komponent. ============================================================ */ :root { /* ---------- 1. PALETA ---------- */ --ds-color-white: #FFFFFF; --ds-color-black: #000000; --ds-color-gray-50: #F5F6F8; --ds-color-gray-100: #EEEFF1; --ds-color-gray-500: #8E8E90; --ds-color-gray-700: #525052; --ds-color-gray-900: #191919; --ds-color-beige-100: #F3EEE8; --ds-color-brown-500: #AC876C; --ds-color-green-500: #04A453; --ds-color-green-600: #05944A; --ds-color-red-600: #DB2218; /* doplněk mimo zadání C1 (E18, V1 schválená 4. 10.): odkaz „S kuponem" v legacy růžovém boxu — dřív #fc6993 na #FFE6EC = 2,35:1, tímhle 5,84:1 (WCAG AA). */ --ds-color-pink-700: #B0124F; /* doplňky mimo C1 (E19, produktová karta Z3): světle zelený podklad štítku „Doprava zdarma" z návrhu karta-1 a tmavší hnědá pro odkazy — hnědá 500 má na bílé 3,3:1, tahle 6,2:1 (na béžové 5,4:1; WCAG AA). Zelený text na světle zelené má 3,4:1 — pod AA jako ostatní zelené texty (otevřené O2). */ --ds-color-green-50: #E2F4E9; --ds-color-brown-700: #7A5A43; /* hvězda hodnocení pod názvem (E19, vlastník 4. 10. podle výzkumu konkurence) — jen doplněk: číslo hodnocení stojí vedle ní jako text, hvězda sama nic nesděluje (proto ne nárok na kontrast textu) */ --ds-color-amber-400: #F5A800; /* ---------- 2. VÝZNAM — plochy a text ---------- */ --ds-surface: var(--ds-color-white); /* hlavní pozadí stránky */ --ds-surface-muted: var(--ds-color-beige-100); /* vyhledávání, dolní navigace, štítky a parametry karty výpisu */ --ds-gallery-bg: var(--ds-color-gray-50); /* pozadí galerie */ --ds-text-primary: var(--ds-color-black); /* logo, název produktu, cena */ --ds-text-secondary: var(--ds-color-gray-700); /* ikony a popisky navigace */ --ds-text-muted: var(--ds-color-gray-500); /* přeškrtnutá cena */ /* ---------- 2. VÝZNAM — akce a stavy ---------- */ --ds-action-primary-bg: var(--ds-color-green-600); /* košík, „Do košíku" */ --ds-action-primary-fg: var(--ds-color-white); /* ikony a text na zeleném */ --ds-action-secondary-bg: var(--ds-color-white); /* vedlejší tlačítko (R15/1): bílé pozadí */ --ds-action-secondary-fg: var(--ds-color-green-600); /* zelený text — kontrast jako u primárního, viz O2 */ --ds-action-secondary-border: var(--ds-color-green-600); /* zelený obrys */ --ds-accent: var(--ds-color-brown-500); /* Kategorie, rámeček výběru */ --ds-field-border: var(--ds-color-gray-500); /* obrys pole (počet kusů na detailu, E8c) */ --ds-divider: var(--ds-color-gray-100); /* oddělovač řádků (menu přes celou obrazovku, E9) */ --ds-menu-bg: var(--ds-color-gray-900); /* kruhové tlačítko menu */ --ds-menu-fg: var(--ds-color-white); --ds-stock-ok: var(--ds-color-green-500); /* „Skladem" */ --ds-coupon-link: var(--ds-color-pink-700); /* odkaz „S kuponem" na kartě výpisu (E18) */ --ds-link-accent: var(--ds-color-brown-700); /* hnědé odkazy na detailu: Možnosti doručení, Koupit s kódem (E19) */ --ds-price-discount: var(--ds-color-red-600); /* cena s kódem na detailu (E19) */ --ds-chip-ok-bg: var(--ds-color-green-50); /* štítek „Doprava zdarma", ECO (E19) */ --ds-chip-ok-fg: var(--ds-color-green-600); --ds-rating-star: var(--ds-color-amber-400); /* hvězda u hodnocení na detailu (E19) */ --ds-chip-bg: var(--ds-color-gray-100); /* štítky ve vyhledávání (ISOFIX …); štítky karty výpisu jsou béžové --ds-surface-muted */ --ds-badge-discount-bg: var(--ds-color-red-600); /* slevový štítek */ --ds-badge-discount-fg: var(--ds-color-white); --ds-badge-count-bg: var(--ds-color-black); /* odznak počtu v košíku */ --ds-badge-count-fg: var(--ds-color-white); /* ---------- 2. VÝZNAM — tvar ---------- */ /* Odměřeno z obrázků (R8/1); přesné hodnoty ověřit u Beneše (O3). */ --ds-radius-pill: 999px; --ds-radius-card: 16px; --ds-radius-sm: 8px; /* ---------- 2. VÝZNAM — stíny (tvarové tokeny, ne barvy palety) ---------- */ --ds-shadow-raised: 0 8px 24px rgba(0, 0, 0, .25); /* vyskakovací panely (našeptávač) */ --ds-shadow-bar: 0 -4px 14px rgba(0, 0, 0, .07); /* stín nad lištou s cenou (obrázek S2) */ /* ---------- 2. VÝZNAM — rozměry pevných lišt (AR7) ---------- */ /* Výška obsahu BEZ safe-area iPhonu (tu si lišta přičítá sama). Podle ní se dole rezervuje místo a zvedají plovoucí prvky (lišta Koupit, chat, teaser Leadhubu). Odměřeno z obrázků P1/S2 přepočtem na 390 px (~52 px), zaokrouhleno nahoru kvůli dotykové ploše — naše rozhodnutí, README Phase 99 R10. */ --ds-bottom-nav-h: 56px; /* Lišta s cenou a „Do košíku" na produktu (E4): ~48 px z obrázku S2, tlačítko 48 px místo 39 px — minimum, které hlídá regresní test Phase 98 (pdp-sticky-cart.spec.ts) → 6 + 48 + 6 (naše rozhodnutí, README R12). */ --ds-buy-bar-h: 60px; }