:root {
    --color-primary:       #4F46E5;  /* indigo - color principal */
    --color-primary-dark:  #3730A3;  /* indigo oscuro - hover */
    --color-primary-light: #EEF2FF;  /* indigo claro - fondos */
    --color-accent:        #06B6D4;  /* cyan - detalles y highlights */
    --color-success:       #22C55E;  /* verde */
    --color-warning:       #F59E0B;  /* amarillo */
    --color-danger:        #EF4444;  /* rojo */
    --color-dark:          #0F172A;  /* casi negro - sidebar, headers */
    --color-gray:          #64748B;  /* gris medio - textos secundarios */
    --color-light:         #F8FAFC;  /* gris muy claro - fondos */
    --color-white:         #FFFFFF;
    
    --font-main: 'Inter', sans-serif;
    --radius: 0.75rem;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}