/* =====================================================================
   variables.css — Fadoquin Design Tokens
   Paleta cerrada por brief: Amarillo Mostaza / Blanco / Negro.
   Toda la UI deriva exclusivamente de estas variables.
   ===================================================================== */

:root {
  /* --- Colores oficiales Fadoquin --- */
  --color-negro: #000000;           /* Negro RGB (0,0,0) */
  --color-primario: #FF4500;        /* Rojo RGB (255,69,0) */
  --color-secundario: #FF8C00;      /* Naranja RGB (255,140,0) */
  --color-gris-oficial: #D3D3D3;    /* Gris RGB (211,211,211) */

  /* Compatibilidad con estilos existentes — naranja como color base de acento */
  --color-mostaza:        var(--color-secundario);
  --color-mostaza-fuerte: #e07800;
  --color-mostaza-suave:  #fff3d6;
  --color-blanco:         #FFFFFF;

  --linea-sutil:   rgba(0, 0, 0, 0.10);
  --linea-media:   rgba(0, 0, 0, 0.20);
  --sombra-tarjeta: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --sombra-tarjeta-hover: 0 4px 10px rgba(0,0,0,.08), 0 18px 36px rgba(0,0,0,.14);

  /* --- Tipografía: display industrial + body neutro + mono para datos/SKU --- */
  --fuente-display: 'Archivo Black', 'Arial Black', sans-serif;
  --fuente-cuerpo:  'Work Sans', 'Segoe UI', sans-serif;
  --fuente-dato:    'JetBrains Mono', 'Courier New', monospace;

  /* --- Layout --- */
  --radio-tarjeta: 4px;
  --ancho-sidebar: 268px;
  --alto-header: 72px;
  --contenedor-max: 1360px;

  /* --- Movimiento --- */
  --ease-suave: cubic-bezier(.4, 0, .2, 1);
  --dur-rapida: 160ms;
  --dur-media: 260ms;
  --dur-lenta: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--color-negro);
  background: var(--color-blanco);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-negro);
  outline-offset: 2px;
}