/**
 * Sablona 2026-005 Technik - CSS promenne (tokeny --tpl-*) + @font-face.
 *
 * _page.php linkuje PRVNI promenne.css v retezu (2026-005 -> _core -> basic), takze tento
 * soubor NAHRAZUJE templates/_core/css/promenne.css cely: obsahuje vsechny tokeny jadra
 * (vc. bloku "Standardni odvozene tokeny", "Kontrastni tokeny" a "Aliasy", J-L1 / J-L1b)
 * s hodnotami vychozi palety Modra (header_mode light). Customizer (nastaveni-schema.json,
 * pravidla a presety-2026-005.json) prepisuje hodnoty v :root az za timto souborem.
 *
 * Fonty (OFL, self-host, viz templates/2026-005/fonts/README.md): Inter variabilni 100-900
 * (text, UI, ceny, nadpisy). Space Grotesk 600 z navrhu zatim neni dodan (README) - nadpisy
 * pouzivaji Inter 600 s prostrkanim -0,01em.
 *
 * Tokeny jen pro Technik (bez pravidla v jadru): --tpl-border-strong, --tpl-disabled-bg,
 * --tpl-input-radius, --tpl-shadow-pop, --tpl-grid-gap, --tpl-mark, --tpl-search-*,
 * --tpl-hd-badge-* (pocitadla v hlavicce, P9), --tk-sloupce (pocet karet v rade).
 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-var.woff2') format('woff2');
}

:root {
    /* ================= ZADANE ROLE (paleta Modra) ================= */
    --tpl-primary: #1F4FBF;
    --tpl-secondary: #EEF2F8;
    --tpl-cta-bg: #FF7A1A;
    --tpl-accent: #D6202A;
    --tpl-body-bg: #FFFFFF;

    /* ================= ODVOZENE (jadro) ================= */
    --tpl-link: #1F4FBF;
    --tpl-menu-hover-text: #1F4FBF;
    --tpl-sleva: #D6202A;
    --tpl-oblibene: #D6202A;
    --tpl-badge-sale: #D6202A;
    --tpl-header-bg: #FFFFFF;
    --tpl-header-text: #1A1F29;
    --tpl-header-cart-bg: #FF7A1A;
    --tpl-header-cart-bg-hover: #E8650A;
    --tpl-footer-bg: #EEF2F8;

    /* ================= SDILENE ================= */
    --tpl-text: #1A1F29;
    --tpl-content-bg: #FFFFFF;
    --tpl-card-bg: #FFFFFF;
    --tpl-surface-2: #F3F5F9;
    --tpl-surface-3: #E9EDF3;
    --tpl-stav-skladem: #157F3B;
    --tpl-stav-skladem-bg: #E8F5EC;
    --tpl-stav-chyba: #C21B24;
    --tpl-menu-bg: #EEF2F8;
    --tpl-menu-text: #1A1F29;
    --tpl-menu-hover-bg: #E0E6F0;
    --tpl-card-border: #DDE2EA;
    --tpl-footer-text: #1A1F29;
    --tpl-footer-heading: #1A1F29;
    --tpl-footer-link: #1A1F29;
    --tpl-footer-border: #D5DCE6;

    /* ================= Pomocne ================= */
    --tpl-primary-dark: #173C94;
    --tpl-primary-light: #4A72D0;
    --tpl-primary-text: #FFFFFF;
    --tpl-cta-bg-hover: #E8650A;
    --tpl-cta-text-hover: #1A1A1A;
    --tpl-cta-text: #1A1A1A;
    --tpl-text-light: #5F6672;
    --tpl-link-hover: #173C94;
    --tpl-footer-link-hover: #1F4FBF;

    --tpl-primary-tint-soft:   color-mix(in srgb, var(--tpl-primary) 5%, var(--tpl-content-bg));
    --tpl-primary-tint:        color-mix(in srgb, var(--tpl-primary) 9%, var(--tpl-content-bg));
    --tpl-primary-tint-border: color-mix(in srgb, var(--tpl-primary) 28%, var(--tpl-content-bg));
    --tpl-badge-new:  var(--tpl-primary);
    --tpl-badge-hit:  var(--tpl-secondary);
    --tpl-badge-gift: var(--tpl-text);

    /* ================= Typografie (jedna sada "technik") ================= */
    --tpl-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --tpl-font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --tpl-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --tpl-head-weight: 600;
    --tpl-head-tracking: -0.01em;
    --tpl-font-size: 15px;
    --tpl-line-height: 1.5;

    /* ================= Tvary a rozmery ================= */
    --tpl-max-width: 1440px;
    --tpl-header-height: auto;
    --tpl-border-radius: 8px;
    --tpl-radius-sm: 6px;
    --tpl-pill: 999px;
    --tpl-hero-radius: var(--tpl-border-radius);
    --tpl-card-radius: 8px;
    --tpl-detail-photo-radius: 8px;
    --tpl-hero-title-size: 32px;
    --tpl-detail-price-size: 32px;

    /* ================= Efekty ================= */
    --tpl-shadow: 0 1px 2px rgba(16,24,40,.06);
    --tpl-shadow-hover: 0 4px 12px rgba(16,24,40,.10);
    --tpl-transition: 0.2s ease;

    /* ================= Standardni odvozene tokeny (J-L1) ================= */
    --tpl-line: #E9EDF3;
    --tpl-strike: #5F6672;
    --tpl-disabled: #8A919C;
    --tpl-topbar-bg: #F3F5F9;
    --tpl-topbar-text: #3D4553;
    --tpl-footer-muted: #535B68;
    --tpl-sale-deco: none;
    --tpl-overlay: rgba(16, 24, 40, 0.5);
    --tpl-area-radius: 8px;
    --tpl-thumb-radius: 6px;
    --tpl-label-radius: 4px;
    --tpl-gutter: 24px;
    --tpl-section-gap: 48px;
    --tpl-head-shrink: 0px;

    /* ================= Kontrastni tokeny (J-L1b) ================= */
    --tpl-accent-text: #FFFFFF;
    --tpl-secondary-text: #1A1F29;
    --tpl-rating: #D6202A;
    --tpl-sale-price: #D6202A;
    --tpl-stav-wait: #9A5B00;
    --tpl-info-bg: #FDFEFE;
    --tpl-info-text: #1A1F29;
    --tpl-nav-bg: var(--tpl-menu-bg);
    --tpl-nav-text: var(--tpl-menu-text);
    --tpl-annbar-bg: var(--tpl-accent);
    --tpl-annbar-text: var(--tpl-accent-text);
    --tpl-badge-bg: var(--tpl-primary);
    --tpl-badge-text: var(--tpl-primary-text);
    --tpl-panel-bg: var(--tpl-surface-2);
    --tpl-primary-fill: var(--tpl-primary);
    --tpl-disabled-text: #6F747C;
    --tpl-primary-fill-text: #FFFFFF;

    /* ================= Tokeny sablony Technik ================= */
    --tpl-border-strong: #B9C3D3;        /* ramecek karty na hover, aktivni pole */
    --tpl-disabled-bg: #E9EDF3;          /* plocha neaktivniho tlacitka (= line) */
    --tpl-input-radius: var(--tpl-border-radius);
    --tpl-shadow-pop: 0 12px 32px rgba(16,24,40,.18);   /* mega menu, nasepatavac, popup, dropdown */
    --tpl-grid-gap: 16px;
    --tpl-mark: #FFF1A8;                 /* zvyrazneni shody v nasepatavaci */
    --tpl-search-border: #1F4FBF;
    --tpl-search-btn: #1F4FBF;
    --tpl-search-btn-text: #FFFFFF;
    --tpl-hd-badge-bg: #1F4FBF;          /* pocitadla v hlavicce (P9) */
    --tpl-hd-badge-text: #FFFFFF;
    --tk-sloupce: 4;

    /* ================= Aliasy nazvu z navrhu ================= */
    --tpl-cta: var(--tpl-cta-bg);
    --tpl-cta-hover: var(--tpl-cta-bg-hover);
    --tpl-border: var(--tpl-card-border);
    --tpl-surface: var(--tpl-card-bg);
    --tpl-head-ls: var(--tpl-head-tracking);
    --tpl-sale-bg: var(--tpl-badge-sale, var(--tpl-sleva));
    --tpl-sale-text: var(--tpl-accent-text, #FFFFFF);
    --tpl-footer-line: var(--tpl-footer-border);
    --tpl-radius: var(--tpl-border-radius);
    --tpl-price-sale: var(--tpl-sale-price);
    --tpl-menu-sale: var(--tpl-sale-price);
    --tpl-accent-ink: var(--tpl-sale-price);
    --tpl-stav-dny: var(--tpl-stav-wait);
    --tpl-stav-pozdeji: var(--tpl-stav-wait);
    --tpl-star: var(--tpl-rating);
    --tpl-ann-bg: var(--tpl-annbar-bg);
    --tpl-ann-text: var(--tpl-annbar-text);
    --tpl-announce-bg: var(--tpl-annbar-bg);
    --tpl-announce-text: var(--tpl-annbar-text);
    --tpl-info: var(--tpl-info-bg);
    --tpl-new-bg: var(--tpl-badge-bg);
    --tpl-new-text: var(--tpl-badge-text);
    --tpl-ok-bg: var(--tpl-stav-skladem-bg);
}
@media (max-width: 768px) {
    :root {
        --tpl-gutter: 16px;
        --tpl-section-gap: 32px;
        --tpl-grid-gap: 8px;
    }
}