/* Tokens del estilo AYOCIN (ver DESIGN.md). La página los usa todos;
   las escenas del panel solo heredan las dos familias tipográficas. */
:root {
  --color-porcelain-cream: #fcf6ec;
  --color-espresso-ink: #2e2521;
  --color-espresso-card: #2c2722;
  --color-parchment-border: #d3ccc3;
  --color-stone-haze: #cec1b2;
  --color-ivory-sand: #f4e8d7;
  --color-daylight-wash: #fdf0c7;
  --color-peach-wash: #fdc6b3;
  --gradient-sunlit-stone: linear-gradient(266.47deg, #c4b3a3 41.41%, #9f8e7a 97.58%);

  /* Systemia no es libre: Manrope es el sustituto que nombra DESIGN.md. */
  --font-systemia: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-azeret-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Fuera de AYOCIN: la serif que pueden elegir las escenas del panel.
     Dos cortes de la misma familia: el titular para los numerales grandes,
     el de texto — con menos contraste — para todo lo que mide menos de 40 px. */
  --font-serif-titular: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
  --font-serif-texto: 'DM Serif Text', 'Iowan Old Style', Georgia, serif;

  --text-caption: 12px;
  --text-body: 14px;
  --text-heading: 36px;
  --text-display: 60px;
  --text-metric-display: 170px;
  --text-masthead-display: 240px;

  --radius-cards: 10px;
  --radius-buttons: 20px;

  --section-gap: 30px;
  --card-padding: 20px;
  --element-gap: 20px;
}