/*
 * BA-VA FARMA — veřejný web: design tokeny a sdílené základní styly
 *
 * Hodnoty jsou přesně převzaty z prototypu: design_handoff_bava_farma/design/BAVA Farma.dc.html
 * (kořenový <div style="...">, sekce masa na řádku ~437, <helmet> styly na řádcích ~11–26).
 *
 * POZNÁMKA ke scrollbaru: veřejný web v prototypu vlastní scrollbar nedefinuje
 * (jen administrace ano) — přidáváme jej zde pro konzistenci se zbytkem systému.
 *
 * POZNÁMKA k fontům: prototyp používá Arial/Helvetica pro --serif, --sans i --mono
 * (zápis v DC souboru je doslovný: `--serif: Arial, Helvetica, sans-serif`).
 * Tokeny jsou zachovány přesně — při výběru skutečných fontů je lze v budoucnu
 * přepsat na jednom místě.
 *
 * POZNÁMKA k --paper2: prototyp webu má oklch(0.985 0.007 86), admin oklch(0.99 0.006 86).
 * Zde používáme hodnotu z webového prototypu.
 */

/* =========================================================
   1. RESET
   ========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

input, textarea, button, select {
    font-family: inherit;
}

textarea {
    resize: vertical;
}

/* =========================================================
   2. DESIGN TOKENY — základní paleta veřejného webu
   ========================================================= */
:root {
    /* Základní paleta */
    --paper:        oklch(0.965 0.012 84);   /* hlavní pozadí — teplý papír          */
    --paper2:       oklch(0.985 0.007 86);   /* světlejší plochy, karty              */
    --ink:          oklch(0.235 0.006 70);   /* hlavní text, tmavé sekce             */
    --ink2:         oklch(0.44 0.008 72);    /* sekundární text                      */
    --line:         oklch(0.86 0.012 78);    /* hairline ohraničení 1px              */
    --line2:        oklch(0.91 0.01 80);     /* světlejší dělicí linie               */
    --accent:       oklch(0.47 0.12 33);     /* terakota — primární akcent, CTA      */
    --accent-deep:  oklch(0.38 0.10 33);     /* hover stav primárního tlačítka       */
    --green:        oklch(0.46 0.06 145);    /* aktivní stav (zelená) — web          */

    /* Placeholder — pruhované pozadí pro prázdné náhledy */
    --ph: repeating-linear-gradient(
        135deg,
        oklch(0.90 0.012 80) 0 13px,
        oklch(0.935 0.012 80) 13px 26px
    );

    /* -------------------------------------------------------
       Sekce „Výdej masa" — samostatná tmavě-zelená/zlatá paleta
       Hodnoty z prototypu, řádek ~437:
         style="--fg:oklch(0.345 0.055 150); --fg2:oklch(0.27 0.045 150);
                --cream:oklch(0.912 0.013 95); --gold:oklch(0.66 0.082 78);
                --greenstripe:…; --boardstripe:…"
       ------------------------------------------------------- */
    --fg:    oklch(0.345 0.055 150);  /* tmavě zelená — hero pozadí sekce masa  */
    --fg2:   oklch(0.27 0.045 150);   /* tmavší zelená — patička sekce masa     */
    --cream: oklch(0.912 0.013 95);   /* krémová — světlé pozadí kategorií      */
    --gold:  oklch(0.66 0.082 78);    /* zlatá/okrová — akcent a CTA v maso sekci */

    /* Opakující se vzory v sekci masa */
    --greenstripe: repeating-linear-gradient(
        135deg,
        oklch(0.30 0.045 150) 0 14px,
        oklch(0.33 0.05 150) 14px 28px
    );
    --boardstripe: repeating-linear-gradient(
        135deg,
        oklch(0.31 0.008 60) 0 14px,
        oklch(0.345 0.01 60) 14px 28px
    );

    /* -------------------------------------------------------
       Typografie
       POZOR: prototyp definuje všechny tři tokeny jako Arial stack.
       Sémanticky je rozlišujeme pro pozdější snadnou výměnu za
       skutečné serif/mono fonty (Google Fonts apod.).
       ------------------------------------------------------- */
    --serif: Arial, Helvetica, sans-serif;  /* nadpisy — v prototypu Arial         */
    --sans:  Arial, Helvetica, sans-serif;  /* běžný text                          */
    --mono:  Arial, Helvetica, sans-serif;  /* UPPERCASE eyebrow labely            */
}

/* =========================================================
   3. VÝBĚR A SCROLLBAR
   ========================================================= */
::selection {
    background: oklch(0.47 0.12 33); /* --accent */
    color: #fff;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background: oklch(0.80 0.012 78);
    border: 3px solid oklch(0.965 0.012 84); /* --paper */
}

::-webkit-scrollbar-thumb:hover {
    background: oklch(0.70 0.012 78);
}

/* =========================================================
   4. ANIMACE
   ========================================================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(70px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-70px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes expandDown {
    from { opacity: 0.25; transform: translateY(-8px); }
    to   { opacity: 1;    transform: translateY(0); }
}

/* Scroll-driven animace pro sekci masa a špejcharu */
@supports (animation-timeline: view()) {
    [data-meat-photo] {
        animation: slideInRight linear both;
        animation-timeline: view();
        animation-range: entry 6% cover 36%;
    }
    [data-spejchar-photo] {
        animation: slideInLeft linear both;
        animation-timeline: view();
        animation-range: entry 6% cover 36%;
    }
}

/* =========================================================
   5. LAYOUT HELPERS
   ========================================================= */

/* Maximální šířka obsahu — 1200px, padding 28px po stranách */
.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}

/* Mřížkové výpisy — dojem tabulky s hairline linkami */
.grid-lines {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

/* =========================================================
   6. TYPOGRAFICKÉ HELPERY
   ========================================================= */

/* Serif nadpisy */
.serif {
    font-family: var(--serif);
}

/* Mono eyebrow label — UPPERCASE s velkým letter-spacingem */
.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink2);
}

/* Varianta eyebrow s menším spacingem */
.eyebrow--sm {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Eyebrow v barvě akcentu */
.eyebrow--accent {
    color: var(--accent);
}

/* Administrace / labels (10–11px, .12em) */
.label {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink2);
}

/* =========================================================
   7. BORDER-RADIUS KONVENCE
   (žádné zaoblení kontejnerů/inputů — estetika je hranatá)
   ========================================================= */

/* Avatary */
.avatar {
    border-radius: 50%;
}