/* Tokens de Pulso Py para el sitio público. Copia de docs/10-DISENO.md, sección 2.
   Es idéntica a admin/src/styles/tokens.css y a functions/src/sitio/tokens.ts:
   la prueba functions/src/test/tokens.test.ts falla si se desincronizan.
   En el código se usan SIEMPRE los alias semánticos, nunca los valores. */
:root {
  /* === Paleta base === */
  --color-signal-yellow: #ffc500;
  --color-folio-black: #000000;
  --color-newsprint-cream: #fdfcf3;
  --color-broadsheet-white: #ffffff;
  --color-margin-white: #fdfbe4;
  --color-pull-quote-gray: #e7e7e7;
  --color-rule-gray: #d9d9d9;
  --color-caption-gray: #6e6e6e;
  --color-mute-gray: #b3b3b3;
  --color-charcoal: #211d1c;

  /* === Alias semánticos — USAR ESTOS === */
  --color-accent: var(--color-signal-yellow);
  --color-text: var(--color-folio-black);
  --color-text-2: var(--color-caption-gray);
  --color-text-3: var(--color-mute-gray);
  --color-canvas: var(--color-newsprint-cream);
  --color-surface: var(--color-broadsheet-white);
  --color-surface-warm: var(--color-margin-white);
  --color-surface-sunk: var(--color-pull-quote-gray);
  --color-rule: var(--color-rule-gray);

  /* === Estados (solo en mensajes de formulario) === */
  --color-error: #b3261e;
  --color-success: #1d6b3f;

  /* === Tipografía === */
  --font-editorial: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-caption: 13px;
  --leading-caption: 1.2;
  --tracking-caption: 0.65px;
  --text-body: 16px;
  --leading-body: 1.38;
  --tracking-body: 0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.3;
  --tracking-subheading: 0.18px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.4px;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --tracking-heading: -0.48px;
  --text-heading-lg: 28px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.56px;
  --text-heading-xl: 32px;
  --leading-heading-xl: 1.15;
  --tracking-heading-xl: -0.64px;
  --text-display: 40px;
  --leading-display: 1;
  --tracking-display: -0.8px;

  --tracking-eyebrow: 0.075em;

  /* === Espaciado (base 4px) === */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-80: 80px;

  /* === Layout === */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 16px;
  --element-gap: 8px;

  /* === Radios === */
  --radius-nav: 0px;
  --radius-tags: 0px;
  --radius-buttons: 0px;
  --radius-cards: 8px;
}