/* ==========================================================================
   PH en Movimiento — Design tokens
   Fuente: logo oficial (valores exactos del SVG) + PDF "Alianza PHs"
   Fuentes: alojadas en el sitio (css/fuentes.css, assets/fonts/).
   ========================================================================== */

:root {
  /* ---- Color · marca (extraídos del logo) ---- */
  --ph-bosque:        #2E4F34; /* "PH", textos, footer, títulos */
  --ph-hoja:          #4C8046; /* hoja oscura, acentos verdes */
  --ph-salvia:        #8CB26E; /* hoja media */
  --ph-brote:         #C8DEAF; /* nervadura de la hoja, detalles */
  --ph-terracota:     #E07A50; /* figura, trazo subrayado, CTA */
  --ph-marron:        #966446; /* brazo/tronco de la figura */
  --ph-crema:         #F7F3E8; /* fondo base */

  /* ---- Color · apoyo (muestreados del PDF) ---- */
  --ph-oliva:         #5B6B3F; /* círculos de iconos, pastillas de número */
  --ph-terracota-prof:#C4552F; /* tarjetas/botones con texto blanco */
  --ph-salvia-tinte:  #E1E4D1; /* pincelada de fondo para citas */
  --ph-durazno-tinte: #F5D8C6; /* pincelada de fondo cálida */
  --ph-crema-clara:   #FAF6EB; /* superficies elevadas sobre crema */
  --ph-blanco:        #FFFFFF;

  /* ---- Semántica ---- */
  --color-fondo:          var(--ph-crema);
  --color-superficie:     var(--ph-crema-clara);
  --color-texto:          var(--ph-bosque);
  --color-texto-suave:    #4A6650;      /* bosque aclarado, cuerpo secundario */
  --color-titulo:         var(--ph-bosque);
  --color-acento:         var(--ph-terracota);
  --color-acento-fuerte:  var(--ph-terracota-prof);
  --color-primario:       var(--ph-bosque);
  --color-secundario:     var(--ph-hoja);
  --color-borde:          rgba(46, 79, 52, .18);
  --color-sobre-oscuro:   var(--ph-crema);

  /* ---- Tipografía ---- */
  --font-titulo:   "Montserrat", "Segoe UI", system-ui, sans-serif;      /* títulos de sección, "PH" */
  --font-cuerpo:   "Nunito Sans", "Segoe UI", system-ui, sans-serif;     /* párrafos, listas */
  --font-manuscrita-mayus: "Kalam", "Comic Sans MS", cursive;            /* subtítulos en MAYÚSCULAS a mano, "EN MOVIMIENTO" */
  --font-manuscrita: "Caveat", "Kalam", cursive;                         /* citas, lemas, firma */

  --text-xs:   .8125rem;  /* 13 */
  --text-sm:   .9375rem;  /* 15 */
  --text-base: 1.0625rem; /* 17 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.625rem;  /* 26 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3.25rem;   /* 52 */
  --text-4xl:  4.5rem;    /* 72 */

  /* ---- Espaciado (base 4) ---- */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;   --space-7: 3rem;   --space-8: 4.5rem;

  /* ---- Formas orgánicas ---- */
  --radius-sm:   .75rem;
  --radius-md:   1.5rem;
  --radius-lg:   2.25rem;
  --radius-blob: 62% 38% 55% 45% / 48% 58% 42% 52%; /* contenedores de foto/pincelada */
  --radius-pill: 999px;

  /* ---- Sombras (suaves, verdosas, nunca negras) ---- */
  --shadow-sm: 0 2px 6px rgba(46, 79, 52, .10);
  --shadow-md: 0 8px 24px rgba(46, 79, 52, .14);
  --shadow-lg: 0 18px 48px rgba(46, 79, 52, .18);

  /* ---- Movimiento ---- */
  --ease-vivo: cubic-bezier(.22, 1, .36, 1);
  --dur-rapido: 160ms;
  --dur-normal: 280ms;
}