/*
 * Design tokeni — tarafarm.rs
 *
 * Imena tokena su fiksna i dolaze iz šeme u .claude/rules/css.md.
 * Vrijednosti dolaze iz .claude/rules/projekat.md (Figma).
 * Nikad ne dodavati token izvan šeme bez odobrenja i upisa u css.md.
 *
 * Ovaj fajl se enqueue-a prvi i dependency je svim ostalim child stylesheetovima.
 */

:root {
    /* Colors */
    --color-primary: #88B04B;
    --color-primary-hover: #5E7D33;
    --color-primary-foreground: #FAFAFA;
    --color-secondary: #FBF7F2;
    --color-surface: #FBF7F2;
    --color-text: #36485C;
    --color-text-muted: #687685;
    --color-text-inverse: #FAFAFA;
    --color-bg: #ECF3F0;
    --color-border: #EBEDEF;
    --color-border-strong: #D7DADE;
    --color-surface-alt: #FFFFFF;
    /* Error i destruktivne akcije, npr. "Obriši" u korpi. Figma korpa, 2026-09-05. */
    --color-danger: #EF3535;

    /* Spacing — 8px grid */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;
    --space-8: 128px;

    /* Shape */
    --radius-sm: 8px;
    /* Kartice. Figma korpa, node 199:6440, 2026-09-05. */
    --radius-md: 16px;

    /*
     * Organski "cvijet" oblik. Isti izvoz se ponavlja u footeru, mobilnom meniju,
     * mini-cartu i product page-u, zato je ovdje jednom.
     * Napomena: u temi postoje jos tri VARIJANTE ovog oblika koje NISU iste
     * (razlika 6 do 10 posto povrsine), pa se ne mogu svesti na ovaj token.
     */
    --shape-blob: polygon(100% 58%, 99.9% 60.7%, 99.8% 63.3%, 99.5% 65.9%, 99% 68.3%, 98.5% 70.7%, 97.8% 73%, 97.1% 75.2%, 96.2% 77.2%, 95.3% 79.2%, 94.2% 81.2%, 93% 83%, 91.7% 84.7%, 90.4% 86.4%, 88.9% 87.9%, 87.4% 89.4%, 85.7% 90.7%, 84% 92%, 82.2% 93.2%, 80.3% 94.3%, 78.3% 95.2%, 76.3% 96.1%, 74.2% 97%, 72% 97.7%, 69.7% 98.3%, 67.4% 98.8%, 65% 99.2%, 62.5% 99.6%, 60% 99.8%, 57.4% 100%, 54.8% 100%, 52.1% 99.9%, 49.5% 99.6%, 46.8% 99.2%, 44.2% 98.6%, 41.5% 97.8%, 38.9% 96.9%, 36.3% 95.9%, 33.8% 94.7%, 31.3% 93.3%, 28.8% 91.9%, 26.4% 90.3%, 24% 88.6%, 21.8% 86.8%, 19.6% 84.9%, 17.4% 82.9%, 15.4% 80.8%, 13.5% 78.6%, 11.6% 76.3%, 9.9% 73.9%, 8.3% 71.5%, 6.8% 69.1%, 5.5% 66.5%, 4.2% 63.9%, 3.2% 61.3%, 2.2% 58.7%, 1.4% 56%, 0.8% 53.3%, 0.4% 50.5%, 0.1% 47.8%, 0% 45%, 0.1% 42.3%, 0.4% 39.6%, 0.8% 37%, 1.4% 34.5%, 2.2% 32.1%, 3.2% 29.7%, 4.2% 27.4%, 5.5% 25.2%, 6.8% 23.1%, 8.3% 21.1%, 9.9% 19.1%, 11.6% 17.2%, 13.5% 15.4%, 15.4% 13.8%, 17.4% 12.1%, 19.6% 10.6%, 21.8% 9.2%, 24% 7.9%, 26.4% 6.7%, 28.8% 5.5%, 31.3% 4.5%, 33.8% 3.6%, 36.3% 2.7%, 38.9% 2%, 41.5% 1.4%, 44.2% 0.9%, 46.8% 0.5%, 49.5% 0.2%, 52.1% 0.1%, 54.8% 0%, 57.4% 0.1%, 60% 0.4%, 62.5% 0.9%, 65% 1.5%, 67.4% 2.4%, 69.7% 3.4%, 72% 4.5%, 74.2% 5.9%, 76.3% 7.3%, 78.3% 8.9%, 80.3% 10.6%, 82.2% 12.5%, 84% 14.4%, 85.7% 16.5%, 87.4% 18.6%, 88.9% 20.9%, 90.4% 23.2%, 91.7% 25.7%, 93% 28.1%, 94.2% 30.7%, 95.3% 33.3%, 96.2% 35.9%, 97.1% 38.6%, 97.8% 41.4%, 98.5% 44.1%, 99% 46.9%, 99.5% 49.7%, 99.8% 52.5%, 99.9% 55.2%);

    /*
     * Type scale 1.250 (major third), baza 16px, sve zaokruzeno na parno.
     *
     *   token         tacno   parno   koristi se
     *   --fs-xsmall      --      12   copyright, meta
     *   --fs-small       --      14   footer tekst, meni, kontakt
     *   --fs-body     16.00      16   body
     *   --fs-h6       20.00      20   footer naslovi
     *   --fs-h5       25.00      24
     *   --fs-h4       31.25      32
     *   --fs-h3       39.06      40   shop / category naslov
     *   --fs-h2       48.83      48
     *   --fs-h1       61.04      64   hero naslov
     *
     * Dvije vrijednosti su svjesno izvan skale, po dizajnu:
     *   --fs-h1 je 64 umjesto 62 (h1/h2 odnos je time 1.333, ne 1.250)
     *   --fs-small je 14, izmedju --fs-body 16 i --fs-xsmall 12
     *
     * Minimumi u clamp-u su postojece mobilne vrijednosti dizajna, tako da
     * migracija na tokene ne pomjera nista na 375px.
     * Fluidni dio interpolira izmedju 375 i 1440px.
     */
    --fs-h1: clamp(32px, 20.73px + 3.005vw, 64px);
    --fs-h2: clamp(32px, 26.37px + 1.502vw, 48px);
    --fs-h3: clamp(28px, 23.77px + 1.127vw, 40px);
    --fs-h4: clamp(24px, 21.18px + 0.751vw, 32px);
    --fs-h5: 24px;
    --fs-h6: 20px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-xsmall: 12px;

    --lh-heading: 1.2;
    --lh-body: 1.5;
    --ls-heading: -0.02em;

    /* Motion — skala iz .claude/rules/js.md */
    --dur-fast: 150ms;
    --dur-med: 300ms;
    --dur-slow: 700ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}