/* ================================================
   HABITOSGALI - PALETA DE COLORES Y VARIABLES
   ================================================ */

:root {
    /* Colores principales */
    --primary: #4F46E5;
    --primary-hover: #4338CA;
    --primary-light: #EEF2FF;
    --primary-muted: rgba(79, 70, 229, 0.1);
    --primary-gradient-end: #667eea;
    
    /* Color secundario / acento */
    --secondary-color: #E91E63;
    --secondary-muted: rgba(233, 30, 99, 0.3);
    
    /* Superficies */
    --bg-primary: #FAFAFA;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F4F4F5;
    --background-color: #F4F4F5;
    --hover-bg: #F4F4F5;
    
    /* Texto */
    --text-primary: #18181B;
    --text-secondary: #71717A;
    --text-muted: #A1A1AA;
    --text-on-primary: #FFFFFF;
    
    /* Bordes */
    --border-light: #E4E4E7;
    --border-medium: #D4D4D8;
    
    /* Estados */
    --success: #10B981;
    --success-light: #D1FAE5;
    --success-hover: #059669;
    --success-dark: #047857;
    --error: #EF4444;
    --error-light: #FEE2E2;
    --error-hover: #DC2626;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    
    /* Info (azul) */
    --info: #3b82f6;
    --info-hover: #2563eb;
    --info-dark: #1d4ed8;
    
    /* Calendario - indicadores */
    --photo: #ff6b35;
    --photo-light: #f7931e;
    --repost: #28a745;
    --repost-light: #20c997;
    
    /* Fondos especiales */
    --video-bg: #000000;
    --bar-bg: #e0e0e0;
    
    /* Overlays */
    --overlay-heavy: rgba(0, 0, 0, 0.7);
    --overlay-medium: rgba(0, 0, 0, 0.5);
    
    /* Modal de edición */
    --modal-bg: #1a1a1a;
    --modal-input-bg: #2a2a2a;
    --modal-border: #333333;
    --modal-text: #e0e0e0;
    --modal-accent: #7B73FF;
    --modal-muted: #999999;
    
    /* Sombras */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #818CF8;
        --primary-hover: #6366F1;
        --primary-light: #1E1B4B;
        --primary-muted: rgba(129, 140, 248, 0.15);
        --primary-gradient-end: #667eea;
        
        --secondary-color: #F48FB1;
        --secondary-muted: rgba(244, 143, 177, 0.3);
        
        --bg-primary: #09090B;
        --bg-secondary: #18181B;
        --bg-tertiary: #27272A;
        --background-color: #27272A;
        --hover-bg: #27272A;
        
        --text-primary: #FAFAFA;
        --text-secondary: #A1A1AA;
        --text-muted: #71717A;
        
        --border-light: #27272A;
        --border-medium: #3F3F46;
        
        --success-light: #064E3B;
        --error-light: #7F1D1D;
        --warning-light: #78350F;
        
        --video-bg: #18181B;
        --bar-bg: #3F3F46;
        
        --modal-bg: #0F0F14;
        --modal-input-bg: #1A1A24;
        --modal-border: #2A2A34;
        --modal-text: #D4D4D8;
        --modal-accent: #918AFF;
        --modal-muted: #71717A;
    }
}