/* ==========================================================================
   Tokeni dizajn-sustava
   ========================================================================== */

:root {
    /* Primarne boje: lime, green i ink iz logotipa; forest je od 2026-10-27 svježija smaragdna zelena, bliža #007534 iz znaka (bijeli tekst 4,9:1) */
    --c-lime: #A6CE39;
    --c-lime-soft: #D6EE8E; /* tekst na zelenim plohama (3,6:1 i više) */
    --c-green: #62BB46;
    --c-forest: #2A8048;
    /* Prijelaz sa stare stranice, od zelene iz znaka do limete; --c-grad-mid je boja na pola puta */
    --grad-brand: linear-gradient(to right, #007534, var(--c-lime));
    /* Isti prijelaz za plohe s bijelim tekstom: kraj je tamnija limeta, bijeli tekst ostaje čitljiv (4,5:1) */
    --grad-brand-deep: linear-gradient(120deg, #007534, #43861C);
    --grad-brand-deep-hover: linear-gradient(120deg, #005E2A, #366C16);
    /* Pločice s bijelom ikonom: vidljiviji prijelaz, ikona ostaje uočljiva (3:1) */
    --grad-brand-icon: linear-gradient(135deg, #007534, #5DA637);
    --c-grad-mid: #53A137;
    --c-ink: #231F20;

    /* Zelene nijanse */
    --c-green-50: #F4F9EE;
    --c-green-100: #E4F2D9;
    --c-green-200: #CBE6B8;
    --c-forest-700: #1F6E3D;
    --c-forest-900: #175A31;

    /* Topli neutralni */
    --c-sand-50: #FAF8F4;
    --c-sand-200: #EDE7DC;

    /* Sivi, izvedeni iz crne logotipa */
    --c-ink-700: #4A4647;
    --c-ink-500: #6B6768;
    --c-ink-200: #D9D7D6;
    --c-ink-50: #F5F4F4;
    --c-white: #FFFFFF;

    /* Funkcionalne */
    --c-error: #B3261E;
    --c-warning: #9A5B00;
    --c-info: #1F6F8B;
    --c-success: var(--c-forest);

    /* Uloge */
    --c-text: var(--c-ink);
    --c-text-muted: var(--c-ink-500);
    --c-bg: var(--c-white);
    --c-border: var(--c-ink-200);
    --c-link: var(--c-forest);
    --c-link-hover: var(--c-forest-700);
    --c-focus: var(--c-forest);

    /* Tipografija */
    --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-text: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-xs: .875rem;
    --fs-sm: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: clamp(1.25rem, 1.15rem + .4vw, 1.375rem);
    --fs-xl: clamp(1.5rem, 1.3rem + .9vw, 1.75rem);
    --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
    --fs-3xl: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
    --fs-4xl: clamp(2.5rem, .9rem + 5vw, 5.5rem);

    --lh-tight: 1.1;
    --lh-heading: 1.2;
    --lh-body: 1.65;

    /* Razmaci (korak 4px) */
    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: .75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 2.5rem;
    --s-8: 3rem;
    --s-9: 4rem;
    --s-10: 5rem;
    --s-11: 6rem;
    --s-12: 7.5rem;

    --section-y: clamp(3.5rem, 8vw, 7.5rem);
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --container: 80rem;
    --container-narrow: 48rem;

    /* Radijusi */
    --r-sm: 8px;
    --r-md: 16px;
    --r-lg: 28px;
    --r-pill: 999px;

    /* Sjene, tonirane crnom logotipa */
    --shadow-1: 0 1px 2px rgb(35 31 32 / .06), 0 4px 16px rgb(35 31 32 / .06);
    --shadow-2: 0 2px 4px rgb(35 31 32 / .06), 0 16px 40px rgb(35 31 32 / .12);

    /* Pokret */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .35s var(--ease);
    --t-slow: 1s var(--ease);

    --header-h: 5rem;
}