/* NEXO Ventas · tokens del sistema de diseño (dirección B "Calle").
   Aquí solo hay VALORES; las piezas están en componentes.css y las reglas de uso en docs/diseno/sistema.md.
   Tema: claro por defecto; oscuro con <html data-tema="oscuro">. Si el usuario no eligió, se sigue al teléfono.
   Si cambias un color, corre: node herramientas/revisar-contraste.js */

@font-face {
  font-family: "Manrope";
  src: url("../fuentes/manrope-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- letra (una sola familia; jerarquía con tamaño y peso) ---------- */
  --fuente: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --peso-normal: 500;
  --peso-medio: 600;
  --peso-fuerte: 700;
  --texto-xs: 0.8125rem;   /* 13 px · etiquetas de estado, títulos de sección */
  --texto-sm: 0.875rem;    /* 14 px · texto de apoyo */
  --texto-md: 1.0625rem;   /* 17 px · texto normal (base) */
  --texto-lg: 1.25rem;     /* 20 px · títulos de hoja */
  --texto-xl: 1.625rem;    /* 26 px · título de pantalla */
  --texto-2xl: 2.125rem;   /* 34 px · montos grandes */
  --interlineado: 1.4;
  --interlineado-ajustado: 1.15;

  /* ---------- espacios (de 4 en 4) ---------- */
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 20px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-10: 40px;

  /* ---------- radios y bordes ---------- */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 14px;
  --radio-total: 999px;
  --grosor-borde: 1.5px;

  /* ---------- medidas táctiles ---------- */
  --alto-tactil: 44px;      /* mínimo de todo lo que se toca */
  --alto-boton: 56px;
  --alto-fila: 72px;
  --alto-nav: 64px;
  --alto-cabecera: 64px;
  --icono: 22px;
  --icono-sm: 18px;

  /* ---------- movimiento (corto y con propósito) ---------- */
  --movimiento-corto: 150ms;
  --movimiento-medio: 200ms;
  --curva-salida: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- capas ---------- */
  --capa-hoja: 10;
  --capa-aviso: 20;

  /* ---------- color · claro ---------- */
  color-scheme: light;
  --color-fondo: #f4f1ec;
  --color-superficie: #ffffff;
  --color-superficie-2: #eeeae3;
  --color-borde: #ddd7ce;
  --color-texto: #1a1714;
  --color-texto-2: #4f4943;
  --color-texto-3: #625b53;
  --color-acento: #0a4f5e;
  --color-sobre-acento: #ffffff;
  --color-acento-suave: #e3eff1;
  --color-acento-tinta: #0a4f5e;
  --color-debe: #b42318;
  --color-debe-suave: #fbebe7;
  --color-pagado: #146c36;
  --color-pagado-suave: #e7f3e9;
  --color-pendiente: #934a00;
  --color-pendiente-suave: #fbefdd;
  --color-velo: rgb(0 0 0 / 0.4);
  /* El papel del recibo: blanco con tinta negra también en modo oscuro (así sale en la impresora). */
  --color-papel: #ffffff;
  --color-tinta: #111111;
}

/* ---------- color · oscuro (elegido por el usuario) ---------- */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --color-fondo: #13110f;
  --color-superficie: #1d1a17;
  --color-superficie-2: #282420;
  --color-borde: #36312b;
  --color-texto: #f6f3ee;
  --color-texto-2: #bdb5aa;
  --color-texto-3: #a39b90;
  --color-acento: #5cc2d6;
  --color-sobre-acento: #0b1416;
  --color-acento-suave: #14292e;
  --color-acento-tinta: #6fcbdd;
  --color-debe: #ff8a80;
  --color-debe-suave: #3a1a18;
  --color-pagado: #5bd68a;
  --color-pagado-suave: #15301f;
  --color-pendiente: #f5b547;
  --color-pendiente-suave: #352812;
  --color-velo: rgb(0 0 0 / 0.6);
}

/* ---------- color · oscuro automático (el teléfono está en oscuro y el usuario no eligió claro) ----------
   Debe ser IGUAL al bloque anterior: revisar-contraste.js comprueba que no se separen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --color-fondo: #13110f;
    --color-superficie: #1d1a17;
    --color-superficie-2: #282420;
    --color-borde: #36312b;
    --color-texto: #f6f3ee;
    --color-texto-2: #bdb5aa;
    --color-texto-3: #a39b90;
    --color-acento: #5cc2d6;
    --color-sobre-acento: #0b1416;
    --color-acento-suave: #14292e;
    --color-acento-tinta: #6fcbdd;
    --color-debe: #ff8a80;
    --color-debe-suave: #3a1a18;
    --color-pagado: #5bd68a;
    --color-pagado-suave: #15301f;
    --color-pendiente: #f5b547;
    --color-pendiente-suave: #352812;
    --color-velo: rgb(0 0 0 / 0.6);
  }
}

/* ---------- "reducir movimiento" del teléfono: sin animaciones ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --movimiento-corto: 0ms;
    --movimiento-medio: 0ms;
  }
}