/* ========================
   CSS Variables / Theme
   ======================== */

:root {
    /* Primary Colors */
    --bg-primary: #0D1117;
    --bg-secondary: #161B22;
    --bg-card: #1C2128;
    --bg-card-hover: #21262D;
    --bg-input: #0D1117;
    
    /* Accent Colors */
    --accent-teal: #00D9A5;
    --accent-teal-dark: #00B88A;
    --accent-teal-glow: rgba(0, 217, 165, 0.3);
    --accent-pink: #FF4D6D;
    --accent-pink-dark: #E6435F;
    --accent-orange: #FF9500;
    --accent-blue: #58A6FF;
    --accent-purple: #A371F7;
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #8B949E;
    --text-tertiary: #6E7681;
    --text-muted: #484F58;
    
    /* Border Colors */
    --border-primary: #30363D;
    --border-secondary: #21262D;
    
    /* Category Colors */
    --cat-entertainment: #00D9A5;
    --cat-work: #FF6B6B;
    --cat-utilities: #58A6FF;
    --cat-personal: #FFD93D;
    --cat-other: #FF4D6D;
    
    /* Service Colors */
    --netflix: #E50914;
    --spotify: #1DB954;
    --youtube: #FF0000;
    --amazon: #00A8E1;
    --apple: #000000;
    --disney: #113CCF;
    --dropbox: #0061FF;
    
    /* Loan Type Colors */
    --loan-housing: #58A6FF;
    --loan-car: #A371F7;
    --loan-personal: #FF9500;
    --loan-education: #00D9A5;
    --loan-credit: #FF4D6D;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--accent-teal-glow);
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 40px;
    
    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    
    /* Z-Index */
    --z-base: 1;
    --z-sidebar: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
    
    /* Layout */
    --sidebar-width: 260px;
    --header-height: 60px;
    --fab-size: 56px;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F6F8FA;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F3F4F6;
    --bg-input: #F6F8FA;
    
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --text-muted: #D1D5DB;
    
    --border-primary: #E5E7EB;
    --border-secondary: #F3F4F6;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}