/**
 * Imagine Solución — Design tokens.
 * Dirección de arte "Dos puntos, un camino" (docs/design/direccion-arte.html).
 * Única fuente de verdad de color, tipo, espacio y forma. No usar valores sueltos en main.css.
 */

/* ---------- Fuentes autoalojadas (RGPD) ---------- */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-v26-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-v26-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-v26-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-v26-latin-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-v4-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-v4-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-v4-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color ---------- */
  --color-papel: #FAF8F5;        /* fondo base */
  --color-arena: #F3EFE9;        /* secciones alternas */
  --color-velo: #EFF1F9;         /* bloques de confianza */
  --color-lavanda: #A9BCE2;      /* acento secundario, solo decorativo */
  --color-lavanda-honda: #7E93C9;/* focos, detalles interactivos */
  --color-ciruela: #6C4E8C;      /* CTAs y énfasis: "aquí hay una decisión" */
  --color-ciruela-honda: #523A70;/* hover de CTAs */
  --color-tinta: #2D2A32;        /* texto principal y footer */
  --color-tinta-suave: #5C5764;  /* texto secundario */
  --color-bruma: #E2DDE3;        /* bordes y hairlines */
  --color-blanco: #FFFFFF;
  --color-error: #C05B5B;

  /* ---------- Tipografía ---------- */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;

  --text-h1: clamp(2.75rem, 5vw + 1.25rem, 5.5rem);       /* 44–88 */
  --text-h2: clamp(1.875rem, 2.2vw + 1rem, 2.875rem);     /* 30–46 */
  --text-h3: 1.1875rem;                                   /* 19 */
  --text-lead: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem); /* 17–20 */
  --text-body: 1.0625rem;                                 /* 17 */
  --text-small: 0.875rem;                                 /* 14 */
  --text-micro: 0.8125rem;                                /* 13 */
  --text-label: 0.78125rem;                               /* 12.5, siempre uppercase+tracking */

  --leading-tight: 1.05;
  --leading-heading: 1.12;
  --leading-body: 1.65;

  --tracking-label: 0.14em;
  --tracking-display: -0.015em;

  /* ---------- Espacio ---------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-seccion: clamp(4rem, 11vh, 8rem);   /* respiración entre secciones */
  --space-lateral: clamp(1.25rem, 5vw, 4rem); /* márgenes del lienzo */

  /* ---------- Forma y elevación ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --sombra-flotante: 0 24px 60px -30px rgba(45, 42, 50, 0.25);

  /* ---------- Layout ---------- */
  --ancho-lienzo: 1080px;
  --ancho-prosa: 62ch;

  /* ---------- Movimiento ---------- */
  --transicion: 0.18s ease;
  --hilo-duracion: 3s;
}