/* ==========================================================================
   Elements Ink — Design tokens
   Paleta, tipografía, espaciado y medidas compartidas por todo el sitio.
   Cambiar un valor aquí lo actualiza en todas las páginas.
   ========================================================================== */

/* Fuentes autoalojadas (licencia SIL OFL, ver /assets/fonts/OFL-DMSans.txt y OFL-InstrumentSerif.txt).
   Solo se cargan el subconjunto latino (incluye tildes, ñ, ¿ y ¡). */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}

:root {
  /* Color — base indicada en la dirección creativa */
  --c-bg: #F8F7F4;            /* fondo principal */
  --c-surface: #FFFFFF;       /* superficies blancas */
  --c-ink: #242621;           /* texto principal / grafito */
  --c-ink-2: #6D7069;         /* texto secundario (AA sobre fondo y blanco) */
  --c-ink-2-sand: #565951;    /* texto secundario sobre arena (AA) */
  --c-olive: #68745F;         /* acento verde oliva */
  --c-olive-deep: #5A6552;    /* oliva para hover y texto sobre arena */
  --c-sand: #E8E1D6;          /* arena suave */
  --c-sand-soft: #F0EBE3;     /* arena muy suave para fondos de imagen */
  --c-line: #E4E2DC;          /* bordes discretos */
  --c-line-strong: #CFCCC4;

  /* Sobre grafito (footer) */
  --c-on-ink: #F8F7F4;
  --c-on-ink-2: #B4B8AE;

  /* Estados */
  --c-error: #9A3B2E;
  --c-focus: #68745F;

  /* Tipografía */
  --font-sans: "DM Sans", "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-md: 1.1875rem;   /* 19 */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.35vw, 1.3rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.4vw, 3.4rem);
  --fs-h1: clamp(2.75rem, 1.6rem + 4.4vw, 5.4rem);
  --fs-display: clamp(2.2rem, 1.5rem + 2.8vw, 4rem);

  --lh-tight: 1.04;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --tracking-label: 0.16em;

  /* Espaciado */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* Medidas de composición */
  --container: 1240px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --measure: 62ch;
  --measure-narrow: 46ch;
  --header-h: 76px;

  /* Bordes y radios moderados */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-pill: 999px;
  --rule: 1px solid var(--c-line);

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 620ms;

  /* Sombras discretas */
  --shadow-float: 0 6px 20px rgba(36, 38, 33, 0.18);
}

@media (max-width: 760px) {
  :root {
    --header-h: 64px;
  }
}