/* Helpify — Color tokens. Derived from Libro de Marca 2025. */
:root {
  /* ---- Principales ---- */
  --hf-pen-blue: #181A4A;   /* base / primary — Pantone 2766 C */
  --hf-cobalt:   #2A3282;   /* Cosmic Cobalt — Pantone 7687 C */
  --hf-pear:     #DCE75E;   /* accent — Pantone 379 C. Nunca texto sobre claro */

  /* ---- Blue ramp ---- */
  --hf-blue-900: #0F102E;
  --hf-blue-800: #181A4A;
  --hf-blue-700: #21286E;
  --hf-blue-600: #2A3282;
  --hf-blue-400: #5659C8;
  --hf-blue-200: #B1B6E7;

  /* ---- Pear ramp ---- */
  --hf-pear-light: #F3F6C5;
  --hf-pear-base:  #DCE75E;
  --hf-pear-dark:  #738B46;

  /* ---- Secundarios ---- */
  --hf-parchment:  #EFEEEA;  /* background por defecto — Pantone 663 C */
  --hf-mauve:      #E0B0FF;  /* Pantone 530 C */
  --hf-purple:     #693FA5;  /* Purple Heart — Pantone 2090 C */
  --hf-gainsboro:  #D6DEE7;  /* Pantone 642 C */
  --hf-rich-black: #070816;  /* Black 6 C */

  /* ---- Neutros de apoyo ---- */
  --hf-white:   #FDFDFD;
  --hf-ink-700: #303358;
  --hf-grey-500: #B8B7B5;

  /* ---- Estados semánticos (derivados de la paleta) ---- */
  --hf-success: #738B46;   /* pear-dark olivo */
  --hf-warning: #E0B0FF;   /* mauve, suavidad cálido-violeta */
  --hf-danger:  #693FA5;   /* purple heart para énfasis */
  --hf-info:    #5659C8;   /* cobalt-400 */

  /* ---- Gradiente de marca (logo Bold) ---- */
  --hf-gradient-blue: linear-gradient(135deg, #2A3282 0%, #181A4A 60%, #0F102E 100%); /* @kind color */
  --hf-gradient-pear: linear-gradient(135deg, #F3F6C5 0%, #DCE75E 55%, #738B46 100%); /* @kind color */

  /* ---- Aliases semánticos ---- */
  --surface-page:    var(--hf-parchment);
  --surface-card:    var(--hf-white);
  --surface-inverse: var(--hf-pen-blue);
  --surface-raised:  var(--hf-white);
  --surface-subtle:  #E7E6E1;          /* parchment un paso más oscuro */

  --text-strong:   var(--hf-pen-blue);   /* títulos / texto fuerte sobre claro */
  --text-body:     var(--hf-ink-700);    /* cuerpo sobre claro */
  --text-muted:    var(--hf-grey-500);
  --text-on-dark:  var(--hf-parchment);  /* texto sobre Pen Blue / oscuro */
  --text-accent:   var(--hf-cobalt);

  --border-subtle: var(--hf-gainsboro);
  --border-strong: var(--hf-pen-blue);

  --accent:        var(--hf-pear);       /* foco / CTAs */
  --accent-ink:    var(--hf-pen-blue);   /* texto sobre Pear */
}