/**
 * MRCH design tokens — extraídos de mrch.com.co (Elementor + WooCommerce).
 * Usar solo estas variables en apps del proyecto Query Mrch.
 */
:root {
  /* Colores de marca */
  --mrch-color-black: #000000;
  --mrch-color-white: #ffffff;
  --mrch-color-gray-100: #f4f4f4;
  --mrch-color-gray-150: #f1f1f1;
  --mrch-color-gray-200: #eeeeee;
  --mrch-color-gray-250: #e4e4e4;
  --mrch-color-gray-900: #141414;
  --mrch-color-text: #000000;
  --mrch-color-text-muted: #7a7a7a;
  --mrch-color-border: #000000;
  --mrch-color-border-soft: #d8d8d8;
  --mrch-color-error: #cf2e2e;
  --mrch-color-error-bg: #fdeaea;

  /* Superficies (variante app_light) */
  --mrch-surface-page: var(--mrch-color-gray-100);
  --mrch-surface-card: var(--mrch-color-white);
  --mrch-surface-elevated: var(--mrch-color-gray-200);
  --mrch-surface-input: var(--mrch-color-white);
  --mrch-surface-table-head: var(--mrch-color-gray-200);
  --mrch-surface-table-row-hover: var(--mrch-color-gray-150);
  --mrch-surface-overlay: rgba(0, 0, 0, 0.45);

  /* Tipografía */
  --mrch-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mrch-font-size-xs: 0.75rem; /* 12px */
  --mrch-font-size-sm: 0.875rem; /* 14px */
  --mrch-font-size-base: 1rem; /* 16px */
  --mrch-font-size-md: 1.125rem; /* 18px */
  --mrch-font-size-lg: 1.25rem; /* 20px */
  --mrch-font-size-xl: 1.5rem; /* 24px */
  --mrch-font-size-stat: 1.75rem; /* KPIs */
  --mrch-font-weight-normal: 400;
  --mrch-font-weight-medium: 500;
  --mrch-font-weight-semibold: 600;
  --mrch-font-weight-bold: 700;
  --mrch-line-height-tight: 1;
  --mrch-line-height-base: 1.5;
  --mrch-letter-spacing-wide: 0.04em;

  /* Espaciado */
  --mrch-space-1: 0.25rem;
  --mrch-space-2: 0.5rem;
  --mrch-space-3: 0.75rem;
  --mrch-space-4: 1rem;
  --mrch-space-5: 1.25rem;
  --mrch-space-6: 1.5rem;
  --mrch-space-8: 2rem;
  --mrch-space-10: 2.5rem;
  --mrch-space-12: 3.125rem; /* ~50px frecuente en sitio */

  /* Radios (mrch.com.co: 10px UI, 15px cards, 20px header) */
  --mrch-radius-sm: 10px;
  --mrch-radius-md: 15px;
  --mrch-radius-lg: 20px;
  --mrch-radius-pill: 999px;

  /* Layout */
  --mrch-container-max: 1140px;

  /* Sombras */
  --mrch-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --mrch-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --mrch-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.15);

  /* Transiciones */
  --mrch-transition-fast: 150ms ease;
}