:root{
/* ── Los tres colores de marca ────────────────────────────────────
   Muestreados del manual (PROPUESTA 1.pdf, p.10) y verificados contra
   los datos vectoriales del PDF. */

/* Índigo — fondo y texto. Es el color que la gente va a recordar.
   RGB 17, 6, 49 · CMYK 98, 100, 38, 54 */
--q-indigo:#110631;

/* Menta — firmar, aprobar, confirmar.
   RGB 92, 238, 190 · CMYK 54, 0, 41, 0 */
--q-menta:#5CEEBE;

/* Ámbar — señala un dato. De fondo, solo en paneles de mockup.
   RGB 255, 174, 37 · CMYK 0, 36, 92, 0 */
--q-ambar:#FFAE25;

/* ── Derivados de interacción ─────────────────────────────────────
   El manual no fija estados de hover/press. Estos valores son la misma
   menta y el mismo índigo, oscurecidos o aclarados; no son colores nuevos. */
--q-menta-press:#4ECAA1;   /* menta al 85% de luminosidad */
--q-menta-tint:#E1FCF5;    /* menta al 15% sobre blanco */
--q-indigo-press:#000000;  /* índigo al 85% */
--q-indigo-tint:#EEEEF1;   /* índigo al 7% sobre blanco */
--q-ambar-tint:#FFF3DE;    /* ámbar al 15% sobre blanco */

/* ── Neutrales ────────────────────────────────────────────────────
   El manual define tres colores y el blanco. Un producto necesita además
   bordes y superficies intermedias: esta rampa es índigo mezclado con
   blanco en distintas proporciones, no una familia de grises nueva. */
--q-ink:#110631;        /* = índigo */
--q-ink-soft:#58516F;   /* índigo 70% */
--q-ink-faint:#7C768E;  /* índigo 55% */
--q-border:#DBDAE0;     /* índigo 15% */
--q-surface-alt:#F2F1F5;/* índigo 6% */
--q-surface:#FFFFFF;
--q-page:#FFFFFF;

/* ── Estado negativo ─────────────────────────────────────────────
   ATENCIÓN: el manual NO define un color de error. El producto sí tiene
   estados negativos (pago vencido, documento rechazado). Este rojo es una
   adición del sistema, pendiente de aprobación de marca. */
--q-alerta:#C1414E;
--q-alerta-tint:#FBE9EB;

/* ── Alias semánticos ────────────────────────────────────────────── */
--text-heading:var(--q-indigo);
--text-body:var(--q-ink-soft);
--text-muted:var(--q-ink-faint);
--text-strong:var(--q-indigo);
--text-on-dark:#FFFFFF;
--text-on-dark-muted:#A9A3BC;
--text-on-menta:var(--q-indigo);

--surface-page:var(--q-page);
--surface-card:var(--q-surface);
--surface-sunken:var(--q-surface-alt);
--surface-inverse:var(--q-indigo);
--surface-confirm:var(--q-menta);

--border-default:var(--q-border);
--border-strong:var(--q-ink-faint);
--border-focus:var(--q-indigo);

/* La acción afirmativa va en menta con texto índigo: firmar, aprobar,
   confirmar. La alternativa va en contorno índigo. */
--action-primary:var(--q-menta);
--action-primary-hover:var(--q-menta-press);
--action-primary-text:var(--q-indigo);
--action-secondary-border:var(--q-indigo);
--action-secondary-text:var(--q-indigo);
--action-disabled:var(--q-surface-alt);
--action-disabled-text:var(--q-ink-faint);

--data-highlight:var(--q-ambar);
}