/* ============================================================================
   ValetOS Ticket · CAPA 1 — CONTRATO DE TOKENS
   ----------------------------------------------------------------------------
   Este archivo es el CONTRATO. Define todas las variables que un tema puede
   asignar, con valores por defecto neutros y seguros.

   REGLAS INVIOLABLES
   1. El núcleo (valetos-ticket.css) NUNCA escribe un color literal: solo
      consume var(--vt-*). Si necesitas un color nuevo, primero se añade aquí.
   2. Un tema NUNCA declara :root — declara [data-vt-theme="<id>"].
   3. Los tokens marcados [TENANT] aceptan override del comercio. Los demás,
      no. Esa es la frontera de personalización.
   ========================================================================== */

:root,
[data-vt-theme] {
  /* ── Lienzo y superficies ─────────────────────────────────────────────── */
  --vt-canvas: #f2f2f0;              /* fondo de la pantalla completa        */
  --vt-canvas-image: none;           /* gradiente/imagen opcional del tema   */
  --vt-surface: #ffffff;             /* cuerpo del ticket                    */
  --vt-surface-2: #ffffff;           /* tarjetas anidadas                    */
  --vt-surface-3: #f4f4f2;           /* chips, píldoras, fondos sutiles      */

  /* ── Tinta ────────────────────────────────────────────────────────────── */
  --vt-ink: #101010;                 /* texto primario                       */
  --vt-ink-2: #4a4a48;               /* secundario                           */
  --vt-ink-3: #86867f;               /* terciario, captions, eyebrows        */

  /* ── Acento  [TENANT] ─────────────────────────────────────────────────── */
  --vt-accent: #1a56db;              /* color de acción principal            */
  --vt-accent-ink: #ffffff;          /* texto sobre el acento (auto por JS)  */
  --vt-accent-soft: #e7eefc;         /* lavado tenue del acento              */

  /* ── Semántica de estado ──────────────────────────────────────────────── */
  --vt-ok: #1f8a4c;
  --vt-ok-soft: #e6f3ea;
  --vt-ok-ink: #14512f;

  --vt-warn: #b8730a;
  --vt-warn-soft: #fdf1de;
  --vt-warn-ink: #6b430a;

  --vt-danger: #c0392b;
  --vt-danger-soft: #fbeae8;
  --vt-danger-ink: #7d2119;

  --vt-info: #2563b8;
  --vt-info-soft: #e8f0fb;
  --vt-info-ink: #1a3f75;

  --vt-neutral: #6b6b66;
  --vt-neutral-soft: #eeeeeb;
  --vt-neutral-ink: #3a3a37;

  /* ── Líneas y bordes ──────────────────────────────────────────────────── */
  --vt-line: #e2e2dd;                /* separadores internos                 */
  --vt-line-strong: #101010;         /* bordes con presencia (comics, swiss) */
  --vt-border-width: 1px;
  --vt-border-style: solid;
  --vt-border-color: var(--vt-line);

  /* ── Forma ────────────────────────────────────────────────────────────── */
  --vt-radius-frame: 0px;            /* marco exterior del ticket            */
  --vt-radius-card: 12px;
  --vt-radius-control: 10px;
  --vt-radius-chip: 999px;

  /* ── Elevación ────────────────────────────────────────────────────────── */
  --vt-shadow-frame: none;
  --vt-shadow-card: 0 1px 2px rgba(16, 16, 16, .05);
  --vt-shadow-control: 0 1px 2px rgba(16, 16, 16, .10);
  --vt-shadow-control-active: 0 0 0 rgba(16, 16, 16, 0);

  /* ── Tipografía: familias ─────────────────────────────────────────────── */
  --vt-font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --vt-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --vt-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Tipografía: postura ──────────────────────────────────────────────── */
  --vt-display-weight: 800;
  --vt-display-tracking: -0.03em;
  --vt-display-transform: none;
  --vt-display-leading: 0.92;

  --vt-title-weight: 700;
  --vt-title-tracking: -0.02em;
  --vt-title-transform: none;

  --vt-label-weight: 600;            /* eyebrows, etiquetas de métrica       */
  --vt-label-tracking: 0.12em;
  --vt-label-transform: uppercase;
  --vt-label-font: var(--vt-font-body);

  --vt-amount-font: var(--vt-font-display);
  --vt-amount-weight: 800;
  --vt-amount-tracking: -0.02em;

  /* ── Escala. El núcleo fija los clamp(); el tema los multiplica ───────── */
  --vt-scale-display: 1;             /* tamaño del número de ticket          */
  --vt-scale-title: 1;
  --vt-scale-text: 1;

  /* ── Ritmo ────────────────────────────────────────────────────────────── */
  --vt-gap: 12px;                    /* separación entre bloques             */
  --vt-pad-frame: 20px;              /* aire interior del marco del ticket   */
  --vt-pad-card: 14px;
  --vt-frame-inset: 0px;             /* margen del ticket contra el lienzo   */

  /* ── Personalidad / capa decorativa ───────────────────────────────────── */
  --vt-ornament-opacity: 1;
  --vt-texture: none;                /* background-image de grano/trama      */
  --vt-hero-align: left;             /* left | center                        */
  --vt-divider-display: block;       /* none para temas sin separadores      */

  /* ── Marca del comercio  [TENANT] ─────────────────────────────────────── */
  --vt-brand-ink: var(--vt-ink);     /* color del nombre/logo del comercio   */
  --vt-brand-size: 1;
}