:root {
    /* 🎯 Colores de Interfaz */
    --primary-color:         #667eea;           /* Botones principales */
    --primary-color-hover:   #5a6fd8;
    --primary-color-light:   rgba(102, 126, 234, 0.2);

    --accent-color:          #4299e1;           /* Etiquetas, inputs activos */
    --accent-color-light:    rgba(66, 153, 225, 0.1);

    /* 🔳 Bordes, Inputs y Formulario */
    --input-bg:              #fafafa;
    --input-border:          #ddd;
    --input-border-muted:    #ccc;
    --input-border-focus:    #007bff;
    --box-border-light:      #e2e8f0;
    --box-border-hover:      #cbd5e0;

    /* 🖋 Texto */
    --text-default:          #333;
    --text-muted:            #666;
    --text-light:            #555;
    --text-soft:             #4a5568;
    --text-label:            #2d3748;
    --text-link:             #007bff;

    /* 🟢 Éxito */
    --success-bg:            #d4edda;
    --success-border:        #c3e6cb;
    --success-text:          #155724;
    --success-tag:           #48bb78;
    --success-tag-light:     #c6f6d5;

    /* 🔴 Error */
    --error-bg:              #f8d7da;
    --error-border:          #f5c6cb;
    --error-text:            #721c24;
    --error-color:           #e63946;
    --danger-bg:             #dc3545;
    --danger-hover:          #c82333;

    /* 🟡 Advertencia */
    --warning-bg:            #fff3cd;
    --warning-border:        #ffeaa7;
    --warning-text:          #856404;
    --warning-bg-info:       #ed8936;
    --accent-text:           #ffc107;

    /* 🔵 Información */
    --info-bg:               #d1ecf1;
    --info-border:           #bee5eb;
    --info-text:             #0c5460;
    --badge-info:            #17a2b8;

    /* ⚪ Neutros / Generales */
    --white:                 #ffffff;
    --light-bg:              #f5f7fa;
    --ultra-light:           #f7fafc;
    --light-gray:            #edf2f7;
    --tooltip-bg:            #333;
    --tooltip-bg-hover:      #555;
    --tooltip-text:          #fff;

    /* 🌈 Gradientes (colores base separados) */
    --gradient-start:            #667eea;
    --gradient-end:              #764ba2;

    --success-gradient-start:    #f0fff4;
    --success-gradient-end:      #c6f6d5;

    --warning-gradient-start:    #fff3cd;
    --warning-gradient-end:      #ffeaa7;

    /* Shadows */
    --yellow-shadow: rgba(255, 193, 7, 0.25);
    --green-shadow:  rgba(40, 167, 69, 0.25);
    --blue-shadow: rgba(0, 123, 255, 0.25);
}