/* Troškovi.app – dizajnerski tokeni („Smirena zelena“). Učitava se PRVA, prije app.css/dashboard.css/account.css/import.css.
   Jedino mjesto gdje smiju stajati konkretne boje, veličine i razmaci; ostali CSS koristi samo var(--…).
   Samo svijetla tema. Kontrasti (WCAG 2.1, omjer):
     text #1A1F1C na bg 15.7, na surface 16.7 | text-muted #5B655F na bg 5.7, na surface 6.1, na surface-muted 5.3
     primary #0F4C3A na bg 9.4, na surface 9.9; bijela na primary 9.9, na primary-hover 12.7; primary na accent 6.6
     on-primary-muted #C9DCD3 na primary 7.0; accent #8FE3C0 na primary 6.6 (poveznice u tamnom podnožju)
     negative #C0392B na surface 5.4, na bg 5.1, na negative-bg 4.5 | positive-text #17704A na surface 6.1, na bg 5.7, na positive-bg 5.4
     border-strong #7A857E (obrub polja) na surface 3.8, na bg 3.6 (≥ 3:1, WCAG 1.4.11)
   Napomena: #1E8E5A (positive) i #E8A317 (warning) NISU za tekst (4.1 i 2.2) – samo za ispune, obrube i grafikone;
   za zeleni tekst služi --color-positive-text. */

:root {
    /* Boje */
    --color-primary: #0F4C3A;
    --color-primary-hover: #0B3A2C;
    --color-primary-tint: #E3F1EA;
    --color-on-primary: #FFFFFF;
    --color-accent: #8FE3C0;
    --color-bg: #FAF8F3;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F3F1EA;
    --color-text: #1A1F1C;
    --color-text-muted: #5B655F;
    --color-border: #D9DED8;
    --color-border-strong: #7A857E;
    --color-warning: #E8A317;
    --color-warning-bg: #FDF3DC;
    --color-negative: #C0392B;
    --color-negative-bg: #FBEDEB;
    --color-positive: #1E8E5A;
    --color-positive-text: #17704A;
    --color-positive-bg: #EAF5EE;
    --color-positive-border: #BCDCCB;
    --color-mark: #CDEFE0;
    /* Brand (public/assets/brand/README.md): „.app“ u lockupu – menta na tamnoj podlozi, zelena na svijetloj */
    --color-brand-tld: var(--color-positive);
    --color-brand-tld-on-dark: var(--color-accent);
    --color-on-primary-muted: #C9DCD3;
    --color-backdrop: rgb(26 31 28 / 55%);
    --color-hover: rgb(15 76 58 / 6%);
    --color-focus: var(--color-primary);

    /* Grafikoni (dashboard.css ih primjenjuje na klase koje generira app/Chart.php) */
    --chart-expense: #0F4C3A;
    --chart-income: #1E8E5A;
    --chart-p1: #3F7F68;
    --chart-p2: #8FB9A8;
    --chart-p3: #CFE3DA;
    --chart-track: #E7EBE6;
    --chart-line: #1A1F1C;
    --chart-grid: #C9D0CA;

    /* Tipografija */
    --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --text-lg: clamp(1.0625rem, 1.03rem + 0.2vw, 1.1875rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-kpi: clamp(1.375rem, 1.15rem + 1.1vw, 2.25rem);
    --leading: 1.5;
    --leading-tight: 1.2;

    /* Razmaci (ljestvica od 8 px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --gutter: var(--space-4);
    --gap: clamp(var(--space-3), 1.6vw, var(--space-5));
    --page-pad: var(--gutter);

    /* Oblici */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-dialog: 0 8px 32px rgb(26 31 28 / 16%);
    --border: 1px solid var(--color-border);

    /* Raspored */
    --content-max: 1100px;
    --touch: 44px;
    --tabbar-h: 64px;
    --topbar-h: 56px;

    /* Pokret */
    --ease: 0.15s ease;

    color-scheme: light;
}

@media (min-width: 768px) {
    :root {
        --gutter: var(--space-5);
    }
}

@media (min-width: 1100px) {
    :root {
        --gutter: var(--space-6);
    }
}

/* Ispis: bijela podloga, crni tekst, bez bojenja */
@media print {
    :root {
        --color-bg: #FFFFFF;
        --color-surface: #FFFFFF;
        --color-surface-muted: #FFFFFF;
        --color-text: #000000;
        --color-text-muted: #333333;
        --color-primary: #000000;
        --color-primary-hover: #000000;
        --color-border: #BBBBBB;
        --color-border-strong: #555555;
        --color-negative: #000000;
        --color-positive-text: #000000;
        --color-positive-bg: #FFFFFF;
        --color-positive-border: #999999;
        --color-mark: #FFFFFF;
        --chart-expense: #000000;
        --chart-income: #555555;
        --chart-p1: #555555;
        --chart-p2: #999999;
        --chart-p3: #CCCCCC;
        --chart-track: #E5E5E5;
        --chart-line: #000000;
        --chart-grid: #BBBBBB;
    }
}