/*
 * Paleta de colores central de la aplicación.
 * Cambia cualquier color de marca UNICAMENTE aqui.
 *
 * Los overrides de clases de Tailwind (bg-gray-800, text-blue-600, etc.)
 * viven en custom.css y consumen estas variables, por lo que nunca deben
 * llevar valores hexadecimales propios.
 */
:root {
    /* Primary - Amarillo/Dorado (acentos de marca, CTA, estados activos) */
    --color-primary: #FFD700;
    --color-primary-rgb: 255, 215, 0;
    --color-primary-dark: #E6C200;
    --color-primary-darker: #B8860B;
    --color-primary-soft: #FFF7D6;

    /* Secondary - Negro (superficies oscuras, sidebar, botones principales) */
    --color-secondary: #121212;
    --color-secondary-rgb: 18, 18, 18;
    --color-secondary-light: #2A2A2A;
    --color-secondary-lighter: #3D3D3D;
    --color-secondary-lighter-rgb: 61, 61, 61;
    --color-secondary-dark: #000000;

    /* Tertiary - Gris (texto secundario, bordes, elementos neutros/mutados) */
    --color-tertiary: #757575;
    --color-tertiary-light: #BDBDBD;
    --color-tertiary-lighter: #D6D6D6;
    --color-tertiary-dark: #4D4D4D;

    /* Neutral - Blanco (fondos y superficies claras) */
    --color-neutral: #FFFFFF;
    --color-neutral-soft: #F5F5F5;
    --color-neutral-softer: #FAFAFA;
    --color-neutral-border: #E0E0E0;
}

/* Clases utilitarias de marca, listas para usarse en HTML nuevo */
.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }

.bg-secondary { background-color: var(--color-secondary); }
.text-secondary { color: var(--color-secondary); }
.border-secondary { border-color: var(--color-secondary); }

.bg-tertiary { background-color: var(--color-tertiary); }
.text-tertiary { color: var(--color-tertiary); }
.border-tertiary { border-color: var(--color-tertiary); }

.bg-neutral { background-color: var(--color-neutral); }
.text-neutral { color: var(--color-neutral); }
.border-neutral { border-color: var(--color-neutral); }