/* RobinBook · tokens
   Colores muestreados por moda de pixel sobre zonas planas de
   _base/references/home-desktop.png. Ver docs/asset-sources.md. */

/* ---------- Tipografias auto-alojadas (OFL) ---------- */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Crete Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/creteround-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Crete Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/creteround-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  /* Color */
  --crema: #f2f0e4;
  --tinta: #262808;
  --tinta-suave: #5c5d46;
  --tinta-tenue: #8b8c78;
  --azul: #8ec8f6;
  --amarillo: #fce09d;
  --lavanda: #d5c2ef;
  --lavanda-suave: #e3d9e9;   /* dias sin eventos del calendario */
  --lima: #d1df2f;
  --durazno: #ffedde;
  --amarillo-calido: #ffde95; /* banda «Momentos que ya compartimos» */
  --naranja: #f0561d;
  --filete: rgba(38, 40, 8, 0.16);

  /* Tipografia */
  /* El diseño pide VC Henrietta, pero el paquete que hay en fonts/ son ficheros
     «-Trial» con licencia «Personal Use Only»: no se puede publicar con ellos.
     Se usa Crete Round (TypeTogether, OFL), que es la libre mas cercana en
     carácter —serifas suaves, bastones redondos— y en metrica (-3 %). Cuando
     haya licencia de Henrietta, esta linea y los dos @font-face de arriba son
     lo unico que hay que cambiar. Ver docs/asset-sources.md. */
  --fuente-titulo: 'Crete Round', 'Iowan Old Style', Georgia, serif;
  --fuente-texto: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala serif recalibrada: Crete Round compone un 26 % mas ancha que
     Instrument Serif a igual cuerpo, asi que todos los tamanos serif bajan por
     el factor 0,797. Ese factor sale de las dos unicas capturas medibles (el H1
     del blog, 410 px de tinta, y el de la politica, 386); ver
     docs/visual-review.md. */
  /* Los topes en rem se cambian por el techo global de --uv: los cuatro pasos
     se congelaban entre 1444 y 1520 px de ventana, asi que a 2560 un H2 seguia
     en 46 px dentro de una seccion de 2396. El coeficiente vw no se toca: la
     escala a 1200/1440 es identica a la calibrada. */
  --paso-h2: max(1.8rem, calc(3.19 * var(--uv)));
  --paso-h2-sans: max(1.5rem, calc(2.35 * var(--uv)));
  --paso-h3: max(1.375rem, calc(1.8 * var(--uv)));
  --paso-h4: max(1.0625rem, calc(1.25 * var(--uv)));
  --paso-base: 1rem;
  --paso-s: 0.9375rem;
  --paso-xs: 0.8125rem;
  --paso-xxs: 0.6875rem;

  --alto-titulo: 1.08;
  --alto-texto: 1.62;

  /* Espacio */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 2.5rem;
  --espacio-8: 3rem;
  --espacio-9: 4rem;
  --espacio-10: 5rem;
  --espacio-11: 6.5rem;
  --espacio-12: 8rem;

  /* Ritmo vertical entre secciones */
  --seccion: max(3.5rem, calc(6.5 * var(--uv)));

  /* Formas */
  --radio-s: 0.625rem;
  --radio-m: 1rem;
  --radio-l: 1.5rem;
  --radio-pill: 999px;

  /* Layout */
  /* El margen lateral es un PORCENTAJE, sin tope: 3,2 % por lado es lo que
     miden las referencias (la tinta arranca en x=38-45 sobre frames de 1200 px,
     y el margen derecho mide 32-47), o sea un contenido del 93,6 % de la
     ventana. Antes esto era `clamp(1rem, 3.2vw, 2.75rem)` y, junto con un
     `--ancho-max: 1360px`, dejaba el sitio en una columna de 1360 con 280 px de
     margen a 1920 y 1040 a 3440: el 39,5 % de la pantalla. El minimo de 20 px
     es el margen movil del encargo. */
  --gutter: max(1.25rem, 3.2vw);

  /* Unidad de composicion: 1 % de la ventana, congelada en 2350 px --la ventana
     en la que el contenedor alcanza los 2200 px de techo acordados--. Sustituye
     a los topes en rem de los clamp de escala: `clamp(min, X vw, tope)` pasa a
     ser `max(min, calc(X * var(--uv)))`, que crece con la misma proporcion de
     Figma y se estabiliza arriba en vez de congelarse en 1440. El techo se
     mueve desde aqui, en un solo sitio. */
  --uv: min(1vw, 23.5px);

  /* Movimiento */
  --transicion: 180ms ease;
}

/* ---------- Reset y base ---------- */

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

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

/* clip y no hidden: hidden rompe position:sticky en los ancestros */
html,
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--paso-base);
  line-height: var(--alto-texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

img { height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 2px;
}

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