/* ============================================================
   REMAQ — Design tokens
   Paleta pensada para transmitir "seguro y profesional" (pedido
   explícito del CEO, sección 3.3 del diseño): azul acero oscuro
   como color de marca/confianza, con acentos claros de estado
   (éxito/alerta/peligro) para reportes y alertas de stock/cartera.
   Mobile-first: todo el sistema arranca desde el tamaño móvil.
   ============================================================ */

:root {
  /* Marca / confianza */
  --rq-azul-900: #0b1d33;
  --rq-azul-800: #11294a;
  --rq-azul-700: #173b66;
  --rq-azul-600: #1f4f85;
  --rq-azul-500: #2b66a8;
  --rq-azul-100: #e3ecf5;

  /* Neutros */
  --rq-gris-900: #1a1d21;
  --rq-gris-700: #3f454d;
  --rq-gris-500: #6b7280;
  --rq-gris-300: #d1d5db;
  --rq-gris-100: #f3f4f6;
  --rq-blanco: #ffffff;

  /* Estado (reportes, alertas, badges de estado de negocio) */
  --rq-exito: #1a7f45;
  --rq-exito-bg: #e4f6ea;
  --rq-alerta: #a8650f;
  --rq-alerta-bg: #fdf1e0;
  --rq-peligro: #b42318;
  --rq-peligro-bg: #fdeceb;
  --rq-info: #1f4f85;
  --rq-info-bg: #e3ecf5;

  /* Tipografía */
  --rq-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rq-fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Espaciado (escala de 4px) */
  --rq-space-1: 4px;
  --rq-space-2: 8px;
  --rq-space-3: 12px;
  --rq-space-4: 16px;
  --rq-space-5: 24px;
  --rq-space-6: 32px;
  --rq-space-8: 48px;

  /* Radios y sombras */
  --rq-radio: 8px;
  --rq-radio-sm: 4px;
  --rq-sombra-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --rq-sombra-2: 0 4px 8px rgba(16, 24, 40, 0.1), 0 2px 4px rgba(16, 24, 40, 0.06);

  /* Layout */
  --rq-nav-ancho: 240px;
  --rq-topbar-alto: 56px;
  --rq-contenido-max: 1200px;

  /* Semánticos (lo que el resto del CSS/JS debe usar) */
  --rq-color-marca: var(--rq-azul-700);
  --rq-color-marca-hover: var(--rq-azul-800);
  --rq-color-texto: var(--rq-gris-900);
  --rq-color-texto-secundario: var(--rq-gris-500);
  --rq-color-borde: var(--rq-gris-300);
  --rq-color-fondo: var(--rq-gris-100);
  --rq-color-superficie: var(--rq-blanco);
}