/*  Generated: 2026-10-03 18:18:32 */
/* ============================================================
   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;

    /* ---------- 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 */
    --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-chip-bg: var(--ds-color-gray-100);              /* štítky (ISOFIX …) */
    --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;
}