/* ==========================================================================
   Siety Compliance — tokens
   Ningún valor de color, tipografía, espacio, radio o movimiento se escribe
   fuera de este archivo.
   ========================================================================== */

:root {
  /* Neutros por capas */
  --bg: #ffffff;
  --bg-alt: #f6f5fa;
  --surface: #ffffff;
  --surface-2: #eeebf6;
  --line: #ddd9e8;
  --line-strong: #8e88a8;

  /* Texto, tres niveles */
  --text-1: #16132a;
  --text-2: #4b4763;
  --text-3: #6b6783;

  /* Acento único: el morado del logo */
  --accent: #472f92;
  --accent-hover: #37237a;
  --accent-soft: #ece8f8;
  --on-accent: #ffffff;

  /* Superficie oscura */
  --ink: #120e26;
  --ink-2: #1c1736;
  --ink-line: #2e2850;
  --ink-line-strong: #6e6896;
  --on-ink-1: #ffffff;
  --on-ink-2: #bdb8d4;
  --on-ink-3: #a49ec2;
  --accent-on-ink: #b7a6f2;

  /* Estado de error en formularios (no es acento) */
  --danger: #b3261e;

  /* Alias que cambian dentro de .on-ink */
  --link: var(--accent);
  --focus: var(--accent);

  /* Tipografía */
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-display: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 2.3vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-display: 1.04;
  --lh-h2: 1.1;
  --lh-h3: 1.2;
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --lh-small: 1.5;

  --track-display: -0.025em;
  --track-h2: -0.02em;
  --track-h3: -0.01em;
  --track-label: 0.14em;

  --measure: 38ch;
  --measure-read: 46ch;

  /* Espacio */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --space-section: clamp(4rem, 2.5rem + 7vw, 8.5rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --container: 75rem;

  /* Forma */
  --radius-s: 4px;
  --radius-m: 8px;
  --border: 1px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover: 0.2s;
  --dur-enter: 0.7s;

  /* Medidas de interfaz */
  --tap: 2.75rem;
  --control-h: 3rem;
  --header-h: 4.5rem;
}

@media (max-width: 47.99em) {
  :root {
    --header-h: 4rem;
  }
}

/* Dentro de una superficie oscura los mismos nombres apuntan a otros valores */
.on-ink {
  --text-1: var(--on-ink-1);
  --text-2: var(--on-ink-2);
  --text-3: var(--on-ink-3);
  --line: var(--ink-line);
  --line-strong: var(--ink-line-strong);
  --surface: var(--ink-2);
  --surface-2: var(--ink-line);
  --link: var(--accent-on-ink);
  --focus: var(--accent-on-ink);
}