/* ─────────────────────────────────────────────────────────────────────────────
   Marca de Fundación Abrázame · un color por programa
   El bloque de abajo es copia exacta de docs/diseno/design-system/spec-abrazame.md, sección «Tokens
   CSS»: neutros, estados, formas y, de respaldo, las cuatro paletas del design system.

   Las paletas que valen en la plataforma son las del MOTOR: cada una es una definición versionada
   (recetas/marca) y el servidor genera su CSS en /api/<superficie>/paletas.css, que carga después de
   esta hoja y le gana. Así una paleta nueva o un color cambiado no exige tocar código ni este archivo.
   La pública toma la paleta de su convocatoria con data-programa en <html>; la interna, «corporativo».
   ───────────────────────────────────────────────────────────────────────────── */
:root, [data-programa="corporativo"]{
  --abz-prog-base:#A3A3B5; --abz-prog-50:#F6F6F8; --abz-prog-100:#EBEBEF; --abz-prog-200:#D4D4DD;
  --abz-prog-fuerte:#5F5F71; --abz-prog-hover:#515160; --abz-prog-oscuro:#3D3D4E;
}
[data-programa="abrazame"]{
  --abz-prog-base:#EFA1B6; --abz-prog-50:#FDF3F5; --abz-prog-100:#FBE8ED; --abz-prog-200:#F5C4D1;
  --abz-prog-fuerte:#92596A; --abz-prog-hover:#7F4D5C; --abz-prog-oscuro:#724553;
}
[data-programa="primera-infancia"]{
  --abz-prog-base:#A493C6; --abz-prog-50:#F6F5FA; --abz-prog-100:#EBE8F3; --abz-prog-200:#D5CDE5;
  --abz-prog-fuerte:#5B4B9E; --abz-prog-hover:#4F4189; --abz-prog-oscuro:#453978;
}
[data-programa="ninez"]{
  --abz-prog-base:#95D2B7; --abz-prog-50:#F4FAF8; --abz-prog-100:#E6F4EE; --abz-prog-200:#C8E8DA;
  --abz-prog-fuerte:#287052; --abz-prog-hover:#1F563F; --abz-prog-oscuro:#184331;
}
:root{
  --abz-texto:#3D3D4E; --abz-texto-2:#5F5F71; --abz-nota:#6E6E84;
  --abz-borde-campo:#8A8A9E; --abz-linea:#E4E4EA; --abz-fondo:#F6F6F8; --abz-superficie:#FFFFFF;
  --abz-revisar:#815E15; --abz-revisar-bg:#FCF6E9; --abz-revisar-borde:#E2B04A; --abz-bloqueado:#B42318; --abz-bloqueado-bg:#FEECEB;
  --abz-avanza:#3D3D4E; --abz-avanza-bg:#EBEBEF; --abz-neutro:#5F5F71; --abz-neutro-bg:#F1F1F4;
  --abz-r-campo:10px; --abz-r-boton:12px; --abz-r-tarjeta:16px; --abz-r-pill:999px;
  --abz-sombra-tarjeta:0 1px 2px rgba(61,61,78,.06),0 4px 16px rgba(61,61,78,.06);
  --abz-sombra-flotante:0 12px 32px rgba(61,61,78,.16);
  --abz-dur-rapida:150ms; --abz-dur-media:220ms; --abz-dur-avance:400ms;
  --abz-font-titulo:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --abz-font-texto:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ── Los nombres que usan las pantallas, sobre los tokens del spec ──────────────
   Se declaran en el mismo elemento que data-programa (<html>, o una etiqueta de programa), así que
   cambian con el programa. «html:root» pesa más que el «:root» de los respaldos de estilos.css, así
   que manda esta hoja aunque cargue antes. */
html:root, [data-programa]{
  --color-primario: var(--abz-prog-fuerte);
  --color-primario-hover: var(--abz-prog-hover);
  --color-primario-claro: var(--abz-prog-base);
  --color-primario-suave: var(--abz-prog-100);
  --color-primario-fondo: var(--abz-prog-50);
  --color-titulo: var(--abz-prog-oscuro);
  --color-foco: var(--abz-prog-fuerte);

  /* Estados: solo por significado, siempre con ícono y texto. «Avanza» ya no es verde. */
  --color-ok: var(--abz-avanza);
  --color-ok-suave: var(--abz-avanza-bg);
  --color-alerta: var(--abz-revisar);
  --color-alerta-suave: var(--abz-revisar-bg);
  --color-alerta-borde: var(--abz-revisar-borde);
  --color-error: var(--abz-bloqueado);
  --color-error-suave: var(--abz-bloqueado-bg);

  --color-fondo: var(--abz-fondo);
  --color-superficie: var(--abz-superficie);
  --color-borde: var(--abz-linea);
  --color-borde-campo: var(--abz-borde-campo);
  --color-texto: var(--abz-texto);
  --color-texto-suave: var(--abz-nota);

  --fuente: var(--abz-font-texto);
  --fuente-titulo: var(--abz-font-titulo);
  --radio: var(--abz-r-tarjeta);
  --radio-chico: var(--abz-r-campo);
  --sombra: var(--abz-sombra-tarjeta);
}