/* =============================================================================
   pos-tokens.css · FUENTE DE VERDAD VISUAL DEL REDISEÑO POS (Manolito)
   -----------------------------------------------------------------------------
   F0 del plan 04E. ADITIVO Y SEGURO: solo define custom properties + 1 utilidad.
   No aplica estilos a nada por sí mismo → no cambia el render actual del sistema.

   Arquitectura de tokens (3 niveles):
     1) PRIMITIVOS  (--c-*, --sp-*, --fs-*)   → paleta y escalas crudas
     2) SEMÁNTICOS  (--pos-*)                 → rol/propósito (lo que consume la UI)
     3) COMPONENTE  (en cada componente)      → derivan de semánticos, nunca de hex

   REGLA: en componentes nuevos del POS se consume SOLO var(--pos-*). Prohibido
   hex crudo y !important (ver lint en 04E §4). El CSS legacy queda aislado en
   @layer legacy para que lo nuevo gane la cascada sin pelear especificidad.

   Orden de capas recomendado en el host (_Host.cshtml / App):
     @layer legacy, tokens, base, components, utilities;
   ============================================================================= */

@layer tokens {
  :root {
    /* ---- 1) PRIMITIVOS · superficies (oscuro real, elevación por aclarado) ---- */
    --c-bg-0:#0b0c10; --c-bg-1:#13151b; --c-bg-2:#191c23; --c-bg-3:#21252e; --c-bg-4:#2b303a; --c-bg-5:#363c48;
    --c-line:rgba(255,255,255,.06); --c-line-2:rgba(255,255,255,.11); --c-line-3:rgba(255,255,255,.16);
    /* texto (rampa de grises para jerarquía con 3 palancas) */
    --c-fg-0:#f6f8fb; --c-fg-1:#c9cfda; --c-fg-2:#8a93a4; --c-fg-3:#5a6273; --c-fg-4:#454c5a;
    /* marca (identidad / acción primaria — NUNCA carga estado)
       ROJO de marca = crimson del logo (toro). Muestreado del PNG oficial
       (#c20a29 mediano) y redondeado a #c8102e — coincide con la identidad
       roja/negra/blanca/dorada. brand-2 = realce vivo; press = sombra. */
    --c-brand:#c8102e; --c-brand-2:#e63148; --c-brand-press:#8f0a20;
    --c-brand-soft:rgba(200,16,46,.13); --c-brand-ring:rgba(200,16,46,.34);
    /* semánticos crudos */
    --c-ok:#3ddc91; --c-ok-soft:rgba(61,220,145,.12); --c-ok-bd:rgba(61,220,145,.30);
    --c-warn:#f7b53e; --c-warn-soft:rgba(247,181,62,.12); --c-warn-bd:rgba(247,181,62,.30);
    --c-bad:#ff6470; --c-bad-soft:rgba(255,100,112,.12); --c-bad-bd:rgba(255,100,112,.30);
    --c-info:#5aa6ff; --c-info-soft:rgba(90,166,255,.12); --c-info-bd:rgba(90,166,255,.30);
    --c-gold:#fbbf24; --c-gold-soft:rgba(251,191,36,.12);
    --c-purple:#a78bfa; --c-purple-soft:rgba(167,139,250,.13);

    /* ---- 1) PRIMITIVOS · escala de espaciado (base 16, múltiplos de 2/4/8) ---- */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;
    /* radios */
    --r-xs:7px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
    /* tipografía */
    --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;
    --ff-num:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
    --fs-cap:11px; --fs-sm:12.5px; --fs-body:14px; --fs-title:15.5px; --fs-h2:20px; --fs-display:42px;
    --fw-reg:400; --fw-med:500; --fw-sb:600; --fw-bold:700; --fw-black:800;
    /* sombras (en oscuro la elevación es por color; la sombra es discreta) */
    --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 10px 30px rgba(0,0,0,.45); --sh-pop:0 20px 50px rgba(0,0,0,.6);
    --hl:inset 0 1px 0 rgba(255,255,255,.045);
    /* motion */
    --e:cubic-bezier(.4,0,.2,1); --e-spring:cubic-bezier(.34,1.4,.5,1);
    --t-fast:130ms var(--e); --t:180ms var(--e); --t-slow:300ms var(--e-spring);
    /* z-index (jerarquía única, sin números mágicos) */
    --z-sticky:50; --z-fab:55; --z-cvf:60; --z-modal:100; --z-toast:130;

    /* ---- 2) SEMÁNTICOS · lo que consume la UI del POS ---- */
    --pos-bg:var(--c-bg-0);               /* fondo app */
    --pos-surface:var(--c-bg-1);          /* columna / panel */
    --pos-surface-2:var(--c-bg-2);        /* card */
    --pos-surface-3:var(--c-bg-3);        /* hover / elevado */
    --pos-surface-4:var(--c-bg-4);        /* input / highest */
    --pos-border:var(--c-line); --pos-border-strong:var(--c-line-2);
    --pos-text:var(--c-fg-0); --pos-text-muted:var(--c-fg-2); --pos-text-faint:var(--c-fg-3);
    --pos-primary:var(--c-brand); --pos-primary-press:var(--c-brand-press);
    --pos-primary-soft:var(--c-brand-soft); --pos-primary-ring:var(--c-brand-ring);
    /* estados (SIEMPRE acompañados de ícono+texto en la UI — WCAG 1.4.1) */
    --pos-success:var(--c-ok); --pos-success-soft:var(--c-ok-soft);
    --pos-warning:var(--c-warn); --pos-warning-soft:var(--c-warn-soft);
    --pos-danger:var(--c-bad); --pos-danger-soft:var(--c-bad-soft);
    --pos-info:var(--c-info); --pos-info-soft:var(--c-info-soft);
    /* dinero (entra/sale) — semántico, jamás solo color */
    --pos-money-in:var(--c-ok); --pos-money-out:var(--c-bad);
    /* loyalty / jubilado */
    --pos-loyalty:var(--c-gold); --pos-loyalty-soft:var(--c-gold-soft);
  }

  /* Utilidad para precios/totales: cifras tabulares alineables (no saltan en vivo). */
  .pos-num {
    font-family:var(--ff-num);
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
    letter-spacing:-.02em;
  }
}

/* -----------------------------------------------------------------------------
   NOTA DE MIGRACIÓN (04E):
   - Las 12 hojas pos-v*.css / *-premium.css se retiran progresivamente (F5),
     reemplazando valores hardcodeados por var(--pos-*).
   - Tema claro: agregar un bloque [data-pos-theme="light"] que re-apunte los
     semánticos a primitivos claros; los componentes no cambian (consumen --pos-*).
   ----------------------------------------------------------------------------- */