/* ==========================================================================
   BASE — lo que comparten TODAS las páginas de katero.app.
   Identidad congelada: docs/BRAND_IDENTITY.md. Ningún color fuera de la paleta.

   POR QUÉ EXISTE ESTA CAPA. La portada y las páginas legales se sentían dos
   sitios distintos, y el diagnóstico fácil —«otra escala tipográfica»— se
   quedaba corto: `styles.css` **no tenía `@font-face`**. Las legales pedían
   Inter, el navegador no la tenía, y caían a la fuente del sistema. La
   continuidad no se rompía por matices de tamaño; se rompía porque la
   tipografía de la marca no llegaba a la mitad del sitio.

   REPARTO. Aquí viven los tokens, la fuente, el reinicio y el cuerpo de texto.
   Encima, `home.css` (la portada) y `doc.css` (privacidad, borrado, 404) ponen
   solo su maquetación. Cada HTML enlaza DOS hojas, en este orden.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* La paleta, con su nombre de marca. */
  --obsidiana: #14161F;
  --tinta: #0E1016;
  --hueso: #ECE8E0;
  --bruma: #A6A7CE;
  --indigo: #7D7BF5;
  --indigo-p: #5B59D6;
  --jade: #4F9D8B;
  --ambar: #CBA34E;
  --velo: rgba(236, 232, 224, .1);
  --velo-tinta: rgba(14, 16, 22, .14);

  /* el desfase: la proporción del isotipo (13/53 ≈ 24 %) aplicada al par */
  --desfase: clamp(2.2rem, 9vw, 4.6rem);

  /* Los mismos colores con nombre FUNCIONAL, que es como los llaman los
     documentos. Son alias a propósito: un solo sitio donde cambiar el color, y
     cada hoja lo nombra como le resulta natural. */
  --bg: var(--obsidiana);
  --bg-elev: #1A1D29;
  --ink: var(--hueso);
  --muted: var(--bruma);
  --accent: var(--indigo);
  --accent-dim: rgba(125, 123, 245, .14);
  --line: var(--velo);
  --amber: var(--ambar);

  --measure: 34rem;   /* ~65 caracteres de texto corrido */
  --col-doc: 44rem;
  --r: 20px;
}

/* Las páginas de documento respetan el modo claro del sistema; la portada es
   oscura siempre —es una pieza de marca, no un lienzo de lectura larga—, así
   que aquí solo se reasignan los nombres funcionales. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: var(--hueso);
    --bg-elev: #F5F2EB;
    --ink: var(--tinta);
    --muted: #4C4D66;          /* Bruma oscurecida para contraste AA */
    --accent: var(--indigo-p); /* Índigo profundo: regla de marca sobre claro */
    --accent-dim: rgba(91, 89, 214, .11);
    --line: var(--velo-tinta);
    --jade: #3D7D6E;
    --amber: #8A6D22;
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; }
::selection { background: var(--indigo); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }