/**
 * ============================================
 * SISTEMA DE COLORES - MSI STUDIO
 * ============================================
 *
 * Paleta de colores completa del design system.
 * Incluye:
 * - Neutrales (escala monocromática)
 * - Cream (fondos cálidos)
 * - Colores de marca (azul, naranja, amarillo, turquesa, verde)
 * - Colores de estado (success, error, warning)
 * - Tokens semánticos (background, text, border)
 * - Soporte para tema oscuro (dark mode)
 */

:root {
    /* ============================================
     NEUTRALS - Escala monocromática (Evolved Monochrome)
     ============================================
     Escala de grises desde negro profundo hasta blanco suave.
     900: Más oscuro → 100: Más claro
     ============================================ */

    /* Negros y grises oscuros (900-600)
       Uso: Textos principales, headers, elementos de énfasis */
    --neutral-900: hsl(222deg 47% 11% / 1);  /* Negro Web (Rich Black) */
    --neutral-800: hsl(220deg 26% 14% / 1);  /* Gris muy oscuro */
    --neutral-700: hsl(218deg 23% 23% / 1);  /* Gris oscuro */
    --neutral-600: hsl(215deg 14% 34% / 1);  /* Gris medio-oscuro */

    /* Grises medios (500-400)
       Uso: Textos secundarios, bordes, elementos deshabilitados */
    --neutral-500: hsl(220deg 9% 46% / 1);   /* Acento Gris (Charcoal) */
    --neutral-400: hsl(42deg 28% 76% / 1);   /* Gris cálido claro */

    /* Grises claros y blancos (300-100)
       Uso: Fondos, áreas de contenido, superficies */
    --neutral-300: hsl(40deg 24% 85% / 1);   /* Gris muy claro */
    --neutral-200: hsl(42deg 32% 90% / 1);   /* Casi blanco cálido */
    --neutral-100: hsl(42deg 56% 93% / 1);   /* Blanco Web (Soft White) */

    /* ============================================
     CREAM - Tonos cálidos para fondos (Digital Cream)
     ============================================
     Paleta de tonos crema para crear atmósferas cálidas.
     Uso: Fondos de plataforma, secciones destacadas, alternativas
     ============================================ */
    --cream-500: hsl(42deg 56% 98%);  /* Cream ultra claro */
    --cream-400: hsl(42deg 56% 93%);  /* Cream muy claro */
    --cream-300: hsl(42deg 56% 90%);  /* Cream claro */
    --cream-200: hsl(42deg 56% 95%);  /* Cream casi blanco */
    --cream-100: hsl(42deg 83% 95%);  /* Cream blanco (#F7F1E3) */

    /* ============================================
     BRAND COLORS - Colores de marca MSI Studio
     ============================================
     Paletas completas en escala 900-100 para cada color corporativo.
     Incluye: Azul (principal), Naranja, Amarillo, Turquesa, Verde
     ============================================ */

    /* AZUL (Midnight Blue) - Color principal de proyectos
       Uso: Gaia, Tuinpulse, LCABIM, elementos primarios */

    --blue-900: hsl(222deg 47% 11%);  /* #0F172A - Azul muy oscuro */
    --blue-800: hsl(222deg 47% 15%);  /* Azul oscuro */
    --blue-700: hsl(222deg 47% 20%);  /* Azul medio-oscuro */
    --blue-600: hsl(222deg 47% 25%);  /* Azul medio */
    --blue-500: hsl(222deg 47% 30%);  /* Azul estándar */
    --blue-400: hsl(222deg 47% 40%);  /* Azul claro */
    --blue-300: hsl(222deg 47% 50%);  /* Azul muy claro */
    --blue-200: hsl(222deg 47% 70%);  /* Azul suave */
    --blue-100: hsl(222deg 47% 90%);  /* Azul tenue */

    /* NARANJA (Brand Orange)
       Uso: Acentos cálidos, CTAs secundarios */
    --orange-900: hsl(45deg 97% 11%);   /* Naranja muy oscuro */
    --orange-800: hsl(45deg 97% 20%);   /* Naranja oscuro */
    --orange-700: hsl(45deg 97% 30%);   /* Naranja medio-oscuro */
    --orange-600: hsl(45deg 97% 40%);   /* Naranja medio */
    --orange-500: hsl(45deg 93% 47%);   /* #fcbf28 - Naranja estándar */
    --orange-400: hsl(45deg 93% 60%);   /* Naranja claro */
    --orange-300: hsl(45deg 93% 70%);   /* Naranja muy claro */
    --orange-200: hsl(45deg 93% 85%);   /* Naranja suave */
    --orange-100: hsl(45deg 93% 95%);   /* Naranja tenue */

    /* AMARILLO (Brand Yellow)
       Uso: Alertas, elementos de atención, highlights */
    --yellow-900: hsl(55deg 100% 11%);  /* Amarillo muy oscuro */
    --yellow-800: hsl(55deg 100% 20%);  /* Amarillo oscuro */
    --yellow-700: hsl(55deg 100% 30%);  /* Amarillo medio-oscuro */
    --yellow-600: hsl(55deg 100% 40%);  /* Amarillo medio */
    --yellow-500: hsl(55deg 100% 61%);  /* #ffef3A - Amarillo estándar */
    --yellow-400: hsl(55deg 100% 70%);  /* Amarillo claro */
    --yellow-300: hsl(55deg 100% 80%);  /* Amarillo muy claro */
    --yellow-200: hsl(55deg 100% 90%);  /* Amarillo suave */
    --yellow-100: hsl(55deg 100% 95%);  /* Amarillo tenue */

    /* TURQUESA (Brand Turquoise)
       Uso: Acentos frescos, elementos informativos */
    --turquoise-900: hsl(194deg 97% 11%);  /* Turquesa muy oscuro */
    --turquoise-800: hsl(194deg 97% 20%);  /* Turquesa oscuro */
    --turquoise-700: hsl(194deg 97% 30%);  /* Turquesa medio-oscuro */
    --turquoise-600: hsl(194deg 97% 40%);  /* Turquesa medio */
    --turquoise-500: hsl(194deg 97% 49%);  /* #0bbbef - Turquesa estándar */
    --turquoise-400: hsl(194deg 97% 60%);  /* Turquesa claro */
    --turquoise-300: hsl(194deg 97% 70%);  /* Turquesa muy claro */
    --turquoise-200: hsl(194deg 97% 85%);  /* Turquesa suave */
    --turquoise-100: hsl(194deg 97% 95%);  /* Turquesa tenue */

    /* VERDE (Brand Green)
       Uso: Estados positivos, confirmaciones, éxito */
    --green-900: hsl(65deg 63% 11%);  /* Verde muy oscuro */
    --green-800: hsl(65deg 63% 20%);  /* Verde oscuro */
    --green-700: hsl(65deg 63% 30%);  /* Verde medio-oscuro */
    --green-600: hsl(65deg 63% 40%);  /* Verde medio */
    --green-500: hsl(65deg 63% 60%);  /* #ced95a - Verde estándar */
    --green-400: hsl(65deg 63% 70%);  /* Verde claro */
    --green-300: hsl(65deg 63% 80%);  /* Verde muy claro */
    --green-200: hsl(65deg 63% 90%);  /* Verde suave */
    --green-100: hsl(65deg 63% 95%);  /* Verde tenue */

    /* ============================================
     STATUS COLORS - Colores de estado del sistema
     ============================================
     Colores semánticos para feedback del usuario
     Cada color tiene variantes light y dark
     ============================================ */

    /* Success (Verde de éxito)
       Uso: Confirmaciones, operaciones exitosas, estados positivos */
    --success-green: hsl(142deg 76% 36%);        /* #16A34A - Verde éxito estándar */
    --success-green-light: hsl(142deg 76% 90%);  /* Verde éxito claro (backgrounds) */
    --success-green-dark: hsl(142deg 76% 15%);   /* Verde éxito oscuro (dark mode) */

    /* Error (Rojo de error)
       Uso: Mensajes de error, validaciones fallidas, acciones destructivas */
    --error-red: hsl(0deg 72% 51%);              /* #DC2626 - Rojo error estándar */
    --error-red-light: hsl(0deg 72% 90%);        /* Rojo error claro (backgrounds) */
    --error-red-dark: hsl(0deg 72% 15%);         /* Rojo error oscuro (dark mode) */

    /* Warning (Amarillo de advertencia)
       Uso: Alertas, precauciones, acciones pendientes */
    --alert-yellow: hsl(47deg 97% 57%);          /* #EAB308 - Amarillo alerta estándar */
    --alert-yellow-light: hsl(47deg 97% 90%);    /* Amarillo alerta claro (backgrounds) */
    --alert-yellow-dark: hsl(47deg 97% 15%);     /* Amarillo alerta oscuro (dark mode) */









    /* ==============================================================================
                                        SEMANTIC COLORS
     ================================================================================ */           

    /* ========================== BACKGROUNDS (Light Mode) ==========================
                        Tokens semánticos para backgrounds y fills.
                        Usar estos en lugar de colores directos.
     ================================================================================ */

    /* Surface - Fondos de superficies principales */
    --bg-primary: var(--neutral-100);                   /* Fondo principal de la app */
    --bg-secondary: var(--cream-100);                   /* Fondo secundario/alternativo */
    --bg-tertiary: var(--neutral-300);                  /* Fondo terciario/sutil */
    --bg-disabled: var(--neutral-400);                  /* Fondo elementos deshabilitados */
    --bg-invert: var(--neutral-900);                    /* Fondo invertido (oscuro) */

    /* Fill - Fondos de elementos interactivos */
    --bg-fill-primary: var(--blue-500);                /* Botón/elemento primario */
    --bg-fill-primary-hover: var(--blue-300);          /* Hover primario */
    --bg-fill-secondary: var(--blue-300);              /* Botón/elemento secundario */
    --bg-fill-secondary-hover: var(--blue-200);        /* Hover secundario */
    --bg-fill-accent: var(--yellow-400);               /* Elemento de acento */
    --bg-fill-accent-hover: var(--yellow-500);         /* Hover acento */
    --bg-fill-accent-secondary: var(--cream-100);      /* Acento secundario */
    --bg-fill-accent-secondary-hover: var(--blue-500); /* Hover acento secundario */

    /* Utility backgrounds */
    --bg-quaternary: var(--neutral-400);               /* Fondo cuaternario */
    --bg-dark: var(--neutral-900);                     /* Fondo oscuro general */

    /* Status backgrounds */
    --bg-success: var(--success-green);                /* Fondo de éxito */
    --bg-warning: var(--alert-yellow);                 /* Fondo de advertencia */
    --bg-error: var(--error-red);                      /* Fondo de error */
    --bg-info: var(--blue-500);                        /* Fondo informativo */

    /* Badge backgrounds */
    --bg-badge-cream: var(--cream-500);                /* Badge cream */
    --bg-badge-orange: var(--orange-500);              /* Badge naranja */
    --bg-badge-yellow: var(--alert-yellow);            /* Badge amarillo */
    --bg-badge-turquoise: var(--turquoise-500);        /* Badge turquesa */
    --bg-badge-green: var(--green-500);                /* Badge verde */
    
    /* Icon background */
    --bg-icon: var(--neutral-900);                     /* Fondo de iconos */
   --bg-buttons-text: var(--neutral-100);              /* Fondo de botones de texto */
   --bg-card: var(--neutral-200);                      /* Fondo de tarjetas */
   --bg-card-footer: var(--neutral-300);                      /* Fondo de tarjetas */


    /* ============================== TEXT (Light Mode) =============================
                        Tokens semánticos para colores de texto.
                        Usar estos en lugar de colores directos.
     ================================================================================ */

    --text-primary: var(--neutral-900);         /* Texto principal, títulos */
    --text-primary-invert: var(--neutral-100);  /* Texto sobre fondos oscuros */
    --text-secondary: var(--neutral-500);       /* Texto secundario, descripciones */
    --text-tertiary: var(--neutral-600);        /* Texto terciario, metadata */
    --text-accent: var(--blue-500);             /* Texto con acento, enlaces */
    --text-accent-hover: var(--blue-400);       /* Hover en enlaces/acentos */
    --text-success: var(--green-500);           /* Texto de éxito */

    /* =========================== BORDERS (Light Mode) =============================
                        Tokens semánticos para bordes de elementos.
                        Usar estos en lugar de colores directos.
     ================================================================================ */

    --border-primary: var(--neutral-200);       /* Borde principal, divisores */
    --border-secondary: var(--neutral-300);     /* Borde secundario, más visible */
    --border-success: var(--green-500);         /* Borde de éxito */
    --border-error: var(--error-red);           /* Borde de error */
    --border-warning: var(--alert-yellow);      /* Borde de advertencia */
    --border-info: var(--blue-500);             /* Borde informativo */
    --border-disabled: var(--neutral-400);      /* Borde deshabilitado */
    --border-hover: var(--neutral-200);         /* Borde en hover */


    /* ========================= FullCalendar (Light Mode) ===========================

     ================================================================================ */

    --fc-neutral-bg-color: var(--neutral-200);

  /* Overlay & backdrop */
  --overlay-loading: rgb(255 255 255 / 0.7);
  --backdrop-overlay: rgb(0 0 0 / 0.5);

  /* Avatar */
  --avatar-border-accent: rgb(59 130 246 / 0.2);

  /* Validation shadows */
  --shadow-color-success: rgb(16 185 129 / 0.2);
  --shadow-color-error: rgb(239 68 68 / 0.2);
  --shadow-color-warning: rgb(245 158 11 / 0.2);
}

