/* ══════════════════════════════════════════════════════════════════════
   Tokens — Punto de Venta by OnLab · POS-SAAS-0A.2

   Dos capas estrictamente separadas:

   1. IDENTIDAD ESTRUCTURAL ONLAB (aquí): grises claros, azul profundo,
      petróleo, aqua (interacción), blanco, tipografía, espaciado, radios,
      sombras, tamaños táctiles. Identidad cromática OnLab 2026 (sin crema,
      beige ni café; el verde del negocio es SOLO estado de éxito).

   2. IDENTIDAD DEL NEGOCIO (--tenant-*): NO se declara aquí. La escribe
      core/theme.js desde js/config/tenant.js. Este archivo solo crea
      alias semánticos (--c-primary…) que apuntan a --tenant-*.

   Reglas de contraste (WCAG AA, texto normal ≥ 4.5):
   · blanco NUNCA sobre --tenant-primary (coral), --tenant-accent ni --tenant-secondary,
     ni sobre aqua: sobre ellos el texto va en azul profundo (--c-on-primary);
   · texto sobre ámbar siempre en azul profundo;
   · con texto se usan las variantes -strong / -ink.
   Verificación: pruebas automáticas de contraste.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/figtree-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/figtree-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/figtree-latin-700-normal.woff2") format("woff2");
}

:root {
  /* ── 1 · Identidad estructural OnLab ── */
  --c-bg:            #F3F5F7;   /* gris claro principal: fondo */
  --c-ink:           #102033;   /* texto oscuro: texto, títulos, iconos (15.1:1 sobre el fondo) */
  --c-ink-2:         #425466;   /* texto secundario (≥ 6.3:1 sobre blanco y los tres grises) */
  --c-surface:       #FFFFFF;
  --c-on-fill:       #FFFFFF;   /* texto e iconos sobre rellenos oscuros (azul profundo, verde ink) */
  --c-on-primary:    #0B1F3B;   /* azul profundo: texto e iconos sobre coral y aqua (5.48:1 y 9.31:1) */
  --c-surface-2:     #EEF2F5;   /* gris claro secundario: superficies intermedias, fondos de apoyo */
  --c-surface-3:     #E2E8EE;   /* gris de bordes: pistas y divisores */
  --c-line:          #E2E8EE;   /* bordes y divisores */
  --c-line-strong:   #C4C9D0;   /* azul profundo 24 % */
  --c-overlay:       rgba(11, 31, 59, .45);

  /* Interacción y tecnología (aqua): enlaces, foco, gráficas, indicadores */
  --c-interact:        #00D4FF;   /* relleno: siempre con texto azul profundo (9.31:1) */
  --c-interact-strong: #049AC0;   /* borde e icono interactivo sobre claro (≥ 3:1) */
  --c-interact-ink:    #066F90;   /* enlaces y texto interactivo (≥ 4.62:1 sobre blanco y los tres grises) */

  /* Petróleo: navegación, selección y estados activos */
  --c-petrol:          #0F6B78;   /* relleno con texto blanco (6.19:1); borde, icono y texto sobre claro (≥ 5.2:1) */
  --c-petrol-hover:    #0D5B66;   /* blanco encima: 7.76:1 */
  --c-on-petrol:       #FFFFFF;
  --c-on-petrol-2:     #D4E4E7;   /* texto secundario sobre petróleo (4.73:1) */
  --c-selected-bg:     #EEF2F5;   /* fondo de tarjeta seleccionada (gris claro secundario) */

  /* Error real (única aparición de rojo) */
  --c-danger:        #B42318;
  --c-danger-soft:   #FCE3E0;

  /* ── 2 · Alias semánticos → identidad del negocio (theme.js) ── */
  --c-primary:          var(--tenant-primary);          /* relleno, borde, icono grande */
  --c-primary-strong:   var(--tenant-primary-strong);   /* botón con texto blanco */
  --c-primary-ink:      var(--tenant-primary-ink);      /* coral como texto */
  --c-primary-soft:     var(--tenant-primary-soft);     /* coral 12 % sobre blanco */
  --c-secondary:        var(--tenant-secondary);        /* verde: SOLO estado de éxito (listo, pagado, completado) */
  --c-secondary-ink:    var(--tenant-secondary-ink);
  --c-secondary-soft:   var(--tenant-secondary-soft);   /* verde 10 % */
  --c-accent:           var(--tenant-accent);           /* ámbar: SIEMPRE con texto azul profundo */
  --c-accent-ink:       var(--tenant-accent-ink);
  --c-accent-soft:      var(--tenant-accent-soft);      /* ámbar 12 % */
  --c-demo-soft:        var(--tenant-accent-strong-soft); /* ámbar 32 % */
  --c-primary-hover:    color-mix(in srgb, var(--c-primary-strong) 94%, #000); /* hover del CTA (azul profundo ≥ 4.5:1) */

  /* Foco: anillo aqua ink + contorno azul profundo (visible sobre grises claros, blanco, coral y aqua) */
  --focus-ring: 0 0 0 2px var(--c-surface), 0 0 0 5px var(--c-interact-ink), 0 0 0 6px var(--c-ink);

  /* ── Tipografía ── */
  --font: "Figtree", system-ui, "Segoe UI", Roboto, sans-serif;
  --fs-xs:   0.8125rem;  /* 13 px · solo metadatos */
  --fs-sm:   0.875rem;   /* 14 px */
  --fs-md:   1rem;       /* 16 px · base */
  --fs-lg:   1.125rem;   /* 18 px · POS y Cocina */
  --fs-xl:   1.375rem;   /* 22 px */
  --fs-2xl:  1.75rem;    /* 28 px · H1 */
  --fs-3xl:  2.25rem;    /* 36 px · KPI */
  --fs-4xl:  2.75rem;    /* 44 px · display */
  --lh:      1.5;

  /* ── Espaciado (base 4) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* ── Radios y sombras ── */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 31, 59, .05), 0 2px 8px rgba(11, 31, 59, .05);
  --shadow-2: 0 6px 20px rgba(11, 31, 59, .10);
  --shadow-3: 0 20px 48px rgba(11, 31, 59, .22);

  /* ── Tamaños táctiles ── */
  --touch:    44px;   /* mínimo general */
  --touch-lg: 48px;   /* formularios del cliente */
  --touch-xl: 56px;   /* POS y Cocina */

  /* ── Layout ── */
  --topbar-h: 68px;
  --sidebar-w: 248px;
  --sidebar-rail: 76px;
  --content-max: 1240px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: 140ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}