/**
 * variables.css - Globalne CSS varijable
 * Promenom vrednosti ovde menjate boje na celom sajtu
 */

:root {
    /* ========== PRIMARNE BOJE ========== */
    --primary: #0D4077;
    --primary-dark: #093060;
    --primary-light: #1a5a99;
    
    /* ========== SEKUNDARNE BOJE ========== */
    --secondary: #C7363D;
    --secondary-dark: #a02930;
    --secondary-light: #d9545a;
    
    /* ========== AKCENT BOJE ========== */
    --success: #38ef7d;
    --success-dark: #2bc866;
    --warning: #f5576c;
    --warning-dark: #e03e54;
    --info: #4facfe;
    --info-dark: #2d9cfc;
    --danger: #e53e3e;
    --danger-dark: #c53030;
    
    /* ========== NEUTRALNE BOJE ========== */
    --dark: #2d3748;
    --dark-light: #4a5568;
    --gray: #718096;
    --gray-light: #a0aec0;
    --light: #f7fafc;
    --white: #ffffff;
    
    /* ========== BORDER BOJE ========== */
    --border-color: #e2e8f0;
    --border-color-dark: #cbd5e0;
    
    /* ========== POZADINE ========== */
    --bg-body: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    --bg-header: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --bg-card: #ffffff;
    --bg-hover: #f7fafc;
    
    /* ========== GRADIENT KOMBINACIJE ========== */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    --gradient-warning: linear-gradient(135deg, #f093fb 0%, var(--warning) 100%);
    --gradient-info: linear-gradient(135deg, var(--info) 0%, #00f2fe 100%);
    --gradient-success: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    
    /* ========== SENKE ========== */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 20px rgba(13, 64, 119, 0.4);
    --shadow-primary: 0 4px 15px rgba(13, 64, 119, 0.3);
    --shadow-secondary: 0 4px 15px rgba(199, 54, 61, 0.3);
    --shadow-warning: 0 4px 15px rgba(245, 87, 108, 0.3);
    --shadow-info: 0 4px 15px rgba(79, 172, 254, 0.3);
    
    /* ========== ZAOBLJENOST ========== */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-full: 25px;
    
    /* ========== FONT ========== */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 0.65rem;
    --font-size-sm: 0.75rem;
    --font-size-base: 0.9rem;
    --font-size-md: 0.95rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    
    /* ========== TRANZICIJE ========== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ========== SPACING ========== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
}

/* ========== TAMNA TEMA (opcionalno) ========== */
[data-theme="dark"] {
    --primary: #7c91f0;
    --primary-dark: #667eea;
    --dark: #e2e8f0;
    --dark-light: #cbd5e0;
    --gray: #a0aec0;
    --light: #2d3748;
    --white: #1a202c;
    --border-color: #4a5568;
    --bg-body: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    --bg-card: #2d3748;
    --bg-hover: #4a5568;
}