/* =========================================================================
   Aurha — Identidad de marca de plataforma (fuente única de verdad)
   Cambiar un color aquí lo propaga a toda la aplicación.

   Los nombres de los tokens (`--brand-cyan`, `--brand-violet`) vienen de
   MolgonRH y se conservan A PROPÓSITO: los referencian ~440 `var()` en 97
   plantillas y renombrarlos no cambiaría ni un pixel, solo el riesgo. Lo que
   importa es el VALOR, y el valor ya es el de Aurha. Léelos como «acento 1»
   y «acento 2».

   Estos son también los colores que `tenants/branding.py` usa como fallback
   de plataforma: los dos sitios tienen que decir lo mismo o el login y el
   resto de la app se ven distintos, que es exactamente lo que pasaba antes.
   ========================================================================= */

:root {
  /* ── Colores de marca (acentos de Aurha) ──
     Teal y naranja del logo de Previxion, que es quien opera la plataforma. */
  --brand-cyan:         #007A83;   /* Aurha Teal    (acento 1) */
  --brand-violet:       #FF6200;   /* Aurha Naranja (acento 2) */
  --brand-cyan-dark:    #00646b;
  --brand-violet-dark:  #d15000;
  --brand-gradient:      linear-gradient(135deg, #007A83 0%, #FF6200 100%);
  --brand-gradient-soft: linear-gradient(135deg, #e6f2f3 0%, #fff0e6 100%);

  /* RGB de los acentos (para rgba() con transparencia) */
  --brand-cyan-rgb:   0, 122, 131;
  --brand-violet-rgb: 255, 98, 0;

  /* ── 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) ──
     Eran azuladas para acompañar al cyan de MolgonRH; con el teal de Aurha
     ese azul se leía como un tercer color. Ahora tiran a teal muy lavado. */
  --bg:             #f5f9f9;
  --surface:        #ffffff;
  --border:         #dbe9ea;
  --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:  #e6f2f3;

  /* ── 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:   var(--brand-cyan-dark);
  --turquesa-deeper: var(--brand-violet);
  --turquesa-light:  var(--accent-light);
  --morado:          var(--brand-violet);
  --morado-dark:     var(--brand-violet-dark);
  --morado-light:    #fff0e6;
  --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);
}