/*
 * =============================================================================
 * ARTEMIS II — ARCHIVO MAESTRO DE COLORES
 * =============================================================================
 * Paleta basada en la imagen corporativa "Artemis HC sunset".
 * Este archivo se carga PRIMERO en el layout, antes que cualquier otro CSS.
 *
 * Paleta fuente (imagen):
 *   #1A0825  — Siluetas / primer plano (casi negro púrpura)
 *   #38082C  — Tierra / suelo oscuro
 *   #26155A  — Cielo alto (azul-púrpura profundo)
 *   #4A2882  — Cielo cloud streaks (violeta oscuro)
 *   #7840B0  — Cielo medio (púrpura dominante)  ← PRIMARY
 *   #9B60C8  — Cielo suave (lavanda)
 *   #B578B8  — Lavanda-rosa
 *   #CC7AA8  — Cielo rosado (rosa-lila)
 *   #D98878  — Horizonte cálido (salmón)
 *   #F5A840  — Resplandor del sol (ámbar dorado)  ← WARNING
 *   #FFE870  — Sol (amarillo pálido)
 *   #5A1840  — Colinas en silueta (marrón-púrpura)
 *
 * Gradiente Artemis (de izquierda a derecha):
 *   linear-gradient(135deg, #26155A 0%, #7840B0 35%, #CC7AA8 70%, #F5A840 100%)
 *
 * Para usar un color:  color: var(--color-primary);
 * Documentación:       allcolors.md (este mismo directorio)
 * =============================================================================
 */

