/* =============================================================================
   SERVINFANCIA — «MANZANA»
   tokens.css — El único archivo donde viven color, letra y espacio.
   -----------------------------------------------------------------------------
   REGLA DE ORO DE ESTE ARCHIVO
   Cada color lleva escrito al lado su relación de contraste MEDIDA con la
   fórmula oficial WCAG 2.1. Si cambia un color, hay que volver a medir.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------------
     1. COLOR — todo sale del logo
     El verde del wordmark es #0D8236 y el de la manzana dibujada es #93AC22.
     Los dos se leyeron píxel a píxel del archivo logo-servinfancia.webp.
     Ninguno se estimó a ojo.
     ------------------------------------------------------------------------ */

  --verde-marca:  #0D8236;  /* verde EXACTO del wordmark. Blanco encima 4,93:1  */
  --verde-hoja:   #93AC22;  /* verde manzana EXACTO del dibujo. Solo de FONDO   */
  --verde-render: #098A37;  /* fondo plano de la lámina 3D del inicio           */
  --verde-hondo:  #065E26;  /* superficie del inicio y del cierre. Blanco 7,96  */
  --verde-tinta:  #073F1D;  /* pie de página. Blanco encima 12,08:1            */
  --verde-humo:   #05301A;  /* sombra de la banda de fotografía                */

  --verde-texto:  #095C26;  /* el verde CUANDO ES TEXTO chico. Blanco 8,17:1    */
  --verde-claro:  #DCEBAF;  /* acento sobre verde oscuro. 5,25:1 mínimo medido  */
  --verde-papel:  #EEF4E2;  /* superficie tenue, tarjetas y realces suaves      */

  --tinta:        #14231A;  /* texto principal. Sobre blanco 16,34:1           */
  --gris:         #4F574F;  /* texto secundario. Sobre blanco 7,48:1           */
  --blanco:       #FFFFFF;
  --hueso:        #F2F5EC;  /* el fondo alterno. Tinta encima 14,82:1          */
  --linea:        #E3E8DF;  /* separadores. Decorativos, no comunican nada     */

  /* ---------------------------------------------------------------------------
     2. LETRA — una sola familia
     Inter (variable, 48 KB, subconjunto latino). Cero letras decorativas.
     La jerarquía la hacen tamaño, peso y color.
     ------------------------------------------------------------------------ */

  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;

  /* Escala. Todo en clamp(): un solo valor sirve de 360 px a 1920 px.          */
  --t-h2:      clamp(1.75rem, 4.4vw,  3rem);      /*  28 → 48 px               */
  --t-h3:      clamp(1.25rem, 2.4vw,  1.75rem);   /*  20 → 28 px               */
  --t-cifra:   clamp(2.5rem,  7.6vw,  4.25rem);   /*  40 → 68 px               */
  --t-lead:    clamp(1.0625rem, 1.9vw, 1.375rem); /*  17 → 22 px               */
  --t-body:    1.0625rem;                          /*  17 px                    */
  --t-small:   0.9375rem;                          /*  15 px  (mínimo cómodo)   */
  --t-micro:   0.8125rem;                          /*  13 px  (solo legales)    */

  --lh-tight:  1.06;
  --lh-title:  1.16;
  --lh-body:   1.72;

  /* Interletrado negativo en display: es lo que hace que un titular grande se
     lea como un objeto y no como palabras sueltas.                           */
  --ls-display: -0.032em;
  --ls-h2:      -0.028em;
  --ls-eyebrow:  0.10em;

  /* ---------------------------------------------------------------------------
     3. ESPACIO — escala de 4 px. El vacío ES la estructura (Gestalt).
     ------------------------------------------------------------------------ */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4: 1rem;
  --s-5:  1.5rem;   --s-6:  2rem;     --s-7:  2.5rem;   --s-8: 3rem;
  --s-9:  4rem;     --s-10: 5rem;     --s-11: 6.5rem;   --s-12: 8rem;

  --pad-seccion: clamp(4rem, 9vw, 8.5rem);
  --ancho:       1180px;
  --ancho-texto: 62ch;     /* 45–75 caracteres: el ojo no pierde el renglón    */

  /* ---------------------------------------------------------------------------
     4. FORMA — redondeo fuerte: tarjetas 40 px, botones píldora.
     ------------------------------------------------------------------------ */
  --r-card:  clamp(1.5rem, 3vw, 2.5rem);   /* 24 → 40 px                       */
  --r-mini:  1rem;
  --r-pill:  999px;

  --sombra-card:  0 24px 60px -28px rgba(9, 48, 26, 0.30),
                  0 2px 6px rgba(9, 48, 26, 0.04);
  --sombra-alta:  0 34px 80px -30px rgba(9, 48, 26, 0.38),
                  0 3px 10px rgba(9, 48, 26, 0.06);

  /* ---------------------------------------------------------------------------
     5. MOVIMIENTO — tres curvas, ni una más.
     ------------------------------------------------------------------------ */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entra: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sale:  cubic-bezier(0.4, 0, 1, 1);
  --dur-micro:  160ms;   /* por debajo de 400 ms el cerebro no despierta       */
  --dur-media:  340ms;
  --dur-larga:  680ms;

}