/* Betty — tokens de diseño · v1.0.0 · approved (propietario, 30/10/2026)
   Paleta vinculante (manual 02 §3.2). Tipografía del manual 02 §3.3: Fraunces (display) + Source Sans 3 (texto/UI),
   ambas SIL OFL 1.1, variables y autoalojadas en ../fonts/. Fraunces se usa siempre con SOFT 0 y WONK 0. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-vf.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-vf-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-vf.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-vf-italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }

:root {
  /* Paleta de marca (no modificar) */
  --betty-charcoal: #35362E;
  --betty-taupe: #BDA58D;
  --betty-beige: #EADDCA;
  --betty-terracotta: #C87452;
  --betty-ivory: #F9F5EC;
  --betty-paper-white: #FFFDF9;
  --betty-terracotta-ink: #96442D;
  --betty-muted-text: #725F50;

  /* Roles semánticos */
  --betty-bg: var(--betty-ivory);
  --betty-surface: var(--betty-paper-white);
  --betty-surface-alt: var(--betty-beige);
  --betty-ink: var(--betty-charcoal);              /* 11.23:1 sobre marfil */
  --betty-ink-muted: var(--betty-muted-text);      /* 5.56:1 sobre marfil · 4.53:1 sobre beige */
  --betty-accent: var(--betty-terracotta);         /* punto, hilo, ornamento e iconos ≥3:1; nunca texto normal */
  --betty-accent-ink: var(--betty-terracotta-ink); /* texto de acento, enlaces, CTA de acento: 6.10:1 */
  --betty-line: var(--betty-taupe);                /* filetes decorativos (2.16:1) */
  --betty-line-strong: var(--betty-muted-text);    /* bordes de controles (≥3:1) */
  --betty-focus: var(--betty-terracotta-ink);
  --betty-on-dark: var(--betty-ivory);
  --betty-on-dark-muted: var(--betty-taupe);       /* 5.20:1 sobre carbón */
  --betty-charcoal-hover: #2A2B24;                 /* derivado para hover del CTA carbón */
  --betty-ink-hover: #7D3824;                      /* derivado para hover de enlaces y CTA de acento */

  /* Tipografía */
  --betty-font-serif: "Fraunces", Georgia, serif;
  --betty-font-sans: "Source Sans 3", system-ui, Arial, sans-serif;
  --betty-serif-axes: "SOFT" 0, "WONK" 0;
  --betty-type-h1: 400 clamp(3.1rem, 1.9rem + 4.6vw, 6.5rem)/1.04 var(--betty-font-serif);
  --betty-type-h2: 400 clamp(2.4rem, 1.7rem + 2.6vw, 4.5rem)/1.1 var(--betty-font-serif);
  --betty-type-h3: 500 clamp(1.6rem, 1.45rem + .5vw, 2rem)/1.2 var(--betty-font-serif);
  --betty-type-quote: italic 400 clamp(1.375rem, 1.2rem + .7vw, 1.75rem)/1.36 var(--betty-font-serif);
  --betty-type-lead: 400 clamp(1.125rem, 1.05rem + .3vw, 1.3125rem)/1.55 var(--betty-font-sans);
  --betty-type-body: 400 1.125rem/1.6 var(--betty-font-sans);
  --betty-type-ui: 400 1rem/1.5 var(--betty-font-sans);
  --betty-type-small: 400 .875rem/1.5 var(--betty-font-sans);
  --betty-type-label: 600 .8125rem/1.3 var(--betty-font-sans);
  --betty-tracking-display: -0.02em;
  --betty-tracking-label: 0.12em;

  /* Espacio (base 4) */
  --betty-space-1: 4px; --betty-space-2: 8px; --betty-space-3: 12px; --betty-space-4: 16px; --betty-space-5: 24px;
  --betty-space-6: 32px; --betty-space-7: 48px; --betty-space-8: 64px; --betty-space-9: 96px; --betty-space-10: 128px;
  --betty-measure: 64ch;

  /* Forma */
  --betty-radius-sm: 4px; --betty-radius-md: 8px; --betty-radius-lg: 14px; --betty-radius-pill: 999px;
  --betty-border: 1px solid var(--betty-line);
  --betty-shadow-paper: 0 1px 0 rgb(53 54 46 / .05), 0 12px 32px -20px rgb(53 54 46 / .38);

  /* Interacción */
  --betty-hit: 44px;
  --betty-cta-height: 48px;
}

/* Fraunces sin rasgos «wonky» ni suavizado: aplicar a todo uso serif */
/* !important: las declaraciones `font:` abreviadas reinician font-variation-settings a normal (= WONK 1 en Fraunces) */
h1, h2, h3, .betty-serif, [style*="Fraunces"] { font-variation-settings: var(--betty-serif-axes) !important; }