/* ============================================================
   VETERINARIA ANDRADE · tokens.css
   Paleta derivada del logo: guacamaya escarlata sobre rama, cruz
   médica azul marino, hojas verdes.

   TEMA: selva de día. Fondos claros, luz alta, mucho aire —
   como el sotobosque a media mañana, no la selva de noche.
   El verde #63963c es la base de marca (indicado por el cliente).
   ============================================================ */

:root {

  /* ── VERDES · base de marca ───────────────────────────── */
  --verde:         #63963C;  /* verde Andrade, el de marca      */
  --verde-claro:   #7FB855;  /* hover, brillos                  */
  --verde-vivo:    #8FD44E;  /* brotes, luz sobre hoja          */
  --verde-medio:   #477026;  /* 4.7:1 sobre claro-3 · enlaces   */
  --verde-hondo:   #2C4A1B;  /* 9.4:1 · titulares, énfasis      */

  /* ── FONDOS · luz filtrada entre hojas ────────────────── */
  /* Escalones muy sutiles: el ojo no los nota pero separan las
     secciones sin necesitar líneas divisorias. */
  --claro:         #F4FAEC;  /* fondo base, blanco verdoso      */
  --claro-2:       #E9F4D9;  /* sección alterna                 */
  --claro-3:       #DCEDC4;  /* sección alterna 2               */
  --panel:         #FFFFFF;  /* tarjetas                        */
  --panel-alto:    #FAFEF3;  /* tarjeta elevada                 */

  /* ── ACENTOS · del plumaje de la guacamaya ────────────── */
  --oro:           #E09612;  /* dorado del ala (oscurecido para
                                que pase contraste sobre claro) */
  --oro-brillo:    #F5B324;  /* dorado puro, solo para rellenos */
  --escarlata:     #D32C21;  /* rojo del pecho · SOLO urgencias */
  --azul:          #1B4A8F;  /* azul marino del logo            */
  --azul-claro:    #2E6FC4;  /* azul del ala                    */

  /* ── NEUTROS ──────────────────────────────────────────── */
  --tinta:         #1A2B12;  /* 13.4:1 · texto principal        */
  --tinta-2:       #4A5F3E;  /*  6.7:1 · texto secundario       */
  --tinta-3:       #57694C;  /*  4.8:1 · metadatos, etiquetas   */
  --linea:         rgba(44, 74, 27, .14);   /* bordes sutiles   */
  --linea-fuerte:  rgba(44, 74, 27, .28);

  /* ── SEMÁNTICOS ───────────────────────────────────────── */
  --fondo:            var(--claro);
  --texto:            var(--tinta);
  --texto-2:          var(--tinta-2);
  --texto-3:          var(--tinta-3);
  --cta-fondo:        var(--verde);
  --cta-fondo-hover:  var(--verde-medio);
  --cta-texto:        #FFFFFF;
  --foco:             var(--verde-medio);

  /* ── TIPOGRAFÍA ───────────────────────────────────────── */
  --f-display: 'Fraunces', 'Fraunces respaldo', Georgia, serif;
  --f-texto:   'Karla', 'Karla respaldo', system-ui, -apple-system, sans-serif;
  --fraunces-ejes: 'SOFT' 30, 'WONK' 1;

  --t-0: 0.75rem;                                          /* 12       */
  --t-1: clamp(0.8125rem, 0.795rem + 0.09vw, 0.875rem);    /* 13 → 14  */
  --t-2: clamp(1rem,      0.982rem + 0.09vw, 1.0625rem);   /* 16 → 17  */
  --t-3: clamp(1.0625rem, 1.045rem + 0.09vw, 1.125rem);    /* 17 → 18  */
  --t-4: clamp(1.25rem,   1.143rem + 0.54vw, 1.625rem);    /* 20 → 26  */
  --t-5: clamp(1.5rem,    1.25rem + 1.25vw, 2.25rem);      /* 24 → 36  */
  --t-6: clamp(1.875rem,  1.42rem + 2.27vw, 3.25rem);      /* 30 → 52  */
  --t-7: clamp(2.25rem,   1.45rem + 4vw,    5rem);         /* 36 → 80  */
  /* El h1 se topa en 76px: a más, los CTA caen fuera del pliegue.
     Y el mínimo es 32px: a 40 ocupaba 5 líneas en un iPhone SE.
     La conversión manda sobre el tamaño del titular. */
  --t-8: clamp(2rem,      1.083rem + 4.07vw, 4.75rem);     /* 32 → 76  */

  /* Los rótulos de sección tenían 12px fijos y no se leían. */
  --t-eyebrow: clamp(0.8125rem, 0.767rem + 0.23vw, 0.9375rem); /* 13 → 15 */

  --t-cuerpo: var(--t-3);

  --lh-display: 1.02;
  --lh-titulo:  1.12;
  --lh-ui:      1.35;
  --lh-cuerpo:  1.7;

  --ls-display: -0.03em;
  --ls-titulo:  -0.015em;
  --ls-eyebrow:  0.16em;

  --w-normal: 400;
  --w-medio:  500;
  --w-fuerte: 600;
  --w-negro:  700;

  --medida: 62ch;

  /* ── ESPACIADO ────────────────────────────────────────── */
  --e-3xs: 0.25rem;
  --e-2xs: 0.5rem;
  --e-xs:  0.75rem;
  --e-s:   1rem;
  --e-m:   1.5rem;
  --e-l:   2rem;
  --e-xl:  clamp(2.5rem, 2.214rem + 1.43vw, 3.5rem);
  --e-2xl: clamp(3.5rem, 2.929rem + 2.86vw, 5.5rem);
  --e-3xl: clamp(5rem,   3.93rem + 5.36vw,  8.75rem);
  --e-4xl: clamp(7rem,   5.21rem + 8.93vw, 13rem);

  --seccion-y: var(--e-3xl);

  --contenedor:       min(100% - clamp(1rem, 6vw, 7rem), 1280px);
  --contenedor-texto: min(100% - clamp(1rem, 6vw, 7rem), 68ch);
  --contenedor-ancho: min(100% - clamp(1rem, 3vw, 3rem), 1600px);

  --tap-min: 44px;
  --cta-alto: 56px;

  /* ── RADIOS ───────────────────────────────────────────── */
  --r-xs: 6px;
  --r-s:  12px;
  --r-m:  18px;
  --r-l:  24px;
  --r-xl: 32px;
  --r-pill: 999px;
  /* Firma: esquina que se cierra en punta, como el nacimiento
     de una hoja. Ata cada superficie al motivo botánico. */
  --r-hoja:     28px 28px 28px 6px;
  --r-hoja-inv: 28px 28px 6px 28px;

  /* ── SOMBRAS · tintadas en verde, nunca gris neutro ─────
     Sobre fondo claro las sombras tienen que ser MUY suaves o
     el diseño se ensucia. Verde profundo a baja opacidad. */
  --s-1: 0 1px 2px rgba(44,74,27,.06), 0 2px 8px rgba(44,74,27,.05);
  --s-2: 0 2px 6px rgba(44,74,27,.07), 0 10px 28px rgba(44,74,27,.08);
  --s-3: 0 6px 16px rgba(44,74,27,.10), 0 20px 48px rgba(44,74,27,.12);
  --brillo-verde: 0 6px 20px rgba(99,150,60,.32);
  --brillo-oro:   0 6px 20px rgba(224,150,18,.28);

  /* ── MOVIMIENTO ───────────────────────────────────────── */
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --dur-4: 1000ms;
  --dur-5: 1800ms;

  --ease-salida:  cubic-bezier(.16, 1, .3, 1);
  --ease-suave:   cubic-bezier(.4, 0, .2, 1);
  --ease-hoja:    cubic-bezier(.34, 1.3, .64, 1);

  /* ── CAPAS ────────────────────────────────────────────── */
  --z-fondo:      0;
  --z-contenido:  2;
  --z-header:    50;
  --z-flotante:  60;
  --z-menu:      70;
  --z-visor:    200;  /* por encima de todo: es modal */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: .01ms; --dur-2: .01ms; --dur-3: .01ms;
    --dur-4: .01ms; --dur-5: .01ms;
  }
}