/* :root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary-color: #64748b;
    --accent-color: #f59e0b;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --background-color: #f8fafc;
    --surface-color: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
} */

/* Variables CSS - Amazon Reviewer Theme */
/* Basado en el icono: fondo azul oscuro-negro, acento amarillo vibrante */
:root {
    /* Colores principales - Azul oscuro-negro del icono */
    --primary-color: #24304d;        /* Slate-900 - Azul oscuro-negro base */
    --primary-dark: #020617;        /* Slate-950 - Más oscuro para gradientes */
    --primary-light: #1e293b;       /* Slate-800 - Versión más clara */
    --primary-hover: #1e293b;       /* Hover state */
    
    /* Color acento - Amarillo vibrante del gráfico */
    --accent-color: #facc15;        /* Yellow-400 - Amarillo vibrante */
    --accent-dark: #eab308;         /* Yellow-500 - Versión más oscura */
    --accent-light: #fde047;        /* Yellow-300 - Versión más clara */
    
    /* Colores secundarios */
    --secondary-color: #475569;     /* Slate-600 */
    --success-color: #10b981;       /* Emerald-500 - Verde para éxito */
    --warning-color: #f59e0b;       /* Amber-500 - Naranja para advertencias */
    --danger-color: #ef4444;        /* Red-500 - Rojo para errores */
    --info-color: #3b82f6;          /* Blue-500 - Azul para información */
    
    /* Fondos - Mantener claros para legibilidad pero con tonos sutiles */
    --background-color: #f8fafc;    /* Slate-50 - Fondo claro */
    --surface-color: #ffffff;       /* Blanco puro para tarjetas */
    --surface-dark: #f1f5f9;        /* Slate-100 - Superficie alternativa */
    
    /* Fondos específicos */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-dark: #0f172a;             /* Para secciones oscuras */
    --bg-dark-secondary: #1e293b;   /* Secundario oscuro */
    
    /* Textos */
    --text-primary: #0f172a;        /* Slate-900 - Texto principal oscuro */
    --text-secondary: #475569;       /* Slate-600 - Texto secundario */
    --text-muted: #64748b;          /* Slate-500 - Texto atenuado */
    --text-light: #ffffff;           /* Blanco para texto sobre fondos oscuros */
    --text-accent: #facc15;         /* Amarillo para destacar */
    
    /* Bordes */
    --border-color: #e2e8f0;         /* Slate-200 */
    --border-hover: #cbd5e1;        /* Slate-300 */
    --border-dark: #334155;         /* Slate-700 - Para bordes en modo oscuro */
    
    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1);
    --shadow-accent: 0 4px 14px 0 rgb(250 204 21 / 0.3); /* Sombra amarilla para acentos */
    
    /* Radios */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);
    --gradient-hero: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--primary-color) 100%);
    
    /* Fuente */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}