/* =============================================================================
   Kontrola SEO — hodnoty designu
   Jediné místo, kde se mění barvy, písma, stíny a odsazení celého webu.
   Web i nástěnka sdílejí tyhle hodnoty, aby to byl jeden systém, ne dva.
   ========================================================================== */

:root {
    /* --- plochy ------------------------------------------------------- */
    --kremova:      #fdf9f0;   /* podklad celého webu */
    --bila:         #ffffff;
    --inkoust:      #111111;   /* text, rámečky, stíny */
    --tmava:        #171e19;   /* tmavé sekce */
    --tmava-plus:   #272727;   /* karty uvnitř tmavých sekcí */
    --plocha-seda:  #f4f4f5;

    /* --- značka ------------------------------------------------------- */
    --ruzova:       #ff3d81;   /* hlavní akce, značka */
    --zluta:        #ffe17c;   /* hero plochy, zvýraznění */
    --salvej:       #b7c6c2;   /* klidný doplněk */

    /* --- stavy kontrol ------------------------------------------------ */
    --ok:           #3ddc97;
    --drobnost:     #ffd23f;
    --chyba:        #ff6b5e;
    --info:         #c8a2ff;

    /* --- text --------------------------------------------------------- */
    --text:         #111111;
    --text-tlumeny: #5b5b57;
    --text-na-tmave:#f2f2ef;

    /* --- písmo -------------------------------------------------------- */
    --pismo:        'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --pismo-nadpis: 'Archivo Black', 'Space Grotesk', Impact, system-ui, sans-serif;
    --pismo-cislo:  'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* --- rámečky a stíny ---------------------------------------------- */
    --ram:       2px solid var(--inkoust);
    --ram-slaby: 2px dashed #c9c5bb;
    --stin-s:    4px 4px 0 0 var(--inkoust);
    --stin-m:    6px 6px 0 0 var(--inkoust);
    --stin-l:    9px 9px 0 0 var(--inkoust);
    --stin-xl:   12px 12px 0 0 var(--inkoust);

    /* --- rádiusy ------------------------------------------------------ */
    --r-karta:    18px;
    --r-tlacitko: 8px;
    --r-stitek:   9999px;
    --r-pole:     10px;

    /* --- rozestupy ---------------------------------------------------- */
    --m1: 4px;  --m2: 8px;  --m3: 12px; --m4: 16px;
    --m5: 24px; --m6: 32px; --m7: 48px; --m8: 64px; --m9: 96px;

    /* --- šířky -------------------------------------------------------- */
    --obal:      1180px;
    --obal-uzky: 760px;

    --prechod: all .12s cubic-bezier(.2,.9,.3,1.2);
}

/* Mřížka na pozadí. V předloze nástěnky 24px při 5 %, používáme ji na celém webu,
   aby web a nástěnka stály na stejné ploše. */
.mrizka-pozadi {
    background-image:
        linear-gradient(to right, rgba(17,17,17,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(17,17,17,.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Tečkovaný rastr na žlutých plochách (32px, 10 %) z předlohy webu. */
.tecky-pozadi {
    background-image: radial-gradient(rgba(17,17,17,.10) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
}