/* ============================================================
   tokens.css — VARIABLES COMPARTIDAS DEL SITIO
   ============================================================
   ÚNICO objetivo: que el inicio y las 22 páginas estáticas usen
   los MISMOS colores, radios y sombras.

   Antes cada lado tenía su propio :root con valores distintos
   (--r-xl 22px vs 20px, --r-md 12px vs 10px, sombras diferentes),
   y por eso las tarjetas y botones se veían sutilmente distintos
   al pasar de una página a otra.

   ⚠️  Este archivo declara SÓLO variables. No define componentes
   (.card, .kicker, .btn, h1…): cada hoja ya tiene los suyos y
   pisarlos desde acá rompía el diseño de las páginas.
   ============================================================ */

:root{
  /* ---------- Superficies ---------- */
  --bg:        #F5FAF0;
  --bg2:       #EBF4E2;
  --surface:   #FFFFFF;
  --surface2:  #F9FDF6;

  /* ---------- Ancla oscura (footer, bandas de contraste) ---------- */
  --ink:       #0D2810;
  --ink2:      #16351B;

  /* ---------- Texto ---------- */
  --text:      #1A1A1A;
  --muted:     #5C5C5C;

  /* ---------- Marca ---------- */
  --primary:   #3A7820;
  --primary2:  #1E5411;
  --warm:      #C4A070;
  --warm2:     #8F6E40;

  --ring:      rgba(22,44,12,.10);

  /* ---------- Radios (idénticos a los del inicio) ---------- */
  --r-sm:      8px;
  --r-md:      12px;
  --r-lg:      16px;
  --r-xl:      22px;

  /* ---------- Sombras (idénticas a las del inicio) ---------- */
  --sh-1:      0 12px 26px rgba(22,44,12,.10);
  --sh-2:      0 26px 60px rgba(22,44,12,.16);

  /* ---------- Espaciado ---------- */
  --s-1: 6px;  --s-2: 10px; --s-3: 16px; --s-4: 22px;
  --s-5: 32px; --s-6: 44px; --s-7: 64px; --s-8: 96px;

  /* ---------- Tipografía ---------- */
  --font-body:    'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-heading: 'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* ---------- Alias para subpaginas.css ----------
     Esa hoja usa nombres --c-*. Apuntan a los mismos valores para
     que no haya dos paletas distintas conviviendo. */
  --c-bg:        #F5FAF0;
  --c-surface:   #FFFFFF;
  --c-text:      #1A1A1A;
  --c-muted:     #5C5C5C;
  --c-primary:   #3A7820;
  --c-secondary: #5C8A3C;
  --c-accent:    #8AAF5C;
}