/* ==========================================================================
   Beauty Face be Petra — design tokeny
   JEDINÝ soubor, kde smí být hex hodnoty. Hlídá tests/tokens.test.mjs.
   ========================================================================== */

:root {
    /* --- Písma --- */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* --- Rozestupy (krok 8px) --- */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --space-12: 6rem;
    --space-16: 8rem;
    --space-20: 10rem;

    /* --- Layout --- */
    --container-max: 1240px;
    --container-pad: 1.5rem;
    --header-height: 74px;
    --radius: 2px;

    /* --- Pohyb --- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 0.2s;
    --duration-base: 0.4s;
    --duration-slow: 0.8s;

    /* --- Barvy: světlý motiv (výchozí) --- */
    --bg-primary: #FBF7F2;
    --bg-secondary: #F2E9E0;
    --bg-tertiary: #E5D7C8;
    --bg-invert: #241A15;

    --text-primary: #2A1F19;
    --text-secondary: #57453A;
    --text-muted: #6B5748;
    --text-on-invert: #F5EDE4;

    --gold: #C1994F;
    --gold-deep: #7A5719;
    --gold-on-invert: #D4AE68;
    /* --text-on-gold: tmavý text NA výplň --gold (např. .btn--gold). Nezávislý na
       --text-primary, protože ten se v tmavém motivu obrací na světlý a na jasné
       zlaté by nebyl čitelný. Stejná hodnota v obou motivech záměrně. */
    --text-on-gold: #2A1F19;

    --line: rgba(42, 31, 25, 0.12);
    --line-strong: rgba(42, 31, 25, 0.24);
    --line-on-invert: rgba(245, 237, 228, 0.18);
    --overlay: rgba(36, 26, 21, 0.55);
    --shadow-sm: rgba(42, 31, 25, 0.08);
    --shadow-md: rgba(42, 31, 25, 0.14);
    --grain-opacity: 0.035;
}

/* Na desktopu má hlavička navíc utility řádek (masthead) */
@media (min-width: 1100px) {
    :root {
        --header-height: 112px;
    }
}

:root[data-theme="dark"] {
    --bg-primary: #1A120D;
    --bg-secondary: #221811;
    --bg-tertiary: #2E211A;
    --bg-invert: #F2E9E0;

    --text-primary: #F5EDE4;
    --text-secondary: #CDBCAC;
    --text-muted: #A28E7D;
    --text-on-invert: #2A1F19;

    --gold: #D4AE68;
    --gold-deep: #D4AE68;
    --gold-on-invert: #7A5719;
    --text-on-gold: #2A1F19;

    --line: rgba(245, 237, 228, 0.10);
    --line-strong: rgba(245, 237, 228, 0.22);
    --line-on-invert: rgba(42, 31, 25, 0.18);
    --overlay: rgba(10, 7, 5, 0.62);
    --shadow-sm: rgba(0, 0, 0, 0.25);
    --shadow-md: rgba(0, 0, 0, 0.4);
    --grain-opacity: 0.05;
}