/*
 * @workforce/ui - base.css
 * Reset minimo + defaults nativos. Requiere tokens.css cargado antes.
 * Filosofia "native-first" (skill web-accessibility): preferir semantica
 * HTML nativa (button, input, table) sobre ARIA reconstruido a mano -
 * este archivo NUNCA quita el foco nativo ni el comportamiento nativo de
 * un elemento interactivo, solo re-skinnea.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--wf-color-canvas);
  color: var(--wf-color-text);
  font-family: var(--wf-font-sans);
  font-size: var(--wf-p-font-size-14);
  line-height: var(--wf-p-line-height-normal);
  font-feature-settings: "tnum" 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Datos numericos: SIEMPRE tabular (item 1 de la orden, "tabular-nums
   para datos"). Aplicar a celdas de tabla, montos, horas. */
.wf-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* IDs, hashes, codigos de referencia. */
.wf-mono {
  font-family: var(--wf-font-mono);
  font-variant-numeric: tabular-nums;
}

.wf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Foco: SOLO visible cuando llega por teclado (:focus-visible), nunca en
   click de mouse - pero SIEMPRE visible cuando llega por teclado, sin
   excepcion, en cualquier elemento interactivo del sistema. Ver
   states-and-variants.md (skill design-system) para el spec exacto del
   ring. */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--wf-focus-ring-width) solid var(--wf-focus-ring-color);
  outline-offset: var(--wf-focus-ring-offset);
  border-radius: var(--wf-radius-sm);
}

/* prefers-reduced-motion global: cualquier transicion/animacion CSS que
   no pase por motion.js (que ya tiene su propio guard JS) queda anulada
   aqui. Ver tambien src/motion.js: gsap.matchMedia() aplica el mismo
   criterio del lado JS - esta regla cubre el lado CSS puro (hover
   transitions de components.css). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}