/* Design tokeny — barvy, typografie, rozestupy. Barvy nikde jinde nepiš natvrdo. */
:root {
    /* Barvy */
    --c-ink: #2B2A28;
    --c-grey: #666565;
    --c-grey-light: #E7E5E2;
    --c-orange: #EF7A12; /* jen plochy a grafika, nikdy text */
    --c-orange-text: #B85304;
    /* Oranžový text na jemné oranžové ploše — #B85304 tam má jen 4,39 : 1. Tenhle odstín 5,52 : 1. */
    --c-orange-text-na-jemne: #A04703;
    --c-orange-deep: #B85304;
    --c-orange-soft: #FDF0E4;
    /* Tlumený text (zástupné texty, nedostupné prvky) — místo snižování průhlednosti. */
    --c-grey-tlumeny: #6B6A6A;
    --c-paper: #FBFAF8;
    --c-white: #FFFFFF;

    /* Typografie */
    --font-base: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --fs-display: clamp(2.5rem, 6vw, 4.5rem);
    --fs-h1: clamp(2rem, 4vw, 3rem);
    --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
    --fs-h3: 1.25rem;
    --fs-body: 1.0625rem;
    --fs-small: 0.875rem;
    --lh-nadpis: 1.1;
    --lh-text: 1.65;
    --sirka-textu: 68ch;

    /* Mřížka a rozestupy */
    --sirka-obsahu: 1200px;
    --okraj: 16px;
    --mezera-sekce: 56px;
    --mezera-xs: 4px;
    --mezera-s: 8px;
    --mezera-m: 16px;
    --mezera-l: 24px;
    --mezera-xl: 40px;

    /* Tvary */
    --r-karta: 14px;
    --r-tlacitko: 8px;
    --r-odznak: 4px;
    --stin: 0 2px 8px rgba(43, 42, 40, .06);

    /* Šikmý tah odvozený z loga */
    --uhel-tahu: -12deg;

    /* Pohyb */
    --prechod: 200ms ease;
    --animace: 300ms ease-out;

    /* Vrstvy */
    --z-hlavicka: 100;
    --z-overlay: 200;

    /* Výška sticky hlavičky — odsazení kotev a sticky sloupců */
    --vyska-hlavicky: 76px;
}

@media (min-width: 720px) {
    :root {
        --okraj: 24px;
        --mezera-sekce: 96px;
    }
}