/* Color. Valores extraídos por frecuencia de uso de los dos onboardings
   (Completo y Básico). El onboarding es CLARO: fondo #F7F7F8, tarjeta blanca.
   El único lienzo oscuro es el login. */
:root {
  /* ===== Marca ===== */
  --cl-purple:   #941B80;  /* acción primaria: botones, pastilla activa, íconos de sección */
  --cl-magenta:  #E62C68;  /* hover del primario + todo el foco */
  --cl-orange:   #F2910D;  /* solo dentro del degradado */
  --cl-gradient: linear-gradient(90deg, #F2910D 0%, #E62C68 55%, #941B80 100%); /* @kind color */
  --cl-purple-soft-bg: #FDF4F8;
  --cl-purple-soft-bd: #F0D3E6;
  --cl-purple-band:    rgba(148,27,128,0.14);  /* banda del deslizador de horario */
  --cl-pink-ink:  #F7B2D0;  /* dato resaltado sobre panel oscuro (login) */

  /* ===== Tinta ===== */
  --ink:      #1F1F1F;  /* títulos y valores */
  --ink-2:    #484848;  /* párrafo largo */
  --ink-3:    #727888;  /* texto de ayuda, secundario — el neutro más usado */
  --ink-4:    #9D9D9D;  /* placeholder, numeración apagada, estado bloqueado */

  /* ===== Líneas y superficies ===== */
  --line:        #E5E5E5;  /* borde de tarjeta, campo, pastilla inactiva */
  --line-soft:   #F0F0F0;  /* separador interno de tarjeta */
  --line-track:  #EDEDF0;  /* riel del medidor de progreso */
  --line-strong: #D9D9D9;  /* borde en hover */
  --surface:        #FFFFFF;
  --surface-app:    #F7F7F8;  /* fondo de la aplicación */
  --surface-sunken: #F6F6F6;  /* riel del deslizador de horario */
  --surface-chip:   #F0F0F0;  /* etiqueta "Opcional", avatar vacío */

  /* ===== Noche (solo login) ===== */
  --night:        #1F1F1F;
  --night-deep:   #201A3E;
  --night-panel:  rgba(0,0,0,0.86);
  --night-scrim:  linear-gradient(180deg, rgba(31,31,31,0.38) 0%, rgba(31,31,31,0.26) 42%, rgba(31,31,31,0.74) 100%); /* @kind color */

  /* ===== Semánticos — cada uno con su trío texto / fondo / borde ===== */
  --ok:        #35A260;
  --ok-bg:     #ECF7F0;
  --ok-bd:     #CDE8D8;
  --ok-ink:    #1F6B3E;

  --err:       #E74E1B;
  --err-bg:    #FDF0EC;
  --err-bd:    #F5C9BA;
  --err-ink:   #B23A14;

  --warn:      #B8710A;
  --warn-bg:   #FEF6EC;
  --warn-bd:   #F5DFBE;
  --warn-ink:  #7A4E06;

  --info:      #5C9DB0;
  --info-bg:   #F0F6F8;
  --info-bd:   #9FD3E3;

  /* ===== Alias semánticos ===== */
  --text-title:       var(--ink);
  --text-body:        var(--ink-2);
  --text-muted:       var(--ink-3);
  --text-placeholder: var(--ink-4);
  --text-on-brand:    #FFFFFF;
  --surface-card:     var(--surface);
  --surface-page:     var(--surface-app);
  --border-card:      var(--line);
  --border-field:     var(--line);
  --action-primary:       var(--cl-purple);
  --action-primary-hover: var(--cl-magenta);
  --focus-color:          var(--cl-magenta);
}