/* =========================================================================
   MolGon Systems — Identidad de marca centralizada (fuente única de verdad)
   Producto: MolgonRH
   Cambiar un color aquí lo propaga a toda la aplicación.
   Basado en el Manual de Identidad Corporativa MolGon Systems v1.0.
   ========================================================================= */

:root {
  /* ── Colores de marca (El Degradado MolGon) ── */
  --brand-cyan:         #2CACFF;   /* MolGon Cyan   */
  --brand-violet:       #A62BFF;   /* MolGon Violet */
  --brand-cyan-dark:    #1f8fe0;
  --brand-violet-dark:  #8a1fe0;
  --brand-gradient:      linear-gradient(135deg, #2CACFF 0%, #A62BFF 100%);
  --brand-gradient-soft: linear-gradient(135deg, #e6f5ff 0%, #f3e9ff 100%);

  /* RGB de los acentos (para rgba() con transparencia) */
  --brand-cyan-rgb:   44, 172, 255;
  --brand-violet-rgb: 166, 43, 255;

  /* ── Neutros de marca ── */
  --brand-ink:   #0D0D0D;   /* Deep Black  */
  --brand-white: #FFFFFF;   /* Tech White  */
  --brand-slate: #4A4A4A;   /* Slate Grey  */

  /* ── Tipografía ── */
  --font-body:    'Roboto', 'Open Sans', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Poppins', var(--font-body);

  /* ── Superficies (tema claro) ── */
  --bg:             #f4f8ff;
  --surface:        #ffffff;
  --border:         #dbeafe;
  --border-soft:    #e5e7eb;
  --text:           #111827;
  --text-secondary: #374151;
  --text-muted:     #6b7280;

  /* ── Acentos semánticos ── */
  --accent:        var(--brand-cyan);
  --accent-2:      var(--brand-violet);
  --accent-light:  #e6f5ff;

  /* ── Colores funcionales (NO son de marca; no cambian con el rebranding) ── */
  --success:       #16a34a;  --success-light: rgba(34,197,94,.10);
  --warning:       #b45309;  --warning-light: #fff7ed;
  --danger:        #E10E1B;  --danger-light:  #fde8ea;  --danger-rgb: 225, 14, 27;
  --info:          #1565A0;  --info-light:    #e8f0f8;

  /* ── Radios y sombras ── */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow:    0 4px 20px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.10);

  /* ─────────────────────────────────────────────────────────────────────
     Aliases de compatibilidad: los nombres de la paleta anterior apuntan
     ahora a los tokens MolGon. Permite que los templates existentes funcionen
     sin reescribir cada var(). Se irán eliminando a medida que se limpien.
     ───────────────────────────────────────────────────────────────────── */
  --rojo:            var(--brand-cyan);
  --rojo-dark:       var(--brand-violet);
  --rojo-light:      var(--accent-light);
  --turquesa:        var(--brand-cyan);
  --turquesa-dark:   #5a72e6;
  --turquesa-deeper: var(--brand-violet);
  --turquesa-light:  var(--accent-light);
  --morado:          var(--brand-violet);
  --morado-dark:     var(--brand-violet-dark);
  --morado-light:    #f3e9ff;
  --azul:            var(--info);
  --azul-dark:       #0d4d7a;
  --azul-light:      var(--info-light);
  --naranja:         #EF6C00;
  --naranja-light:   #fff3e0;
  --amarillo:        #F5B000;
  --amarillo-dark:   #d4a000;
  --amarillo-light:  #fffde7;

  /* Otros alias usados por algunos módulos */
  --accent2:       var(--brand-violet);
  --text-primary:  var(--text);
  --radius-md:     12px;
}

/* Tipografía de marca aplicada a títulos (los componentes heredan el cuerpo). */
h1, h2, h3, h4,
.card-title,
.brand-header__title,
.main__header-titles h1 {
  font-family: var(--font-heading);
}