/*
 * base.css — design tokeny, fonty, reset a základní typografie
 * Šablona "rency2024" (podle Figma návrhu Šantovka, Created by Rency)
 *
 * Mobile-first: výchozí styly platí pro mobil, větší breakpointy
 * se přidávají přes min-width media queries (touchpointy viz layout.css).
 */

/* ---------------------------------------------------------------------------
 * Fonty — všechny čtyři kandidátské rodiny jsou variable fonty (váhy 400–700),
 * self-hostované. Prohlížeč stáhne pouze rodinu, na kterou odkazuje aktivní
 * --font-base, ostatní deklarace zůstávají "spící" (lazy loading @font-face).
 * Subsety latin + latin-ext (čeština) mají oddělené soubory přes unicode-range.
 * ------------------------------------------------------------------------- */

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+1E00-1EFF;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+1E00-1EFF;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+1E00-1EFF;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+1E00-1EFF;
}

/* ---------------------------------------------------------------------------
 * Design tokeny (hodnoty vytažené z Figma návrhu, frame "Design system")
 * ------------------------------------------------------------------------- */

:root {
    /* Barvy — primární (vínová) a text/pozadí (švestková škála).
     * Finální rozdělení primární vs. doplňkové se ověří proti PP Figmě. */
    --color-primary: #98234f;        /* vínová — tlačítka, akcenty, aktivní stavy */
    --color-primary-hover: #6c1435;  /* tmavší vínová — hover/active */
    --color-ink: #433b48;            /* švestková — základní text */
    --color-ink-soft: #3b3442;       /* tmavší švestková — oznamovací pruh */
    --color-ink-dark: #2c2232;       /* nejtmavší švestková — footer */
    --color-surface: #ffffff;
    --color-surface-alt: #edebef;    /* světle šedofialová — pozadí sekcí, pole */
    --color-surface-lavender: #e3dde8;
    --color-accent: #ec5f39;         /* oranžová — doplňkový akcent (ŠantAPKA) */
    --color-border: #e3dde8;
    --color-shadow: rgba(20, 15, 44, 0.08);

    /* Typografie — kandidátské rodiny; aktivní se volí přes --font-base.
     * Přepínání pro testování: html[data-font="..."] níže (+ ?font= v URL). */
    --font-dm-sans: 'DM Sans', system-ui, sans-serif;
    --font-inter: 'Inter', system-ui, sans-serif;
    --font-manrope: 'Manrope', system-ui, sans-serif;
    --font-hanken: 'Hanken Grotesk', system-ui, sans-serif;
    --font-base: var(--font-dm-sans);

    /* Velikosti písma (mobil; desktop přepisuje ve svých sekcích) */
    --text-sm: 0.875rem;   /* 14px — popisky, drobné texty */
    --text-base: 1rem;     /* 16px — běžný text mobil */
    --text-md: 1.125rem;   /* 18px — běžný text desktop */
    --text-lg: 1.25rem;    /* 20px — mezititulky */
    --text-xl: 1.5rem;     /* 24px — H2 mobil */
    --text-2xl: 1.75rem;   /* 28px — H1 mobil */
    --text-3xl: 2.5rem;    /* 40px — H2 desktop */

    /* Zaoblení (Figma: tlačítka 16, search pole 20, jazykový pill 40) */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-pill: 40px;

    /* Vertikální rytmus */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-6: 3rem;
    --space-8: 4rem;

    /* Layout */
    --container-max: 1520px;   /* obsahová šířka na velkém desktopu */
    --container-pad: 1rem;     /* boční odsazení na mobilu */
}

/* Přepínání testovacích fontů: nastaví JS podle ?font=/localStorage (menu.js) */
:root[data-font='inter'] { --font-base: var(--font-inter); }
:root[data-font='manrope'] { --font-base: var(--font-manrope); }
:root[data-font='hanken'] { --font-base: var(--font-hanken); }
:root[data-font='dm-sans'] { --font-base: var(--font-dm-sans); }

/* ---------------------------------------------------------------------------
 * Reset a základ
 * ------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-ink);
    background: var(--color-surface);
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4,
p {
    margin: 0 0 var(--space-2);
}

ul,
menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

input,
select,
textarea {
    font: inherit;
}

/* Viditelný focus jen z klávesnice */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Sdílené komponenty
 * ------------------------------------------------------------------------- */

/* Obsahový kontejner */
.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Tlačítka (Figma: CTA_primary/CTA_secondary — radius 16, výška 58 desktop) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.btn--primary:hover {
    background: var(--color-primary-hover);
}

.btn--dark {
    background: var(--color-ink);
    color: #fff;
}

.btn--dark:hover {
    background: var(--color-ink-dark);
}

.btn--light {
    background: var(--color-surface);
    color: var(--color-ink);
}

.btn--light:hover {
    background: var(--color-surface-alt);
}

/* Nadpis sekce (Figma: verzálky, prostrkání) */
.section-title {
    font-size: var(--text-xl);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@media (min-width: 64em) {
    .section-title {
        font-size: var(--text-3xl);
    }
}

/* Pomocná třída: skrytí prvku (např. jazykový přepínač do doby zapnutí EN) */
.is-hidden {
    display: none !important;
}

/* Text jen pro čtečky */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}