/*
 * marca: copia de campus_dc:marca/base.css. GENERADO: no se edita a mano.
 * Se cambia en campus_dc y se copia aquí con: node scripts/marca-copiar.mjs
 * @ref        origin/main
 * @commit     92cf6768ba75685ad20e02191c2a2d82a15df5df
 * @huella     sha256:c061d0fad03b17a9237521f4f58216c4f07b1105fa00755b812835fa9c8d2b29
 */

/**
 * marca/base.css — GENERADO por campus_dc. No se edita a mano.
 *
 * Las reglas globales de MARCA de campus, en su `@layer base`: el radio 0
 * (`!important`, gana a toda utilidad `rounded-*`), la tipografía de la
 * página y de los titulares, y el foco de teclado en Coral. Leen tokens de
 * `tokens.css`. No son clases: alcanzan a TODO el documento que las importe.
 * Cada consumidor decide si las importa y dónde, o si las acota (el Ensayador,
 * a su cromo). Por qué viajan aparte: campus_dc:scripts/marca/base.mjs.
 *
 * Se cambia en la hoja de campus_dc y se regenera allí con
 *   npm run marca:exportar
 * Un consumidor no lo edita: lo copia con marca/copiar.mjs, que lo firma con
 * una huella.
 *
 * @fuente     los @layer base de app/_estilos/base-de-marca.css
 */

@layer base {
  * {
    /* SYNC DS §5.1: border-radius 0 es una invariante absoluta. Es la única
       regla que la pone: gana a toda utilidad `rounded-*` y al CSS de rutas y
       landings, porque un `!important` en capa gana a cualquiera fuera de
       capa o en una capa posterior. */
    border-radius: 0 !important;
  }
  html {
    /* SYNC DS §3.3: la fuente base del campus es Helvetica Neue/system. */
    font-family: var(--font-body);
  }
  body {
    /* SYNC DS §3.3: evita convertir párrafos y UI densa en display Gobold. */
    font-family: var(--font-body);
    letter-spacing: 0;
    text-rendering: geometricPrecision;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    /* SYNC DS §3.3: titulares en Gobold Bold. H2 y menores a -1px. */
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: var(--tracking-display-sm);
    text-transform: uppercase;
  }
  /* SYNC DS §3.3: el H1 (y el hero) a -2px. */
  h1 {
    letter-spacing: var(--tracking-display);
  }
  /* SYNC DS §5.5/§8: el foco de TECLADO de toda la app. Sin esta regla se
     pintaba el anillo azul del navegador, un color fuera de la paleta. Coral y
     no Índigo: es el `--ring` de la app y se lee sobre Papel Y sobre la tinta
     de las barras invertidas (3,55:1). Ningún componente lo sustituye por un anillo de `box-shadow`
     (`ring-*`): §8.1 lo prohíbe como foco, porque desaparece en el modo de
     alto contraste de Windows. */
  :focus-visible {
    outline: 2px solid var(--c-coral);
    outline-offset: 2px;
  }
  /* El color del anillo va puesto de antemano en todo elemento, y el foco solo
     enciende el trazo. Tailwind 4 incluye `outline-color` en `transition` y
     `transition-colors`: sin esto, en un control que las lleva el anillo
     aparece fundiéndose del color del texto al Coral. Sin trazo, el color no
     pinta nada. */
  * {
    outline-color: var(--c-coral);
  }
  /* SYNC DS §5.5: el placeholder en el nivel `muted` (5,36:1), nunca gris.
     `disabled` es solo para controles deshabilitados (§8.2). */
  input::placeholder,
  textarea::placeholder {
    color: var(--c-text-muted);
  }
  /* SYNC DS §5.11: la selección de texto, una sola regla global. Coral al 22 %
     y texto Carbón (10,42:1), nunca el azul del navegador. */
  ::selection {
    background-color: rgb(var(--c-coral-rgb) / 0.22);
    color: var(--c-text-strong);
  }
  /* Con el dedo, todo campo de texto a 16 px: por debajo, iOS amplía la página
     al tocarlo. `!important` en capa, como el radio de arriba, para ganar a
     cualquier utilidad de tamaño sin tocar cada campo; por eso también deja en
     16 px un campo que se quiera más grande. En px y no en rem porque el umbral
     de iOS es en px. Con ratón no hay zoom y cada campo conserva su tamaño. */
  @media (pointer: coarse) {
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"]),
    textarea,
    select {
      font-size: 16px !important;
    }
  }
}