/* ========================================
   VARIABLES DE COLORES - TitulApp
   Basado en la paleta de la aplicación Android
   ======================================== */

:root {
    /* Colores base de la app Android */
    --white: #FFFFFF;
    --porcelain: #ECEFF0;
    --ivory: #FFFDD0;
    --alto: #DADADA;
    --boulder: #7B7B7B;
    --tundora: #4A4A4A;
    
    /* Colores primarios */
    --color-primary: #66bb6a;
    --color-primary-dark: #308446;
    --color-primary-dark-old: #087f23;
    --color-primary-light: #80e27e;
    
    /* Colores específicos */
    --all-answer-filter-blue: #308477;
    --correct-answer-color: #66bb6a;
    --incorrect-answer-color: #ff6f60;
    --light-gray: #F0F0F0;
    
    /* === ADAPTACIONES PARA WEB CON MEJOR CONTRASTE === */
    
    /* Gradientes basados en los colores primarios */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-primary-dark-old) 0%, var(--all-answer-filter-blue) 100%);
    --gradient-hero: linear-gradient(135deg, var(--color-primary-dark-old) 0%, var(--color-primary-dark) 25%, var(--color-primary) 75%, var(--color-primary-light) 100%);
    --gradient-card: linear-gradient(145deg, var(--white) 0%, var(--porcelain) 100%);
    --gradient-success: linear-gradient(135deg, var(--correct-answer-color) 0%, var(--color-primary) 100%);
    --gradient-error: linear-gradient(135deg, var(--incorrect-answer-color) 0%, #e53e3e 100%);
    
    /* Backgrounds - Mejorados para contraste */
    --background-primary: var(--white);
    --background-secondary: var(--porcelain);
    --background-light: var(--light-gray);
    --background-accent: var(--ivory);
    --background-dark: var(--tundora);
    
    /* Borders - Mejorados */
    --border-light: var(--alto);
    --border-medium: var(--boulder);
    --border-primary: var(--color-primary-light);
    --border-focus: var(--color-primary);
    
    /* Textos - CORREGIDOS PARA MEJOR CONTRASTE */
    --text-primary: var(--tundora);           /* Texto principal más oscuro */
    --text-secondary: var(--boulder);         /* Texto secundario gris medio */
    --text-light: var(--alto);               /* Texto claro/deshabilitado */
    --text-white: var(--white);              /* Solo para fondos oscuros */
    --text-brand: var(--color-primary-dark); /* Texto de marca verde oscuro */
    --text-success: var(--color-primary-dark); /* Verde oscuro para éxito */
    --text-error: #d32f2f;                   /* Rojo más oscuro para errores */
    --text-warning: #f57c00;                 /* Naranja más oscuro */
    --text-info: var(--all-answer-filter-blue);
    
    /* Estados - Mejorados */
    --state-success: var(--correct-answer-color);
    --state-error: var(--incorrect-answer-color);
    --state-warning: #ffa726;
    --state-info: var(--all-answer-filter-blue);
    
    /* Sombras con colores de marca */
    --shadow-sm: 0 1px 3px rgba(102, 187, 106, 0.12), 0 1px 2px rgba(102, 187, 106, 0.24);
    --shadow-md: 0 4px 6px rgba(48, 132, 70, 0.07), 0 2px 4px rgba(48, 132, 70, 0.06);
    --shadow-lg: 0 10px 15px rgba(48, 132, 70, 0.1), 0 4px 6px rgba(48, 132, 70, 0.05);
    --shadow-xl: 0 20px 25px rgba(48, 132, 70, 0.1), 0 10px 10px rgba(48, 132, 70, 0.04);
    --shadow-inner: inset 0 2px 4px rgba(48, 132, 70, 0.06);
    --shadow-hover: 0 8px 25px rgba(48, 132, 70, 0.15), 0 4px 10px rgba(48, 132, 70, 0.1);
    
    /* Espaciados y medidas */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-xxl: 24px;
    
    /* Transiciones */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;
    
    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* === TEMA OSCURO (opcional para futuro) === */
@media (prefers-color-scheme: dark) {
    :root {
        --background-primary: var(--tundora);
        --background-secondary: #2a2a2a;
        --background-light: #3a3a3a;
        
        --text-primary: var(--color-primary-light);
        --text-secondary: var(--porcelain);
        --text-light: var(--alto);
        
        --border-light: #5a5a5a;
        --border-medium: var(--boulder);
        
        --gradient-card: linear-gradient(145deg, var(--tundora) 0%, #2a2a2a 100%);
    }
}

/* === UTILIDADES DE COLOR === */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-brand { color: var(--text-brand) !important; }
.text-success { color: var(--text-success) !important; }
.text-error { color: var(--text-error) !important; }
.text-warning { color: var(--text-warning) !important; }
.text-info { color: var(--text-info) !important; }
.text-white { color: var(--text-white) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--background-secondary) !important; }
.bg-success { background-color: var(--state-success) !important; }
.bg-error { background-color: var(--state-error) !important; }

.border-primary { border-color: var(--border-primary) !important; }
.border-success { border-color: var(--state-success) !important; }
.border-error { border-color: var(--state-error) !important; }