/* ==========================================================================
   tokens.css - Capa 1: fuente unica de verdad (design tokens)
   Fase 1 del refactor de front: tokens EXISTENTES movidos tal cual, sin
   cambiar valores. Las escalas (space/radius/shadow/text) llegan en Fase 2.
   Baseline: docs/baseline-front/  |  Rollback: tag pre-refactor-front-20260829
   ========================================================================== */
:root {
  /* --- Base (colores, superficie, texto, sombra) --- */
  --bg: #f4f7fb;
  --card: #ffffff;
  --surface: #ffffff;
  --text: #162033;
  --muted: #667085;
  --line: #e6ebf2;
  --primary: #123f8c;
  --primary-2: #1f5dbb;
  --soft-blue: #eef5ff;
  --success: #0f7b45;
  --warning: #9a6100;
  --danger: #b42318;
  --shadow: var(--shadow-md); /* compat: apunta a la escala de elevacion */
  font-family: Arial, Helvetica, sans-serif;

  /* --- Branding TOTAL QC / acentos de usuario --- */
  --tqc-header: #071B3A;
  --tqc-header-2: #0B2D5C;
  --tqc-yellow: #FFC000;
  --user-accent: #23B5D3;
  --user-accent-2: #FFC000;
  --user-accent-text: #071B3A;

  /* --- Escala de RADIOS (Fase 2). Antes habia 15 valores sueltos; se
     consolidan en pasos. Cada radio suelto se mapea al paso mas cercano. --- */
  --radius-xs: 6px;    /* <= 4,6,7px  (detalles minimos) */
  --radius-sm: 8px;    /* <= 8,9,10px (chips, inputs, botones pequenos) */
  --radius-md: 12px;   /* <= 11,12,13,14px (botones, controles) */
  --radius-lg: 16px;   /* <= 16,18px (tarjetas) */
  --radius-xl: 20px;   /* <= 20,22px (tarjetas grandes) */
  --radius-2xl: 24px;  /* <= 24px (heroes / cabeceras) */
  --radius-pill: 999px;/* pastilla / totalmente redondeado */

  /* --- Escala de ELEVACION (Fase 2). Sombras de caida unificadas con tinte
     azul de marca. Solo para elevacion generica (tarjetas, paneles, popovers);
     los glows de color e insets decorativos NO usan esta escala. --- */
  --shadow-sm: 0 1px 2px rgba(7, 27, 58, .06), 0 1px 3px rgba(7, 27, 58, .05);
  --shadow-md: 0 10px 24px rgba(7, 27, 58, .09);   /* tarjetas (reemplaza --shadow) */
  --shadow-lg: 0 18px 42px rgba(7, 27, 58, .12);   /* elevado / hover */
  --shadow-xl: 0 26px 60px rgba(7, 27, 58, .16);   /* modales / dropdowns */

  /* --- Escala de ESPACIADO (Fase 2). Base 4px. Estandar para paddings/margins
     /gaps nuevos y para la Fase 5. Retrofit del CSS existente = gradual. --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* --- Escala TIPOGRAFICA (Fase 2). Base 14px (la app usa 13/14). Estandar
     para tamanos nuevos y Fase 5. --- */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;   /* base */
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
}