/* ============================================================
   FdezGROWTH — Design tokens
   Origen: design system "fdezgrowth-design-system" (Claude Design).
   La pizarra se parte recta: sin sombras, sin degradados.
   ============================================================ */

/* --- Tipografía: Archivo (Omnibus-Type, SIL OFL), variable ---
   Servida desde este mismo dominio: ninguna petición sale a terceros y la
   IP del visitante no llega a Google. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Familias ---------- */
  --font-core: "Archivo", "Archivo Variable", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-core);
  --font-body: var(--font-core);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Color base: escala pizarra + acento único ---------- */
  --tinta: #12161C;
  --pizarra-900: #1C222B;
  --pizarra-700: #3A434F;
  --pizarra-500: #5A646F;
  --pizarra-300: #98A2AE;
  --pizarra-150: #D5DAE0;
  --pizarra-50:  #EDEFF2;
  --papel:  #FBFBFA;
  --blanco: #FFFFFF;
  --acento: #E4572E;
  --acento-oscuro: #C6431D;
  --acento-suave:  #FCEDE8;

  /* ---------- Alias semánticos (consumir estos) ---------- */
  --surface-page:      var(--papel);
  --surface-alt:       var(--pizarra-50);
  --surface-card:      var(--blanco);
  --surface-inverse:   var(--tinta);
  --surface-highlight: var(--acento-suave);

  --text-body:      var(--tinta);
  --text-strong:    var(--tinta);
  --text-emphasis:  var(--pizarra-700);
  --text-secondary: var(--pizarra-500);
  --text-muted:     var(--pizarra-300);
  --text-on-inverse:           var(--blanco);
  --text-on-inverse-secondary: var(--pizarra-300);
  --text-on-accent: var(--blanco);
  --text-accent:    var(--acento);
  --text-error:     var(--acento-oscuro);

  --border-subtle:  var(--pizarra-150);
  --border-strong:  var(--pizarra-300);
  --border-inverse: var(--pizarra-700);

  --action-bg:       var(--acento);
  --action-bg-hover: var(--acento-oscuro);
  --action-fg:       var(--blanco);
  --action-secondary-border:       var(--pizarra-300);
  --action-secondary-border-hover: var(--tinta);

  /* ---------- Forma ---------- */
  --radio-control: 4px;
  --radio-tarjeta: 8px;
  --linea: 1px;
  --borde: 1px solid var(--pizarra-150);
  --borde-control: 1px solid var(--pizarra-300);
  --foco: 2px solid var(--acento);
  --foco-offset: 3px;
  --transicion: 150ms ease-out;

  /* ---------- Espaciado: múltiplos de 4, sin intermedios ---------- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-6: 24px;  --e-8: 32px;  --e-12: 48px; --e-16: 64px;
  --e-24: 96px; --e-32: 128px;
  --contenedor-max: 1120px;
  --canal: clamp(1.25rem, 5vw, 3rem);
  --seccion-y: clamp(4rem, 8vw, 8rem);

  /* ---------- Tipografía: cuatro papeles ---------- */
  --peso-display: 700;
  --peso-titulo:  700;
  --peso-cuerpo:  400;
  --peso-medio:   500;
  --peso-etiqueta:500;
  --anchura-normal: 100;
  --anchura-etiqueta: 115;
  --track-display:  -0.035em;
  --track-titulo:   -0.02em;
  --track-cuerpo:    0em;
  --track-etiqueta:  0.14em;

  --texto-hero:      clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
  --texto-h2:        clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  --texto-h3:        clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --texto-entradilla:clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  --texto-cuerpo:   17px;
  --texto-pequeno:  15px;
  --texto-etiqueta: 12px;

  --lh-hero: 1.06;
  --lh-h2: 1.12;
  --lh-h3: 1.25;
  --lh-entradilla: 1.5;
  --lh-cuerpo: 1.65;
  --lh-pequeno: 1.6;
  --lh-etiqueta: 1.4;

  --medida-lectura: 34rem;
}