/**
 * Sablona 2026-006 Garaz - CSS promenne (tokeny --tpl-*) + @font-face.
 *
 * _page.php linkuje PRVNI promenne.css v retezu (2026-006 -> _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 Asfalt (header_mode dark).
 * Customizer (nastaveni-schema.json, pravidla a presety-2026-006.json) prepisuje hodnoty v :root az za timto souborem.
 * Vygenerovano z _core/css/promenne.css + Paleta::odvodit(Asfalt) (scratchpad gen_promenne.php), konstanty navrhu:
 * radius 4, stitky 2, stiny zadne (hover karty = ramecek primary), overlay rgba(22,24,27,.6), sekce 56 / mobil 40.
 *
 * Fonty (OFL, self-host, templates/2026-006/fonts/README.md): Barlow 400 + 600 (text, UI), Barlow Condensed 700
 * (nadpisy verzalkami, ceny, logotyp) - latin + latin-ext, unicode-range jako Google Fonts.
 *
 * Tokeny jen pro Garaz (pravidla ve schematu sablony, P5): --tpl-header-line, --tpl-vozidlo-bg / -text (panel
 * vozidla - jadrovy --tpl-panel-bg = svetle boxy zustava), --tpl-fit-bg, --tpl-nofit-bg, --tpl-accent-hover,
 * --tpl-border-strong (ramecek poli voliče), --tpl-input-radius, --tpl-grid-gap, --tpl-mark.
 */
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/barlow-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/barlow-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlowcondensed-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlowcondensed-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ================= 3 ZADANE (vychozi paleta = Espresso) ================= */
    --tpl-primary: #16181B;      /* --c-main   - hlavni */
    --tpl-cta-bg: #FFC000;       /* --c-action - akcni */
    --tpl-body-bg: #FFFFFF;      /* --c-bg-page - podklad stranky */

    /* ================= 9 ODVOZENYCH (default Espresso; user paletu pocita customizer) ================= */
    --tpl-link: #16181B;                 /* --c-link            = hlavni */
    --tpl-menu-hover-text: #FFFFFF;      /* --c-menu-hover-text = hlavni */
    --tpl-sleva: #FF6A13;                /* --c-sale            = akcni */
    --tpl-oblibene: #FF6A13;             /* --c-fav             = akcni */
    --tpl-header-bg: #16181B;            /* --c-header-bg       = hlavni (svetla hlavicka -> akcni) */
    --tpl-header-text: #FFFFFF;          /* --c-header-text     = kontrast (luminance pozadi <= 0,45 -> bila) */
    --tpl-header-cart-bg: #FFC000;       /* --c-cart            = akcni (svetla hlavicka -> hlavni) */
    --tpl-header-cart-bg-hover: #E0A900; /* --c-cart-hover      = akcni -12 % svetlosti */
    --tpl-footer-bg: #2A2E33;            /* --c-footer-bg       = hlavni -35 % svetlosti */

    /* ================= 16 SDILENYCH (konstanty pro vsechny palety) ================= */
    --tpl-text: #16181B;                        /* --c-text */
    --tpl-content-bg: #FFFFFF;                   /* --c-bg-content - platno obsahu */
    --tpl-card-bg: #FFFFFF;                      /* --c-bg-card    - karty VZDY bile */
    --tpl-surface-2: #F2F3F5;                    /* --c-surface */
    --tpl-surface-3: #EAEAEA;                    /* --c-surface-hover */
    --tpl-stav-skladem: #157F3B;                 /* --c-stock */
    --tpl-stav-skladem-bg: #E8F2EB;              /* --c-stock-bg */
    --tpl-stav-chyba: #C8102E;                   /* --c-error */
    --tpl-menu-bg: #16181B;                      /* --c-menu-bg */
    --tpl-menu-text: #FFFFFF;                    /* --c-menu-text */
    --tpl-menu-hover-bg: #292A2D;                /* --c-menu-hover-bg */
    --tpl-card-border: #DADDE2;                  /* --c-card-border */
    --tpl-footer-text: #D5D8DD;    /* --c-footer-text  (bila s pruhlednosti -> drzi na libovolne tmavem footeru) */
    --tpl-footer-heading: #FFFFFF;               /* --c-footer-head */
    --tpl-footer-link: #D5D8DD;    /* --c-footer-link */
    --tpl-footer-border: #3D4248;  /* --c-footer-rule */

    /* ================= Pomocne (odvozene z vyse; drzi stavajici theme CSS) ================= */
    --tpl-primary-dark: #131417;         /* hlavni tmavsi */
    --tpl-primary-light: #4A3E37;        /* hlavni svetlejsi */
    --tpl-primary-text: #FFFFFF;         /* text na hlavni */
    --tpl-cta-bg-hover: #E6AC00;         /* akcni -12 % svetlosti (hover tlacitek; odvozene) */
    --tpl-cta-text-hover: #16181B;       /* text na akcni hover barve (kontrast; odvozene) */
    --tpl-cta-text: #16181B;             /* text na akcni (kontrast >= 4,5:1; Espresso teal -> tmavy) */
    --tpl-text-light: #596069;           /* tlumeny text */
    --tpl-link-hover: #2A2E33;           /* odkaz hover */
    --tpl-footer-link-hover: #FFFFFF;    /* footer odkaz hover */

    /* Jemne tinty palety pro zvyraznena pozadi (vybrano / poznamka / highlight) - driv
       natvrdo blede zlute (#fffbe6 apod.); ted odvozene z palety (color-mix -> drzi v kazde
       palete, ne jen ve zlute). */
    --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));
    /* Semanticke odznaky produktu (vlastni vyznam, ne paletove) - token misto natvrdo hexu. */
    --tpl-badge-new:  #2196F3;   /* Novinka */
    --tpl-badge-hit:  #FF9800;   /* Bestseller / Hit */
    --tpl-badge-gift: #9C27B0;   /* Darek */

    /* ================= Typografie (vychozi sada A / Minimalni) ================= */
    --tpl-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;   /* --f-body */
    --tpl-font-head: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; /* --f-head (rez resi CSS: 500) */
    --tpl-font-ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;   /* --f-ui */
    --tpl-head-weight: 700;              /* rez nadpisu */
    --tpl-head-tracking: 0.5px;        /* --head-tracking */
    --tpl-font-size: 16px;               /* --fs-base */
    --tpl-line-height: 1.5;             /* --lh */

    /* ================= Tvary a rozmery (nezavisle na palete/typografii) ================= */
    --tpl-max-width: 1280px;             /* --w-content (1120-1600) */
    --tpl-header-height: auto;
    --tpl-border-radius: 4px;           /* --radius (tlacitka/inputy/karty) - ridi volba Rohy (Zaoblene=12px / Hranate=0) */
    --tpl-radius-sm: calc(var(--tpl-border-radius) * .5);   /* mensi zaobleni (odznaky, drobne prvky) - skaluje s base */
    --tpl-pill: min(999px, calc(var(--tpl-border-radius) * 1000));  /* oval/pilulka kdyz je Zaoblene (jakykoli nenulovy radius -> 999px), ale zhranati na 0 v Hranate - ovladaci prvky hlavicky (search, mena, login, kosik) */
    --tpl-hero-radius: var(--tpl-border-radius);            /* navazano na base -> nasleduje Rohy */
    --tpl-card-radius: var(--tpl-border-radius);            /* navazano na base */
    --tpl-detail-photo-radius: var(--tpl-border-radius);    /* navazano na base */
    --tpl-hero-title-size: 40px;         /* --fs-hero ~ 2,2x zakladu */
    --tpl-detail-price-size: 36px;       /* --fs-price ~ 1,5x zakladu */

    /* ================= Efekty (konstanty) ================= */
    --tpl-shadow: none;
    --tpl-shadow-hover: inset 0 0 0 1px var(--tpl-primary);
    /* J-A13: stin vyskakovacich prvku (popup rychleho vyberu, mini kosik, bottom sheet, toast, dropdown jazyka / meny,
       naseptavac, kartka hotspotu). Jen tady - core.css ho cte s fallbackem na dnesni stin (2026-001 s vlastni
       promenne.css beze zmeny); sablona bez stinu: --tpl-shadow-pop: none. */
    --tpl-shadow-pop: none;
    --tpl-transition: 0.15s ease;

    /* ================= Standardni odvozene tokeny (J-L1, doplneni zadani kap. 3) =================
       Barvy maji pravidlo v nastaveni-schema.json (line, strike, disabled, topbar_bg/text,
       footer_muted, sale_deco, head_shrink) - customizer je v :root prepise hodnotou z palety.
       Hodnoty zde = vychozi paleta Espresso. Stejne nazvy pouzivaji vsechny navrhy sablon 2026. */
    --tpl-line: #ECEEF1;                 /* jemne linky (svetlejsi nez --tpl-card-border) */
    --tpl-strike: #6B7078;               /* preskrtnuta cena */
    --tpl-disabled: #A9AEB5;             /* neaktivni prvek, vyprodana varianta */
    --tpl-topbar-bg: #0F1113;            /* horni lista = hlavni */
    --tpl-topbar-text: #C9CDD3;
    --tpl-footer-muted: #A3A9B1;         /* tlumeny text paticky */
    --tpl-sale-deco: none;               /* text-decoration slevy (none / underline) */
    --tpl-overlay: rgba(22, 24, 27, 0.6);   /* pod modalem, drawerem, bottom sheetem */
    --tpl-area-radius: var(--tpl-border-radius);    /* plochy a panely (hero, box, modal) */
    --tpl-thumb-radius: var(--tpl-border-radius);       /* nahledy, velikosti */
    --tpl-label-radius: 2px;  /* stitky */
    --tpl-gutter: 24px;                  /* vnitrni okraj obsahu (mobil 16px, viz @media nize) */
    --tpl-section-gap: 56px;             /* mezera mezi sekcemi (mobil 32px) */
    --tpl-head-shrink: 0px;              /* zmenseni nadpisu sady (calc(Npx - var(--tpl-head-shrink))) */

    /* --- Kontrastni tokeny (J-L1b, rozhodnuti 6. 11. 2026): pravidla v nastaveni-schema.json,
       "pojistka" = barva role, kdyz ma na plose karty potrebny kontrast, jinak barva textu.
       Hodnoty zde = vychozi paleta Espresso (accent = cta #0E9184). --- */
    --tpl-accent-text: #16181B;          /* text na plose accent (text_na) */
    --tpl-secondary-text: #FFFFFF;       /* text na plose secondary (text_na) */
    --tpl-rating: #16181B;               /* hvezdicky: accent, kdyz na karte >= 3 : 1, jinak text */
    --tpl-sale-price: var(--tpl-text);   /* cena po sleve jako text: accent, kdyz na karte >= 4,5 : 1, jinak text (Espresso teal 3,9 -> text) */
    --tpl-stav-wait: #9A5B00;            /* "do X dnu" / na objednavku (na tmave karte #E0A458) */
    --tpl-info-bg: #EAEAEB;              /* informacni poznamka = karta + 10 % secondary */
    --tpl-info-text: #2A2E33;            /* secondary, kdyz na info-bg >= 4,5 : 1, jinak text */
    --tpl-nav-bg: var(--tpl-menu-bg);    /* pruh hlavniho menu = pozadi menu (podle header_mode) */
    --tpl-nav-text: var(--tpl-menu-text);
    --tpl-annbar-bg: var(--tpl-accent, var(--tpl-cta-bg));         /* oznamovaci lista = accent */
    --tpl-annbar-text: var(--tpl-accent-text, var(--tpl-cta-text));
    --tpl-badge-bg: var(--tpl-primary);  /* stitky Novinka / Tip */
    --tpl-badge-text: var(--tpl-primary-text);
    --tpl-panel-bg: var(--tpl-surface-2);   /* plochy panelu a boxu */
    --tpl-primary-fill: var(--tpl-primary); /* velke vyplne v hlavni barve */
    --tpl-disabled-text: #737476;        /* text neaktivniho prvku = text + 60 % karty */

    /* ================= Aliasy nazvu z navrhu (stejna hodnota jako token jadra) ================= */
    --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);     /* accent jako text na bile s pojistkou (Arena) */
    --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);
    /* ================= Tokeny sablony Garaz (pravidla v nastaveni-schema.json sablony) ================= */
    --tpl-secondary: #2A2E33;
    --tpl-accent: #FF6A13;
    --tpl-badge-sale: #FF6A13;
    --tpl-header-line: #2E3238;
    --tpl-vozidlo-bg: #2A2E33;
    --tpl-vozidlo-text: #FFFFFF;
    --tpl-fit-bg: #EEF7F1;
    --tpl-nofit-bg: #FCEDEF;
    --tpl-accent-hover: #E85A08;
    --tpl-border-strong: #8A8F96;
    --tpl-input-radius: var(--tpl-border-radius);
    --tpl-grid-gap: 16px;
    --tpl-mark: #FFE08A;
    --tpl-primary-fill-text: var(--tpl-primary-text);
    --tpl-disabled-bg: var(--tpl-surface-2);

}
@media (max-width: 768px) {
    :root {
        --tpl-gutter: 16px;
        --tpl-section-gap: 40px;
    }
}