/* Sistema de diseño de AutoContratos · base.
 *
 * Lo que toda superficie hereda antes de dibujar nada: la caja, el cuerpo,
 * los títulos, los enlaces, el foco, la selección y el respeto a quien pidió
 * menos movimiento. Vive en la capa `base`, la más baja, así que la hoja de
 * cada superficie (capa `superficie`) siempre puede afinar sin `!important`
 * ni pelear por orden de carga.
 *
 * No hay aquí ni un color ni una medida escritos a mano: todo es un token
 * de `tokens.css`.
 */

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

  html {
    -webkit-text-size-adjust: 100%;
    color-scheme: light;
    scrollbar-color: var(--color-borde-control) transparent;
  }

  :root[data-tema="oscuro"] { color-scheme: dark; }

  html, body { height: 100%; }

  body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: var(--t-3);
    line-height: var(--interlineado-cuerpo);
    color: var(--color-texto);
    background: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    line-height: var(--interlineado-titulos);
    text-wrap: balance;
  }

  h1 { font-size: var(--t-6); }
  h2 { font-size: var(--t-5); }
  h3 { font-size: var(--t-4); }
  h4 { font-size: var(--t-3); }

  a {
    color: var(--color-enlace);
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
  }

  a:hover { color: var(--color-enlace-hover); }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  code, kbd, samp, pre { font-family: var(--fuente-mono); }

  table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

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

  ::selection {
    background: var(--color-marca-fondo);
    color: var(--color-texto);
  }

  [hidden] { display: none !important; }

  /* Quien pidió menos movimiento conserva los cambios de estado: sólo se
   * acortan las duraciones, no se borran las transiciones. El spinner queda
   * fuera porque `componentes.css` le da su propia versión sin giro (pulso). */
  @media (prefers-reduced-motion: reduce) {
    *:not(.c-spinner), *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }
}