/* ============================================================
   GENERADO por src/tokens/build-puente-css.py — no editar.
   Traduce los nombres del manual a los presets de theme.json.
   ============================================================ */

:root{
  /* Color (BRAND.md §4) */
  --bg-base: var(--wp--preset--color--bg-base);
  --ink: var(--wp--preset--color--ink);
  --ink-banda: var(--wp--preset--color--ink-banda);
  --accent-action: var(--wp--preset--color--accent-action);
  --accent-decor: var(--wp--preset--color--accent-decor);
  --calm: var(--wp--preset--color--calm);
  --calm-claro: var(--wp--preset--color--calm-claro);
  --surface: var(--wp--preset--color--surface);
  --papel: var(--wp--preset--color--papel);

  /* Derivados de --ink */
  --texto-soft:  color-mix(in srgb, var(--ink) 75%, var(--bg-base));
  --texto-muted: color-mix(in srgb, var(--ink) 62%, var(--bg-base));
  --borde-color: color-mix(in srgb, var(--ink) 14%, transparent);
  --borde-hairline: 1px;

  /* Tipografía (BRAND.md §3) */
  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);
  --text-xs: var(--wp--preset--font-size--xs);
  --text-sm: var(--wp--preset--font-size--sm);
  --text-base: var(--wp--preset--font-size--base);
  --text-lg: var(--wp--preset--font-size--lg);
  --text-xl: var(--wp--preset--font-size--xl);
  --text-2xl: var(--wp--preset--font-size--xxl);
  --text-3xl: var(--wp--preset--font-size--xxxl);
  --text-4xl: var(--wp--preset--font-size--display);
  --lh-prosa: 1.7;
  --lh-titular: 1.15;
  --lh-ui: 1.4;
  --measure-prosa: 27em;
  --measure-entradilla: 28em;
  --measure-titular: 16em;

  /* Espaciado */
  --space-1: var(--wp--preset--spacing--1);
  --space-2: var(--wp--preset--spacing--2);
  --space-3: var(--wp--preset--spacing--3);
  --space-4: var(--wp--preset--spacing--4);
  --space-5: var(--wp--preset--spacing--5);
  --space-6: var(--wp--preset--spacing--6);
  --space-8: var(--wp--preset--spacing--8);
  --space-12: var(--wp--preset--spacing--12);
  --space-16: var(--wp--preset--spacing--16);
  --space-24: var(--wp--preset--spacing--24);
  --space-32: var(--wp--preset--spacing--32);
  --section-movil: 64px;
  --section-tablet: 96px;
  --section-escritorio: 128px;

  /* Layout, radio y movimiento */
  --max-contenido: 1180px;
  --max-prosa: 680px;
  --margen-movil: 20px;
  --margen-tablet: 40px;
  --margen-escritorio: 64px;
  --gutter-movil: 16px;
  --gutter-tablet: 24px;
  --gutter-escritorio: 32px;

  /* Alias responsivos: la plantilla escribe --margen, no el breakpoint.
     Arrancan en móvil y suben en los media queries de abajo. */
  --margen: 20px;
  --gutter: 16px;
  --section: 64px;
  --radio-none: 0px;
  --radio-sm: 2px;
  --radio-md: 4px;
  --radio-pill: 999px;
  --dur-rapida: 150ms;
  --dur-normal: 250ms;
  --dur-lenta: 400ms;
  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
}

@media (min-width: 600px){
  :root{
    --margen: 40px;
    --gutter: 24px;
    --section: 96px;
  }
}

@media (min-width: 1200px){
  :root{
    --margen: 64px;
    --gutter: 32px;
    --section: 128px;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}