:root {

  /* ===========================================================================
     1. COLORES DE TEMA PRINCIPAL  (basados en la paleta Artemis)
     =========================================================================== */

  --color-primary:           #7840B0;  /* Púrpura dominante — cielo medio */
  --color-primary-alt:       #9B60C8;  /* Lavanda — variante más suave */
  --color-primary-lighten:   #E5D5F5;  /* Tinte lavanda muy claro */
  --color-primary-darken:    #4A2882;  /* Violeta oscuro — cloud streaks */
  --color-primary-gradient:  #26155A;  /* Azul-púrpura profundo — cielo alto */
  --color-primary-rgba-50:   rgba(120, 64, 176, 0.5);
  --color-primary-rgba-70:   rgba(120, 64, 176, 0.7);

  --color-secondary:         #B578B8;  /* Lavanda-rosa — transición del cielo */
  --color-secondary-darken:  #8C4E8C;  /* Lavanda oscura */

  --color-success:           #28C76F;  /* Verde — se conserva para legibilidad médica */
  --color-success-darken-1:  #1F9D57;
  --color-success-darken-2:  #1B874B;
  --color-success-darken-3:  #177240;
  --color-success-rgba-25:   rgba(40, 199, 111, 0.25);
  --color-success-rgba-50:   rgba(40, 199, 111, 0.5);

  --color-danger:            #CC4878;  /* Rosa fuerte — derivado del horizonte */
  --color-danger-darken-1:   #B83868;
  --color-danger-darken-2:   #A02858;
  --color-danger-darken-3:   #881848;
  --color-danger-rgba-25:    rgba(204, 72, 120, 0.25);
  --color-danger-rgba-50:    rgba(204, 72, 120, 0.5);

  --color-warning:           #F5A840;  /* Ámbar dorado — resplandor del sol */
  --color-warning-darken-1:  #E89030;
  --color-warning-darken-2:  #D87820;
  --color-warning-darken-3:  #C06010;
  --color-warning-rgba-50:   rgba(245, 168, 64, 0.5);

  --color-info:              #9B60C8;  /* Lavanda — cielo suave */
  --color-info-darken-1:     #7848A8;
  --color-info-darken-2:     #603088;
  --color-info-darken-3:     #481868;
  --color-info-rgba-50:      rgba(155, 96, 200, 0.5);

  --color-light:             #E5D5F5;  /* Lavanda muy claro */
  --color-dark:              #1A0825;  /* Siluetas — casi negro púrpura */
  --color-dark-rgba-50:      rgba(26, 8, 37, 0.5);


  /* ===========================================================================
     2. GRADIENTES ARTEMIS
     =========================================================================== */

  --gradient-artemis-full:   linear-gradient(135deg, #26155A 0%, #7840B0 35%, #CC7AA8 70%, #F5A840 100%);
  --gradient-artemis-purple: linear-gradient(135deg, #26155A 0%, #7840B0 100%);
  --gradient-artemis-sunset: linear-gradient(135deg, #CC7AA8 0%, #F5A840 100%);
  --gradient-artemis-dark:   linear-gradient(135deg, #1A0825 0%, #4A2882 100%);
  --gradient-artemis-rose:   linear-gradient(135deg, #7840B0 0%, #CC7AA8 100%);


  /* ===========================================================================
     3. BLANCOS, NEGROS Y TRANSPARENTES
     =========================================================================== */

  --color-white:             #FFFFFF;
  --color-white-off:         #FDF8FF;  /* Blanco con tinte lavanda muy sutil */
  --color-white-rgba-0:      rgba(255, 255, 255, 0);
  --color-white-rgba-10:     rgba(255, 255, 255, 0.1);
  --color-white-rgba-15:     rgba(255, 255, 255, 0.15);
  --color-white-rgba-25:     rgba(255, 255, 255, 0.25);
  --color-white-rgba-50:     rgba(255, 255, 255, 0.5);

  --color-black:             #000000;
  --color-black-rgba-0:      rgba(0, 0, 0, 0);
  --color-black-rgba-4:      rgba(0, 0, 0, 0.04);
  --color-black-rgba-5:      rgba(0, 0, 0, 0.05);
  --color-black-rgba-8:      rgba(0, 0, 0, 0.08);
  --color-black-rgba-10:     rgba(0, 0, 0, 0.1);
  --color-black-rgba-15:     rgba(0, 0, 0, 0.15);
  --color-black-rgba-20:     rgba(0, 0, 0, 0.2);
  --color-black-rgba-25:     rgba(0, 0, 0, 0.25);
  --color-black-rgba-50:     rgba(0, 0, 0, 0.5);
  --color-black-rgba-70:     rgba(0, 0, 0, 0.7);


  /* ===========================================================================
     4. ESCALA DE PÚRPURAS (reemplaza la escala de grises neutros)
        Basada en los tonos del cielo Artemis
     =========================================================================== */

  --color-purple-50:         #FBF5FF;  /* Casi blanco con tinte */
  --color-purple-100:        #F0E5FA;
  --color-purple-150:        #E5D5F5;  /* = --color-light */
  --color-purple-200:        #D5B8F0;
  --color-purple-250:        #C5A0E8;
  --color-purple-300:        #B578B8;  /* = --color-secondary */
  --color-purple-350:        #A868C8;
  --color-purple-400:        #9B60C8;  /* = --color-info */
  --color-purple-450:        #8C50B8;
  --color-purple-500:        #7840B0;  /* = --color-primary */
  --color-purple-550:        #6030A0;
  --color-purple-600:        #4A2882;
  --color-purple-650:        #381870;
  --color-purple-700:        #26155A;  /* = --color-primary-gradient */
  --color-purple-750:        #1E1050;
  --color-purple-800:        #160A40;
  --color-purple-850:        #100830;
  --color-purple-900:        #1A0825;  /* = --color-dark */


  /* ===========================================================================
     5. ESCALA DE ROSAS / SALMÓN (del horizonte Artemis)
     =========================================================================== */

  --color-rose-100:          #FFF0F5;
  --color-rose-200:          #F5D0E5;
  --color-rose-300:          #EDB0CC;
  --color-rose-400:          #E090B4;
  --color-rose-500:          #CC7AA8;  /* Cielo rosado */
  --color-rose-600:          #CC4878;  /* = --color-danger */
  --color-rose-700:          #B83868;
  --color-rose-800:          #A02858;
  --color-rose-900:          #881848;
  --color-rose-950:          #5A1840;  /* Colinas en silueta */


  /* ===========================================================================
     6. ESCALA ÁMBAR / DORADO (del sol Artemis)
     =========================================================================== */

  --color-amber-100:         #FFFDE0;  /* Sol — centro */
  --color-amber-200:         #FFE870;  /* Sol — corona */
  --color-amber-300:         #FFD050;
  --color-amber-400:         #F5B840;
  --color-amber-500:         #F5A840;  /* = --color-warning */
  --color-amber-600:         #E89030;
  --color-amber-700:         #D87820;
  --color-amber-800:         #C06010;
  --color-amber-900:         #A04800;


  /* ===========================================================================
     7. COLORES DE INTERFAZ Y LAYOUT
     =========================================================================== */

  --color-bg-body:           #F8F3FC;  /* Fondo general — lavanda muy suave */
  --color-bg-card:           #FFFFFF;  /* Fondo de tarjetas */
  --color-bg-input:          #FFFFFF;  /* Fondo de inputs */
  --color-bg-hover:          #F0E5FA;  /* Hover — lavanda claro */
  --color-bg-alt:            #FBF5FF;  /* Fondo alternativo */

  --color-text-main:         #3A2050;  /* Texto principal — púrpura oscuro legible */
  --color-text-header:       #26155A;  /* Títulos — cielo alto */
  --color-text-muted:        #8870A8;  /* Texto secundario — lavanda medio */
  --color-text-dark:         #1A0825;  /* Texto oscuro — siluetas */
  --color-text-light:        #B578B8;  /* Texto claro — lavanda rosa */

  --color-border-light:      #EAD8F8;  /* Borde suave */
  --color-border:            #D5B8F0;  /* Borde estándar */
  --color-border-dark:       #B578B8;  /* Borde fuerte */
  --color-border-input:      #D5B8F0;  /* Borde de inputs */


  /* ===========================================================================
     8. COLORES DE NAVEGACIÓN Y SIDEBAR
     =========================================================================== */

  --color-menu-dark-bg:      #26155A;  /* Sidebar oscuro — cielo alto */
  --color-menu-light-bg:     #4A2882;  /* Sidebar claro — violeta oscuro */
  --color-menu-deep-dark:    #1A0825;  /* Sidebar más oscuro — siluetas */
  --color-nav-dark:          #38082C;  /* Barra nav — tierra oscura */
  --color-nav-deeper:        #1E1050;  /* Nav más oscuro */
  --color-footer-bg:         #B578B8;  /* Footer — lavanda-rosa */


  /* ===========================================================================
     9. COLORES DE COMPONENTES UI
     =========================================================================== */

  --color-avatar-bg:         #D5B8F0;  /* Avatar sin imagen — lavanda */
  --color-switch-bg:         #E5D5F5;  /* Toggle — lavanda claro */
  --color-badge-bg:          #D5B8F0;  /* Badge neutro */
  --color-chip-border:       #B578B8;  /* Borde de chips */
  --color-overlay:           rgba(26, 8, 37, 0);  /* Overlay base */
  --color-shadow:            rgba(120, 64, 176, 0.2);  /* Sombra de tarjetas */


  /* ===========================================================================
     10. ESCALA DE GRISES NEUTROS (para texto y bordes que requieren neutralidad)
     =========================================================================== */

  --color-gray-50:           #F8F8F8;
  --color-gray-100:          #F0F0F0;
  --color-gray-200:          #E0E0E0;
  --color-gray-300:          #CCCCCC;
  --color-gray-400:          #BABFC7;
  --color-gray-500:          #9AA9B7;
  --color-gray-600:          #6C757D;
  --color-gray-700:          #495057;
  --color-gray-800:          #343A40;
  --color-gray-900:          #212529;


  /* ===========================================================================
     11. COMPATIBILIDAD Bootstrap / colores semánticos estándar
     =========================================================================== */

  --color-blue:              #007BFF;
  --color-blue-sky:          #38BDF8;
  --color-indigo:            #6610F2;
  --color-pink:              #E83E8C;
  --color-red:               #EA5455;
  --color-orange:            #FB923C;
  --color-yellow:            #FFC107;
  --color-green:             #28C76F;
  --color-teal:              #20C997;
  --color-cyan:              #17A2B8;

  --color-alert-success-bg:      #DFF0D8;
  --color-alert-success-text:    #3C763D;
  --color-alert-warning-bg:      #FCF8E3;
  --color-alert-warning-text:    #8A6D3B;
  --color-alert-danger-bg:       #F2DEDE;
  --color-alert-danger-text:     #A94442;
  --color-alert-info-bg:         #EDE0FA;  /* Actualizado a lavanda */
  --color-alert-info-text:       #4A2882;  /* Actualizado a púrpura */


  /* ===========================================================================
     12. ALIASES — Compatibilidad con theme-variables.css y project-colors.css
         No eliminar. Permiten que el código existente siga funcionando.
     =========================================================================== */

  --primary:                 var(--color-primary);
  --primary-lighten:         var(--color-primary-lighten);
  --primary-darken:          var(--color-primary-darken);
  --gradient-special:        var(--color-primary-gradient);
  --secondary:               var(--color-secondary);
  --success:                 var(--color-success);
  --success-darken:          var(--color-success-darken-3);
  --info:                    var(--color-info);
  --info-darken:             var(--color-info-darken-3);
  --warning:                 var(--color-warning);
  --warning-darken:          var(--color-warning-darken-3);
  --danger:                  var(--color-danger);
  --danger-darken:           var(--color-danger-darken-3);
  --light:                   var(--color-light);
  --dark:                    var(--color-dark);
  --white:                   var(--color-white);
  --black:                   var(--color-black);
  --blue:                    var(--color-blue);
  --indigo:                  var(--color-indigo);
  --purple:                  var(--color-primary-alt);
  --pink:                    var(--color-pink);
  --red:                     var(--color-danger);
  --orange:                  var(--color-warning);
  --yellow:                  var(--color-yellow);
  --green:                   var(--color-success);
  --teal:                    var(--color-teal);
  --cyan:                    var(--color-info);
  --gray:                    var(--color-secondary);
  --gray-dark:               var(--color-dark);
  --bg-body:                 var(--color-bg-body);
  --text-main:               var(--color-text-main);
  --text-header:             var(--color-text-header);
  --border-light:            var(--color-border-light);
  --border-component:        var(--color-border);
  --menu-light-bg:           var(--color-menu-light-bg);
  --menu-dark-bg:            var(--color-menu-dark-bg);
  --footer-bg:               var(--color-footer-bg);
  --avatar-bg:               var(--color-avatar-bg);
  --switch-bg:               var(--color-switch-bg);
}