/* ---------------------------------------------------------------------------
   La Super Suite — tokens de identidad
   ---------------------------------------------------------------------------
   UNA sola definicion de color y tipografia para todo el sistema.

   Antes habia dos paletas que nunca coincidieron: `app.css` pintaba el panel
   con `--brand: #B3126A` y `pos.css` pintaba la caja con `--vp-side: #8E1050`.
   El cajero cruzaba de una pantalla a otra y el morado cambiaba de tono.

   Ahora las dos leen de aqui. `app.css` y `pos.css` conservan sus nombres de
   variable propios (`--brand`, `--vp-side`, ...) y solo los redefinen en
   terminos de estos tokens, asi que las ~140 reglas que ya los usaban siguen
   funcionando sin tocarlas.

   ESTE archivo se enlaza ANTES que `app.css` y que `pos.css`. Si se enlaza
   despues, las variables ya se resolvieron y no pasa nada.

   Color de marca: #a2007d.
   --------------------------------------------------------------------------- */

:root {
  /* --- Marca --------------------------------------------------------------
     `--ls-primary` sobre blanco da 7.4:1, y blanco sobre `--ls-primary` lo
     mismo: sirve para texto y para relleno con texto encima.
     `--ls-primary-strong` es el estado activo y el hover; va mas oscuro, no
     mas claro, porque sobre el riel morado un hover claro se lava. */
  --ls-primary: #a2007d;
  --ls-primary-strong: #7a005e;
  --ls-primary-deep: #4a0039;
  --ls-primary-soft: #fbeef7;

  /* --- Neutros ------------------------------------------------------------ */
  --ls-ink: #2e1a28;
  --ls-muted: #7a6270;        /* 5.6:1 sobre blanco */
  --ls-line: #f0dbe8;
  --ls-canvas: #fdf8fb;
  --ls-surface: #ffffff;

  /* --- Acentos ------------------------------------------------------------
     Retonados al matiz nuevo para que no desentonen con #a2007d. */
  --ls-lilac: #b878ac;
  --ls-coral: #d94f6b;

  /* --- Semanticos ---------------------------------------------------------
     Verde y rojo NO siguen a la marca: significan cosas y tienen que leerse
     igual aunque la marca cambie. */
  --ls-ok: #1f7a46;
  --ls-warn: #92400e;
  --ls-danger: #b3261e;

  /* --- Tipografia --------------------------------------------------------- */
  --ls-font: "Inter", system-ui, sans-serif;
  --ls-font-display: "Fraunces", Georgia, serif;

  /* --- Forma --------------------------------------------------------------
     `--ls-radius` es la tarjeta grande; `--ls-radius-sm` el control. */
  --ls-radius: 16px;
  --ls-radius-sm: 12px;
  --ls-shadow: 0 10px 30px rgba(162, 0, 125, 0.08);

  /* --- Tamano minimo de control ------------------------------------------
     La caja se usa en pantalla tactil: nada clicable baja de esto. */
  --ls-touch: 44px;
}