/* ============================================================================
   HOK · Variables de color — fuente única para toda la web
   ────────────────────────────────────────────────────────────────────────────
   Antes cada página y cada pieza (`piezas/hok-*.js`) tenía los mismos hex
   escritos a mano, sueltos, muchas veces (ver brandkit/desparejos.md #2).
   Ahora los colores viven UNA sola vez, acá, como variables `--hok-*`, y el
   resto del código las usa con `var(--hok-nombre)`.

   Se linkea desde el <head> de cada página (`<link rel="stylesheet"
   href="/piezas/hok-colores.css">`), antes de que las piezas JS inyecten sus
   propios <style>: cualquier <style> que use `var(--hok-x)` encuentra la
   variable ya declarada en :root, venga en el orden que venga.

   ESTE ARCHIVO NO CAMBIA NINGÚN COLOR VISIBLE. Cada valor de acá es idéntico,
   carácter por carácter, al hex que reemplaza. Emparejar ≠ decidir: las
   decisiones de qué colores DEBERÍAN cambiar están en desparejos.md, para
   que las tome Mati.
   ============================================================================ */

:root {
  /* ── Paleta canónica del kit ──────────────────────────────────────────────
     Copiada tal cual de brandkit/colores.css (fuente:
     referencia/vault-viejo/BRAND-KIT/tokens/hok-tokens.css). Si el kit
     cambia, este bloque se actualiza a mano desde ahí. */
  --hok-carbon:      #181E24;
  --hok-lime:        #ADF405;
  --hok-off-white:   #FEFEFE;

  --hok-lime-100:    #E9FCB3;
  --hok-lime-200:    #D4F873;
  --hok-lime-300:    #C0F63A;
  --hok-lime-400:    #ADF405;
  --hok-lime-500:    #9BDB00;
  --hok-lime-600:    #84BC00;
  --hok-lime-700:    #6A9700;

  --hok-neutral-950: #0F141A;
  --hok-neutral-900: #181E24;
  --hok-neutral-800: #1F262E;
  --hok-neutral-700: #2A333D;
  --hok-neutral-600: #3A4550;
  --hok-neutral-500: #4E5B68;
  --hok-neutral-400: #6B7886;
  --hok-neutral-300: #8E9AA6;
  --hok-neutral-200: #B4BDC6;
  --hok-neutral-100: #D6DCE2;
  --hok-neutral-50:  #EDF0F2;
  --hok-neutral-0:   #FEFEFE;

  --hok-accent-cyan:   #1AC8E0;
  --hok-accent-orange: #FF6B1A;

  --hok-success: #28C26A;
  --hok-warning: #FFB020;
  --hok-error:   #F5414E;
  --hok-info:    #2B9DF0;

  /* ── Fuera del kit: colores que la web ya usaba y el kit no define ───────
     Cada uno documentado en brandkit/desparejos.md con su desparejo (si lo
     tiene) y con propuesta de a qué se emparejaría. El valor es el mismo hex
     que estaba escrito a mano; no se decidió ningún color acá. */

  /* Fondo real de la web — REVISADO 30-sep-2026, SE QUEDA IGUAL a propósito
     (Mati: "SOLO si no genera cortes visibles… si aparece cualquier
     costura/banda/borde visible, dejá el fondo como estaba y explicalo").
     El kit define --hok-carbon #181E24 para este rol, pero cambiar el valor
     acá NO alcanza: hay tres enganches con el valor exacto #0b0f12 que viven
     FUERA de este archivo y que un solo `var()` no arregla —
     ver brandkit/desparejos.md, decisión B, con el detalle de cada uno.
     Se queda en #0b0f12. */
  --hok-fondo-web:    #0b0f12;
  --hok-fondo-web-2:  #0d1216; /* variación tonal del fondo, mismo criterio (hok-beneficios/hok-capacidades) */
  --hok-fondo-web-3:  #0f151a; /* tercera variación tonal, misma familia */
  --hok-fondo-menu:   #0f1519; /* fondo del cajón de menú móvil (hok-barra) */

  /* Superficies oscuras intermedias (paneles, tarjetas): cada pieza eligió
     un tono ligeramente distinto para el mismo rol; se documentan tal como
     están, sin unificarlas (eso sería un cambio visible). */
  --hok-panel-oscuro:      #11171c; /* "panel" en hok-interior, hok-cuenta, hok-portal */
  --hok-tarjeta-oscura:    #141a1f; /* "tarjeta" en hok-formulario */
  --hok-superficie-oscura-2: #12181c; /* "fondoClaro" en hok-resena (nombre de variable JS, no de color) */
  --hok-fondo-seccion-clara: #131a1f; /* sección de error 404 en index.html */

  /* Texto (desparejos.md: "no incluido a propósito", duda abierta) */
  --hok-texto-web:        #e8ecef; /* texto principal sobre fondo oscuro */
  --hok-texto-web-tenue:  #9aa4ad; /* texto secundario/atenuado */
  --hok-gris-texto:       #4A5560; /* texto gris en hok-formulario */

  /* Blanco puro, distinto de --hok-off-white (#FEFEFE): se mantiene separado
     a propósito para no cambiar ni un bit del color renderizado. */
  --hok-blanco-puro: #fff;

  /* Superficie clara puntual (fondos claros de tarjetas/citas) */
  --hok-superficie-clara: #EDEFF0;

  /* Hover del CTA principal — RESUELTO 30-sep-2026 (Mati: "resolvé, elegí
     el que sea más acorde a lo que debería ser"). Antes era #c2ff2b, un
     verde-lima que no estaba en ninguna escala del kit. Ahora es
     --hok-lime-500 #9BDB00, que el propio kit (brandkit/colores.css) define
     con ese rol exacto: "hover del CTA primario". Contraste del texto
     --hok-carbon sobre este hover: ~10:1 (antes ~14:1) — sigue muy por
     encima del 4.5:1 de WCAG AA. Ver brandkit/desparejos.md. */
  --hok-hover-lima-web: #9BDB00;

  /* Verde del cliente, DELIBERADO y documentado (no es un desparejo, ver
     hok-circuito.js): efecto puntual en el pie, a propósito distinto de la
     paleta de marca. */
  --hok-verde-cliente-legado: #052424;

  /* Estado de error del formulario (no es exactamente --hok-error #F5414E
     del kit; se mantiene el valor real, sin decidir el cambio acá). */
  --hok-borde-error-web: #ff6b5e;
  --hok-texto-error-web: #ff8f85;

  /* Detalles puntuales */
  --hok-cortina-loader: #ededed; /* cortinas claras del loader */
  --hok-negro-puro:     #000;    /* fondo del recuadro de video en hok-interior */
}