/* ====================================
   GLOBAL CSS VARIABLES
   All CSS custom properties for the entire app
   Import this file first in any stylesheet
   ==================================== */

:root {
    /* ================================
       PRIMARY COLORS
       ================================ */
    --color-primary: #6366f1;
    --color-primary-dark: #4f46e5;
    --color-primary-light: rgba(99, 102, 241, 0.1);
    --color-primary-lighter: rgba(99, 102, 241, 0.05);
    
    /* ================================
       GRADIENTS
       ================================ */
    --gradient-balance: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-income: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-expense: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    --gradient-button: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* ================================
       STATUS COLORS
       ================================ */
    --color-success: #10b981;
    --color-success-light: #dcfce7;
    --color-success-dark: #16a34a;
    
    --color-danger: #ef4444;
    --color-danger-light: #fee2e2;
    --color-danger-dark: #dc2626;
    
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-warning-dark: #d97706;
    
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    --color-info-dark: #2563eb;
    
    /* ================================
       CATEGORY COLORS
       ================================ */
    /* Grocery */
    --color-grocery-bg: #dcfce7;
    --color-grocery: #16a34a;
    
    /* Transport */
    --color-transport-bg: #fef3c7;
    --color-transport: #d97706;
    
    /* Electronics */
    --color-electronics-bg: #e0e7ff;
    --color-electronics: #6366f1;
    
    /* Shopping */
    --color-shopping-bg: #f3e8ff;
    --color-shopping: #9333ea;
    
    /* Family */
    --color-family-bg: #fce7f3;
    --color-family: #db2777;
    
    /* Travel */
    --color-travel-bg: #ddd6fe;
    --color-travel: #7c3aed;
    
    /* Salary/Income */
    --color-salary-bg: #dbeafe;
    --color-salary: #2563eb;
    
    /* Bills */
    --color-bills-bg: #fef2f2;
    --color-bills: #dc2626;
    
    /* Entertainment */
    --color-entertainment-bg: #fff7ed;
    --color-entertainment: #ea580c;
    
    /* Health */
    --color-health-bg: #fef3c7;
    --color-health: #ca8a04;
    
    /* ================================
       NEUTRAL COLORS (GRAYSCALE)
       ================================ */
    --color-white: #ffffff;
    --color-black: #000000;
    
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    
    /* ================================
       BACKGROUND COLORS
       ================================ */
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f9fafb;
    --bg-hover: #f9fafb;
    --bg-active: #f3f4f6;
    --bg-disabled: #e5e7eb;
    
    /* ================================
       TEXT COLORS
       ================================ */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-muted: #9ca3af;
    --text-white: #ffffff;
    --text-disabled: #d1d5db;
    
    /* ================================
       BORDER COLORS
       ================================ */
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    --border-dark: #d1d5db;
    --border-focus: #6366f1;
    
    /* ================================
       SPACING SCALE
       ================================ */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 80px;
    
    /* ================================
       FONT SIZES
       ================================ */
    --font-xs: 12px;
    --font-sm: 13px;
    --font-base: 14px;
    --font-md: 15px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 20px;
    --font-3xl: 24px;
    --font-4xl: 28px;
    --font-5xl: 32px;
    --font-6xl: 36px;
    --font-7xl: 48px;
    
    /* ================================
       FONT WEIGHTS
       ================================ */
    --font-thin: 100;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* ================================
       LINE HEIGHTS
       ================================ */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* ================================
       BORDER RADIUS
       ================================ */
    --radius-none: 0;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
    
    /* ================================
       SHADOWS
       ================================ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 4px 12px rgba(99, 102, 241, 0.4);
    --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.2);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    
    /* ================================
       TRANSITIONS
       ================================ */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-all: all 0.3s ease;
    
    /* ================================
       Z-INDEX SCALE
       ================================ */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ================================
       LAYOUT DIMENSIONS
       ================================ */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 80px;
    --header-height: 80px;
    --footer-height: 60px;
    --container-max-width: 1400px;
    
    /* ================================
       ICON SIZES
       ================================ */
    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 28px;
    --icon-2xl: 32px;
    --icon-3xl: 40px;
    --icon-4xl: 48px;
    
    /* ================================
       BUTTON SIZES
       ================================ */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    
    --btn-padding-sm: var(--space-sm) var(--space-md);
    --btn-padding-md: var(--space-md) var(--space-xl);
    --btn-padding-lg: var(--space-lg) var(--space-2xl);
    
    /* ================================
       INPUT SIZES
       ================================ */
    --input-height-sm: 32px;
    --input-height-md: 40px;
    --input-height-lg: 48px;
    
    --input-padding-sm: var(--space-sm) var(--space-md);
    --input-padding-md: var(--space-md) var(--space-lg);
    --input-padding-lg: var(--space-lg) var(--space-xl);
    
    /* ================================
       BORDER WIDTH
       ================================ */
    --border-width-thin: 1px;
    --border-width-normal: 2px;
    --border-width-thick: 3px;
    --border-width-extra: 4px;
    
    /* ================================
       WALLET TYPE COLORS
       ================================ */
    --color-wallet-cash: #10b981;
    --color-wallet-cash-light: #dcfce7;
    --color-wallet-bank: #3b82f6;
    --color-wallet-bank-light: #dbeafe;
    --color-wallet-credit: #f59e0b;
    --color-wallet-credit-light: #fef3c7;
    --color-wallet-digital: #8b5cf6;
    --color-wallet-digital-light: #ede9fe;
    
    /* ================================
       SPECIFIC ELEMENT COLORS
       ================================ */
    --color-btn-cancel: #6b7280;
    --color-btn-cancel-hover: #374151;
    --color-input-border: #e5e7eb;
    --color-input-border-hover: #d1d5db;
    --color-input-border-focus: #667eea;
    
    /* ================================
       MODAL COLORS
       ================================ */
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --modal-bg: #ffffff;
    --modal-header-border: #e5e7eb;
    --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    
    /* ================================
       ANIMATION DURATIONS
       ================================ */
    --duration-fast: 0.2s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    --easing-ease: ease;
    --easing-ease-in: ease-in;
    --easing-ease-out: ease-out;
    --easing-ease-in-out: ease-in-out;

/* ================================
   DARK MODE VARIABLES (Optional)
   ================================ */
[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-hover: #374151;
    --bg-active: #4b5563;
    
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-muted: #6b7280;
    
    --border-color: #374151;
    --border-light: #4b5563;
    --border-dark: #1f2937;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);
}
}