/* coe-factoring-hermes — tokens.css
 *
 * Paleta y escala tipografica. Sale del mockup aprobado por negocio
 * (`funcional/Hermes cotizadores V3.html`, bloque `:root`), que es contrato
 * visual: el color aca NO es decoracion, es vocabulario.
 *
 *   amarillo  -> el usuario TIENE que escribir en este campo
 *   gris      -> de solo lectura: lo completa el sistema. Son las salidas
 *                del motor y los dos RUC, que trae el padron.
 *   verde     -> aprobado
 *   celeste   -> simulable (se usara cuando exista el simulador de comision)
 *
 * Cambiar un color de sitio cambia lo que la pantalla afirma. Hay una leyenda
 * visible en el cotizador que documenta la convencion para el usuario.
 *
 * Todo `var(--x)` usado en el resto del CSS tiene que estar declarado aca:
 * hay un test que lo verifica, porque partir un CSS de 500 lineas en archivos
 * es justo cuando se pierde una variable y el color se cae a `inherit` sin
 * que nadie lo note.
 */
:root {
  /* ---- sidebar ---- */
  --sidebar-green: #1E4B39;
  --sidebar-green-2: #173B2C;
  --sidebar-line: rgba(255, 255, 255, 0.10);
  --sidebar-text: #CFE0D6;
  --sidebar-text-dim: #8FAE9E;
  --accent-dot: #7BD79C;

  /* ---- marca ---- */
  --green: #12402C;
  --green-dark: #0D3323;
  --green-050: #E4F0EA;

  /* ---- semantica de campo ---- */
  --yellow: #F2E065;
  --yellow-border: #DCC93F;
  --lightblue: #D8E3F6;
  --lightblue-border: #B9CBEA;
  --value-box: #F4F5FB;
  --value-box-border: #DCDFEE;

  /* ---- estados ---- */
  --approved-bg: #C3EAC7;
  --approved-text: #1E6B33;

  /* Neutro de "sin evaluar". Deliberadamente gris y SIN parentesco con
   * `--approved-*`: los dos semaforos vuelven `NO_EVALUADO` porque su formula
   * es un bloqueante de negocio abierto, y un tilde verde que nadie calculo se
   * lleva a la negociacion con el cliente. */
  --pendiente-bg: #E8EAF0;
  --pendiente-text: #414C57;
  --pendiente-border: #C7CCD8;

  --error-bg: #FDE7E7;
  --error-text: #A3231F;
  --error-border: #E4A9A6;

  --aviso-bg: #FFF4D6;
  --aviso-text: #6B4F14;
  --aviso-border: #E8D9A0;

  /* ---- superficie ---- */
  --page-bg: #E9ECFB;
  --card-bg: #FFFFFF;
  --text: #1E2A2F;
  --text-soft: #4A5760;
  --text-mute: #6B7480;
  --line: #E3E3EC;
  --topbar-line: #ECEEF7;

  /* ---- tipografia ----
   * El mockup hardcodea ~19 tamanos distintos en px. Se reducen a una escala
   * para que "un poco mas chico" deje de ser una decision por sitio. */
  --fuente: 'Segoe UI', 'Calibri', Arial, sans-serif;
  --fs-xxs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 20px;
  --fs-xxl: 22px;

  /* ---- proforma (F6) ----
   * Del rediseno que aporto negocio se toman SOLO colores y forma; los textos
   * son los de la plantilla de Factoring ya aprobada.
   *
   * La proforma tiene su propia paleta y no reusa la del cotizador a
   * proposito: son dos superficies con publicos distintos. La del cotizador
   * es vocabulario para el ejecutivo —amarillo es "escriba aca"—, y en un
   * documento que va al cliente ese vocabulario no significa nada. Aca el
   * color solo agrupa: tasas, fechas, montos.
   *
   * Los tres fondos son claros a proposito: la proforma se imprime, y un
   * bloque saturado se come el toner y baja el contraste del numero. */
  --prof-head-de: #0E7A56;
  --prof-head-a: #4FBF8B;
  --prof-titulo: #0F7A54;
  --prof-borde: #E4E8EE;
  --prof-rotulo: #6B7480;

  --prof-tasas-bg: #FDF0E4;
  --prof-tasas-text: #B4531C;

  --prof-fechas-bg: #EAF6EF;

  --prof-montos-bg: #EEF3F8;
  --prof-montos-text: #1F3E63;

  --prof-nota-bg: #F5F6F8;
  --prof-nota-text: #1F3E63;

  /* El gris sobre el que flota la hoja, para que la pestana se lea como un
   * visor de documento y no como otra pantalla de la app. */
  --prof-mesa: #DDE1E8;

  /* ---- forma ---- */
  --radio: 6px;
  --radio-lg: 10px;
  --sombra: 0 1px 3px rgba(20, 30, 60, 0.08);
  --sombra-alta: 0 8px 24px rgba(20, 30, 60, 0.18);
}