[data-bs-theme="dark"] {
    
   /* ========================== BACKGROUNDS (Dark Mode) ========================== */

   --bg-primary: var(--neutral-900);                 /* Fondo principal (oscuro) */
   --bg-secondary: var(--neutral-200);               /* Fondo secundario */
   --bg-tertiary: var(--neutral-700);                /* Fondo terciario */
   --bg-quaternary: var(--neutral-400);              /* Fondo cuaternario */
   --bg-disabled: var(--neutral-600);                /* Fondo deshabilitado */
   --bg-invert: var(--neutral-100);                    /* Fondo invertido (oscuro) */

   /* Fill - Fondos de elementos interactivos */
   --bg-fill-primary: var(--blue-600);                /* Botón/elemento primario */
   --bg-fill-primary-hover: var(--blue-400);          /* Hover primario */
   --bg-fill-secondary: var(--blue-200);              /* Botón/elemento secundario */
   --bg-fill-secondary-hover: var(--blue-300);        /* Hover secundario */

   /* TEXT COLORS - Dark Mode */
   --text-primary: var(--neutral-100);         /* Texto principal (claro) */
   --text-primary-invert: var(--neutral-900);  /* Texto sobre fondos claros */
   --text-secondary: var(--neutral-400);       /* Texto secundario */
   --text-tertiary: var(--neutral-300);        /* Texto terciario */
   --text-accent: var(--blue-300);             /* Texto con acento */
   --text-accent-hover: var(--blue-200);       /* Hover en acentos */
   --text-success: var(--green-400);           /* Texto de éxito */

   /* BORDER COLORS - Dark Mode */
   --border-primary: var(--neutral-700);       /* Borde principal */
   --border-secondary: var(--neutral-600);     /* Borde secundario */
   --border-success: var(--green-400);         /* Borde de éxito */
   --border-error: var(--error-red);           /* Borde de error */
   --border-warning: var(--alert-yellow);      /* Borde de advertencia */
   --border-info: var(--blue-400);             /* Borde informativo */
   --border-disabled: var(--neutral-600);      /* Borde deshabilitado */
   --border-hover: var(--neutral-500);         /* Borde en hover */
   --bg-card: var(--blue-800);                 /* Fondo de tarjetas */
   --bg-card-footer: var(--blue-800);                      /* Fondo de tarjetas */

   /* ========================= FullCalendar (Dark Mode) ===========================

     ================================================================================ */

    --fc-neutral-bg-color: var(--neutral-800);
  --overlay-loading: rgb(15 23 42 / 0.7);
  --backdrop-overlay: rgb(0 0 0 / 0.7);

  /* Validation shadows (Dark Mode) */
  --shadow-color-success: rgb(22 163 74 / 0.3);
  --shadow-color-error: rgb(220 38 38 / 0.3);
  --shadow-color-warning: rgb(202 138 4 / 0.3);
}