/* ============================================================
   tokens.css — fuente única de verdad del diseño (REVISION-3 §8.5/§9.2)
   Dos capas:
   1) PRIMITIVOS: los valores crudos (paleta, escalas). No se usan directo en
      componentes — son la materia prima.
   2) SEMÁNTICOS: nombres por significado (--navy, --danger, --fs-base…). ESTOS
      son los que se usan en styles.css y en las plantillas de app.js.
   Regla: en el código NO se escriben hex ni px sueltos; se usa un token.
   Ver DISEÑO.md para las reglas de uso.
   ============================================================ */
:root {
  /* ---------- 1 · PRIMITIVOS ---------- */
  /* Marca / neutros */
  --c-navy-900:#1C3149;   /* azul marca */
  --c-navy-800:#16283b;   /* hover del navy */
  --c-slate-700:#2B3440;  /* texto principal */
  --c-gray-500:#87898A;   /* texto tenue */
  --c-gray-400:#9AA4B2;
  --c-gray-300:#AEB8C4;
  --c-onnavy-200:#C2CCD8; /* texto de menu sobre navy */
  --c-onnavy-400:#7C8AA0; /* encabezado de grupo sobre navy */
  --c-warm-50:#FAF9F6;    /* superficie calida de la caja de conciliacion */
  --c-warm-200:#E3E0D8;   /* su borde */
  /* La familia CAFE (tanda 9 · lenguaje visual, disenos/lenguaje-visual-v1.html, aprobada por J
     el 24-ago). Pariente del par calido de conciliacion y NO se fusionan a proposito: conciliar
     es «detente a verificar», cafe es «esto es interno de la agencia, el portal jamas lo recibe».
     Los valores salen de la maqueta gastos-agencia que J aprobo con los ojos. */
  --c-cafe-50:#F7F6F3;    /* fondo del mueble interno */
  --c-cafe-100:#E8E4DC;   /* renglon resaltado dentro del mueble */
  --c-cafe-200:#DDD8CE;   /* su borde */
  --c-cafe-800:#514C43;   /* su tinta (rotulos y texto fuerte) */
  /* El velo del hover: un negro al 3% que OSCURECE lo que haya debajo, y por eso es un rgba y no
     un gris opaco — sobre la superficie blanca y sobre la cálida tiene que verse como el mismo
     gesto. Estaba escrito a mano en styles.css como respaldo de un token que nadie declaró
     (CSS-5). El valor es EXACTAMENTE el que ya se veía; medido en Chrome antes y después. */
  --c-hover-03:rgba(0,0,0,.03);
  --c-line-200:#E4E8ED;   /* bordes */
  --c-bg-100:#EEF1F4;     /* fondo de la página */
  --c-light-100:#F1F4F7;  /* superficies suaves */
  --c-white:#FFFFFF;

  /* Estados (cada uno: fuerte + fondo claro) */
  --c-red-700:#A3282F;    --c-red-50:#FDECEC;   --c-red-200:#F0C0C0;
  /* Los DOS AZULES del expediente (rebote de pantalla del 7-sep · J: «le pondria colores
     diferentes a cada chip»). Hasta hoy PENDIENTE, POR CONFIRMAR y EN REVISION salian los tres
     en el mismo gris, o sea que el chip decia el estado y el COLOR no decia nada. Los valores
     salen de la maqueta que J aprobo con los ojos (EXPEDIENTE-PANTALLA-v5.html), no de un
     generador: el azul claro es «avisaste y falta que lo confirmemos» y el navy es «llego».
     `--c-navy-100/200` viven con la familia navy porque son ESA marca aclarada, no un azul nuevo. */
  --c-blue-700:#2B5D8A;   --c-blue-50:#EAF2F9;  --c-blue-200:#C3DAEC;
  --c-navy-100:#DDE5EE;   --c-navy-200:#AFC0D4;
  --c-green-700:#12613F;  --c-green-50:#E8F5EE; --c-green-200:#BFE6D1;
  --c-amber-700:#8A5A12;  --c-amber-50:#FDF3E7; --c-amber-200:#F0D9B5;

  /* Escala de tipografía (6 pasos, no 16) */
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-base:13px;
  --fs-md:14px;
  --fs-lg:17px;
  --fs-xl:24px;
  /* El micro-rotulo (tanda 9): el paso que las maquetas agregaron DEBAJO de --fs-xs. No es un
     septimo tamano de texto corrido — es SOLO para titulos de seccion/tarjeta/grupo, y siempre
     viaja con su regla completa: uppercase + letter-spacing .06em + peso 800. El titulo susurra,
     el dato habla (gramatica 1 de la hoja). */
  --fs-rotulo:10.5px;

  /* Familia de lo mono (tanda 9): folios de archivo, rutas, ids — lo plomeria, que va chiquito
     y gris (gramatica 6). La interfaz sigue en la familia de siempre. */
  --font-mono:ui-monospace, Consolas, monospace;

  /* Escala de espaciado (múltiplos de 4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;

  /* Radios (3 valores) */
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  /* Los dos radios que las maquetas estrenaron (tanda 9): la tarjeta interior/franja va ENTRE
     md y lg a proposito, y la pildora es la de todos los chips. */
  --r-caja:10px; --r-pill:99px;

  /* Sombras (tanda 9): TRES niveles y ninguno mas — tarjeta que flota apenas · menu flotante ·
     modal. Si algo necesita otra sombra, primero preguntarse cual de las tres es. */
  --sombra-1:0 4px 18px rgba(0,0,0,.06);
  --sombra-2:0 8px 26px rgba(0,0,0,.18);
  --sombra-3:0 18px 50px rgba(0,0,0,.25);

  /* ---------- 2 · SEMÁNTICOS (los que se usan) ---------- */
  --navy:var(--c-navy-900);
  --navy-hover:var(--c-navy-800);
  --text:var(--c-slate-700);
  --gray:var(--c-gray-500);
  --line:var(--c-line-200);
  --bg:var(--c-bg-100);
  --light:var(--c-light-100);
  --surface:var(--c-white);

  /* Texto sobre el navy del menu lateral. Existian como hex sueltos en styles.css (#c2ccd8 y
     #7c8aa0) porque no habia de donde tomarlos: el gris de la app no se lee sobre azul oscuro.
     DISENO.md dice que cuando falta de verdad un valor, se agrega UNA vez aqui. */
  --on-navy:var(--c-onnavy-200);
  --on-navy-dim:var(--c-onnavy-400);
  /* Gris azulado mas suave que --gray, para guias y jerarquia secundaria (arbol de catalogos). */
  --gray-soft:var(--c-gray-400);
  /* ── CSS-5 (3-sep) · LOS DOS QUE styles.css USABA SIN QUE NADIE LOS DECLARARA ──────────────
     Medido recorriendo `var(--X)` de styles.css SIN COMENTARIOS contra las declaraciones de las
     dos hojas: 67 usados · 85 declarados · 2 sin declarar. Los dos traían respaldo, así que no se
     veía nada roto — y eso era justo el defecto: el respaldo ESCONDE que el token no existe, y el
     día que alguien cambie la paleta esperando que `--text-secondary` la siga, no la sigue.
     ⚠ Se declaran con EXACTAMENTE el valor del respaldo, así que el cambio es de cero píxeles.
       Verificado en un Chrome real (`tests/chrome-de-la-casa.js`): `.opc-table .opc-sub td` sigue
       computando rgb(135,137,138) y `.secbox>summary:hover` sigue computando rgba(0,0,0,0.03).
     ⚠ Y `--text-secondary` apunta a `--gray`, NO a `--c-gray-500`. Es un ALIAS a propósito: el
       respaldo decía `var(--gray)`, o sea que el día que `--gray` cambie, esto tiene que cambiar
       con él. Apuntar al primitivo daría hoy el mismo color y rompería esa liga en silencio.
     ⚠ El tercero que la ficha reportaba —`--red-700`— era un FALSO POSITIVO: su única aparición
       está dentro de un comentario de styles.css que documenta un bug ya arreglado. No se toca. */
  --text-secondary:var(--gray);
  --hover-bg:var(--c-hover-03);
  /* La caja de conciliacion del importador (donde se verifica que el saldo cuadre con el banco) es
     el UNICO lugar calido de la app, y es a proposito (J, 1-ago): se distingue del resto porque ahi
     te detienes a verificar. Antes eran hex sueltos; ahora estan nombrados para que se entienda que
     es una decision y no un residuo. NO migrar a los grises frios. */
  --recon-bg:var(--c-warm-50);
  --recon-line:var(--c-warm-200);
  /* La familia INTERNO (tanda 9 · lenguaje visual): cafe/beige = lo interno de la agencia —
     costos, margenes, lo que el portal jamas recibe. Es VOCABULARIO, no decoracion: navy+blanco
     dice «del cliente», cafe dice «nuestro». El mueble cafe del libro hoy usa --recon-* prestado
     (styles.css lo declara); migrarlo a estos es parte de la migracion por pantalla de la tanda 9,
     con rebote de J — no se hace de refilon aqui. */
  --interno-bg:var(--c-cafe-50);
  --interno-row:var(--c-cafe-100);
  --interno-line:var(--c-cafe-200);
  --interno-ink:var(--c-cafe-800);

  --danger:var(--c-red-700);      --danger-bg:var(--c-red-50);     --danger-border:var(--c-red-200);
  --ok:var(--c-green-700);        --ok-bg:var(--c-green-50);       --ok-border:var(--c-green-200);
  --warn:var(--c-amber-700);      --warn-bg:var(--c-amber-50);     --warn-border:var(--c-amber-200);
  /* ESPERA y LLEGO · el color contesta DE QUIEN ES EL TURNO, que es lo que los bloques por estado
     hacian antes de caerse. Le tocan a la casa: ESPERA = el cliente aviso y falta confirmarlo;
     LLEGO = el archivo esta aqui y falta mirarlo. Los del cliente (Pendiente, Rechazado, Vencido)
     y el de nadie (Aceptado) ya tenian token.
     ⚠ Se declaran en el UNICO `:root` que este archivo tiene — medido: cero `prefers-color-scheme` y
       cero selectores de tema en tokens.css, asi que los 40 semanticos de arriba viven en un solo
       estado y estos dos hacen exactamente lo mismo. Calcar es esto, no inventar un tema. */
  --espera:var(--c-blue-700);     --espera-bg:var(--c-blue-50);    --espera-border:var(--c-blue-200);
  --llego:var(--c-navy-900);      --llego-bg:var(--c-navy-100);    --llego-border:var(--c-navy-200);
  /* ⚠ TOKEN NUEVO (v11, 9-sep) · el gris de «Pendiente». Medido: --gray da 3.51:1 sobre blanco
     y 3.18:1 dentro de la pastilla, y AA pide 4.5:1 a 12 px — REPRUEBA HOY, en produccion, en
     las dos pantallas. Este da 6.05:1. Va declarado, no metido de contrabando. */
  --pend:#5F6368;

  /* ── LA ESCALA DE ESPACIADO (20-ago) ──────────────────────────────────────────────────
     Medido antes de escribirla: el repo tenía 134 declaraciones de margen y padding con
     TRECE valores distintos en px (2·4·6·8·10·12·14·16·18·20·22·24·26). Eso no es una escala,
     es un continuo — y es la razón de que dos bloques que deberían verse igual no se vean igual.

     Base 4, que es lo que usan Tailwind, Material y Carbon. No se inventa una: la regla del
     proyecto es no reinventar la rueda, y aquí la rueda está estandarizada hace años.

     Y la mitad del trabajo ya estaba hecha sin que nadie lo planeara: de las ocho clases de
     utilidad que ya existían, CINCO (mt8, mt12, mt16, mb12, m0) ya caían en esta escala.
     Sólo tres se salían, y las tres tenían algo más raro que su número — ver styles.css. */
  --e1: 4px;    /* pegado      · dentro de un renglón */
  --e2: 8px;    /* cerca       · entre hermanos de un grupo */
  --e3: 12px;   /* separado    · entre grupos */
  --e4: 16px;   /* aparte      · entre bloques de una sección */
  --e5: 24px;   /* sección     · entre secciones */
  --e6: 32px;   /* respiro     · antes de un encabezado grande */
}