/* Tokens de diseño — paleta, tipografía, espaciado. Fuente de verdad: Brand Book HERLLES. */
@layer tokens {
:root {
  /* Color — paleta HERLLES */
  --c-durazno: #F3C4A5;
  --c-durazno-claro: #F1CFB3;
  --c-arena: #E8DCC8;
  --c-rojo: #B24A3E;
  --c-gris: #2E3A48;
  --c-crema: #FBF6EF;
  --c-papel: #F3EBDF;
  --c-piedra: #C7BDB0;
  --c-grafito: #5D6672;
  --c-tinta: #1E2530;

  /* Tipografía — familias */
  --f-serif: 'EB Garamond', Georgia, serif;
  --f-sans: 'Manrope', system-ui, 'Segoe UI', Roboto, sans-serif;

  /* Tipografía — escala (< 1024 px) */
  --fs-h1: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  --fs-h2: 1.75rem;
  --fs-h3: 1.25rem;
  --fs-hero-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-btn: .9375rem;
  --fs-eyebrow: .75rem;
  --fs-meta: .875rem;
  --fs-min: .8125rem;

  /* Espaciado */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-12: 6rem;

  /* Forma y contenedor */
  --radius-ui: 2px;
  --radius-view: 4px;
  --container: 75rem;
}

@media (min-width: 1024px) {
  :root {
    --fs-h2: 2.5rem;
    --fs-h3: 1.5rem;
    --fs-hero-lead: 1.25rem;
    --fs-body: 1.0625rem;
  }
}
}