/* ================================================================
   variables.css — jedini master token fajl
   Svi ostali CSS fajlovi se oslanjaju na ove varijable.
   ================================================================ */
:root {

    /* ════ AKCENT — slate-blue ════════════════════════════════════ */
    --primary:          #3d5a80;
    --primary-dark:     #2c4460;
    --primary-600:      #2c4460;          /* alias za legacy reference */
    --primary-50:       rgba(61,90,128,.07);
    --primary-100:      rgba(61,90,128,.14);
    --primary-soft:     rgba(61,90,128,.09);
    --primary-border:   rgba(61,90,128,.20);
    --primary-gradient: linear-gradient(135deg, #3d5a80, #2c4460);

    /* ════ NEUTRALS ══════════════════════════════════════════════ */
    --secondary:        #2d3340;          /* tamni tekst, naslovi */
    --muted:            #64748b;          /* sekundarni tekst */
    --muted-light:      #94a3b8;          /* faint tekst, placeholder */
    --muted-dark:       #4b5563;          /* labele, caption */

    /* ════ SURFACES ══════════════════════════════════════════════ */
    --bg:               #f3f5f8;          /* pozadina stranice */
    --bg-alt:           #f3f5f8;          /* alias */
    --card-bg:          #ffffff;

    /* ════ BORDERS — jedan token ═════════════════════════════════ */
    --border:           #e2e6ea;
    --border-light:     #edf0f3;
    --border-color:     var(--border);    /* legacy alias — cards/forms/buttons/tabs */

    /* ════ LEGACY ALIASES (ne menjaj — koriste se u components/) ═ */
    --light-gray:       #f3f5f8;
    --dark-gray:        #343a40;

    /* ════ STATUS BOJE — solid, čitljivi ════════════════════════ */
    /* Koristi se za pills (orders), status tabs, history dots      */
    --status-1-bg:   #5a6478;   --status-1-text: #ffffff;   /* Poručena   — slate  */
    --status-2-bg:   #b45309;   --status-2-text: #ffffff;   /* Izrada     — amber  */
    --status-3-bg:   #1a7a52;   --status-3-text: #ffffff;   /* Isporučena — green  */
    --status-4-bg:   #1560a0;   --status-4-text: #ffffff;   /* Naplaćena  — blue   */
    --status-5-bg:   #0f766e;   --status-5-text: #ffffff;   /* variant    — teal   */
    --status-6-bg:   #6d28d9;   --status-6-text: #ffffff;   /* variant    — purple */
    --status-7-bg:   #b91c1c;   --status-7-text: #ffffff;   /* variant    — red    */

    /* Soft pozadine — za dot indikatore u tabs.css ════════════  */
    --status-1:      #c5c9d4;
    --status-2:      #e8c99a;
    --status-3:      #7ec9a2;
    --status-4:      #7ab2d8;
    --status-5:      #6dbdb7;
    --status-6:      #b89de8;
    --status-7:      #e89898;

    /* ════ IZVOR (lead sources) ══════════════════════════════════ */
    --izvor-1:       #3b6070;
    --izvor-2:       #4267b2;
    --izvor-3:       #833ab4;
    --izvor-4:       #f77737;
    --izvor-5:       #128c7e;

    /* ════ SIDEBAR ═══════════════════════════════════════════════ */
    /* JEDINO mesto za --sb-* varijable, sidebar.css nema :root    */
    --sb-bg:         #1c2025;
    --sb-bg-2:       #20252b;
    --sb-bg-3:       #1b1f24;
    --sb-text:       #e7ebef;
    --sb-muted:      #9ca3af;
    --sb-accent:     #94a3b8;             /* neutral — ne narandzasto */
    --sb-hover:      rgba(255,255,255,.055);
    --sb-border:     rgba(255,255,255,.06);
    --sb-radius:     14px;
    --sb-w:          280px;
    --sb-w-mini:     84px;
    --sb-shadow:     0 10px 30px rgba(0,0,0,.28);

    /* ════ LAYOUT & CHROME ═══════════════════════════════════════ */
    --app-header-h:  52px;
    --card-radius:   12px;
    --card-shadow:   0 4px 20px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.04);
    --glass-bg:      rgba(255,255,255,.85);
    --glass-blur:    blur(12px);

    /* ════ TIPOGRAFIJA ════════════════════════════════════════════ */
    --font-base: "Product Sans","Segoe UI",Roboto,Arial,Helvetica,sans-serif;
}