/* Guía FastAPI · base: reinicio, tipografía del cuerpo y foco visible.
 * Consume los tokens de css/tokens.css. Ningún color literal vive aquí. */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sdk-bg-primary);
  color: var(--sdk-text-primary);
  font-family: var(--sdk-font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.65;
  overflow-wrap: break-word;   /* solo evita desbordes; no parte palabras a la mitad */
}

/* Un identificador largo —`MediaQuery.of(context).size.width`— no tiene ningun
   punto de corte natural, y `break-word` no reduce el ancho MINIMO del bloque
   que lo contiene: solo lo parte si ya no cabe en la linea. En una columna de
   grid, ese minimo empuja la pagina entera y produce scroll horizontal a
   320 px. `anywhere` si lo reduce.

   `:not(pre) > code` deja fuera los bloques de codigo: ahi `pre-wrap` ya parte
   por espacios y romper por cualquier caracter destrozaria la indentacion. */
:not(pre) > code,
.checklist li,
.exercise li,
.table-wrap td,
.table-wrap th {
  overflow-wrap: anywhere;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--sdk-accent);
  color: var(--g-on-accent);
  padding: var(--sdk-spacing-sm) var(--sdk-spacing-md);
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--sdk-accent);
  outline-offset: 2px;
}