/* ── Tokens ───────────────────────────────────────────────────
   Los colores están en brand.css. */
:root {
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "PT Sans", ui-sans-serif, system-ui, sans-serif;

  --space-3xs: 0.125rem;  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;    --space-sm:  0.75rem;
  --space-md:  1rem;      --space-lg:  1.5rem;
  --space-xl:  2.5rem;    --space-2xl: 4rem;
  --space-3xl: 6rem;      --space-4xl: 9rem;

  --text-xs:        0.64rem;
  --text-sm:        0.8rem;
  --text-base:      1rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  --text-2xl:       2.4414rem;
  --text-display-s: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --text-display:   clamp(2.5rem, 5vw + 1rem, 6rem);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;

  --radius-sm:   2px;
  --radius-md:   8px;
  --radius-pill: 999px;

  --page-gutter: clamp(1.5rem, 5vw, 5rem);
  --max-width:   1380px;

  /* Puente con los nombres que usan las plantillas de los módulos (portada
     de homepage, banners, formularios…): así lo que pintan ellos toma los
     colores y letras de TEIMAS sin tocar sus plantillas. */
  --color-primary:         var(--color-accent);
  --color-secondary:       var(--color-ink);
  --color-heading:         var(--color-ink);
  --color-muted:           var(--color-ink-2);
  --color-border:          var(--color-rule);
  --body-background-color: var(--color-paper);
  --main-link-color:       var(--color-accent);
  --font-heading:          var(--font-display);
}

/* Colores de estado de los avisos (callouts) del editor de posts. */
:root {
  --color-success: oklch(55% .13 150);
  --color-info:    oklch(55% .12 240);
  --color-warning: oklch(70% .15 75);
  --color-error:   var(--color-accent);
}