/* ===========================================================
   Klima S Sistem
   Design System
   variables.css
   -----------------------------------------------------------
   Centralno mesto za:
   - boje
   - tipografiju
   - razmake
   - senke
   - border-radius
   - tranzicije
   =========================================================== */

:root {

    /* =======================================================
       COLORS
       ======================================================= */

    --color-primary: #0B7DD8;
    --color-primary-dark: #0868B2;
    --color-secondary: #08385F;
    --color-accent: #FF8C2A;

    --color-success: #28A745;
    --color-warning: #FFC107;
    --color-danger: #DC3545;

    --color-white: #FFFFFF;

    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-700: #334155;
    --color-gray-900: #0F172A;

    --color-text: var(--color-gray-700);

    /* =======================================================
       TYPOGRAPHY
       ======================================================= */

    --font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.8rem;
    --font-size-4xl: 3.5rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height: 1.6;

    /* =======================================================
       LAYOUT
       ======================================================= */

    --container-width: 1280px;

    --section-space: 6rem;

    --content-space: 2rem;

    /* =======================================================
       BORDER RADIUS
       ======================================================= */

    --radius-sm: .5rem;
    --radius-md: .9rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;

    /* =======================================================
       SHADOWS
       ======================================================= */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.05);

    --shadow-md:
        0 10px 25px rgba(0,0,0,.08);

    --shadow-lg:
        0 20px 50px rgba(0,0,0,.12);

    /* =======================================================
       TRANSITIONS
       ======================================================= */

    --transition-fast: .2s ease;

    --transition:
        .3s ease;

    --transition-slow:
        .45s ease;

    /* =======================================================
       HEADER
       ======================================================= */

    --header-height: 88px;

}