/* ============================================================
   Biokinessis — sistema de diseño
   Hallmark · genre: editorial · theme: paleta de marca en OKLCH
   (análogo de catálogo: Garden)

   Los valores OKLCH son conversiones exactas de los hex originales
   de la marca — el color no se desvió, solo cambió de notación.
   El hex de origen queda anotado en cada línea.

   Regla: ningún color ni tipografía se declara inline en la página.
   Todo pasa por un token de aquí. Si hace falta un valor nuevo,
   se agrega aquí primero y luego se referencia.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --color-leaf:       oklch(32.2% 0.048 190.8);  /* #0e3b39 */
  --color-leaf-900:   oklch(26.5% 0.038 192.3);  /* #0a2b2a */
  --color-leaf-700:   oklch(33.6% 0.050 191.0);  /* #103f3d */
  --color-teal:       oklch(58.9% 0.095 188.5);  /* #1f8f88 */
  --color-teal-600:   oklch(51.2% 0.084 187.3);  /* #16766f */
  --color-sage:       oklch(79.2% 0.051 142.4);  /* #a9c4a6 */
  --color-sage-soft:  oklch(88.0% 0.032 139.4);  /* #cdddc9 */
  --color-olive:      oklch(56.6% 0.051 125.5);  /* #6f7c5b */
  --color-cream:      oklch(97.0% 0.007 124.4);  /* #f4f6f1 */
  --color-cream-2:    oklch(98.9% 0.004 121.6);  /* #fbfcf9 */
  --color-ink:        oklch(23.2% 0.016 182.4);  /* #15201e */

  /* WhatsApp — color de plataforma, no de marca propia */
  --color-wa:         oklch(76.1% 0.201 149.7);  /* #25d366 */
  --color-wa-hover:   oklch(69.5% 0.185 149.6);  /* #1fbb59 */
  --color-wa-ink:     oklch(31.1% 0.074 153.3);  /* #073b1e */

  /* Roles semánticos */
  --color-paper:      var(--color-cream);
  --color-paper-2:    var(--color-cream-2);
  --color-accent:     var(--color-teal-600);
  --color-accent-2:   var(--color-teal);
  --color-focus:      var(--color-teal-600);
  --color-ink-2:      oklch(23.2% 0.016 182.4 / 0.74);
  /* 0.58 daba 4.03:1 sobre crema — por debajo de AA para texto chico. 0.70 pasa. */
  --color-ink-3:      oklch(23.2% 0.016 182.4 / 0.70);
  /* Teal oscurecido: el acento normal da 3.84:1 sobre la banda sage-soft */
  --color-accent-on-tint: oklch(43% 0.078 187.3);
  --color-rule:       oklch(32.2% 0.048 190.8 / 0.16);
  --color-rule-2:     oklch(32.2% 0.048 190.8 / 0.30);
  /* Sobre fondo oscuro */
  --color-on-dark:    var(--color-cream-2);
  --color-on-dark-2:  oklch(98.9% 0.004 121.6 / 0.80);
  --color-rule-dark:  oklch(79.2% 0.051 142.4 / 0.28);

  /* ---- Tipografía ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --text-xs:  0.78rem;
  --text-sm:  0.9rem;
  --text-md:  1rem;
  --text-lg:  1.1rem;
  --text-xl:  1.35rem;
  --text-2xl: clamp(1.5rem, 2.4vw, 1.9rem);
  --text-3xl: clamp(1.9rem, 3.4vw, 2.6rem);
  --text-display-s: clamp(2rem, 4.4vw, 3.1rem);
  --text-display:   clamp(2.5rem, 6.2vw, 4.6rem);

  /* ---- Espaciado — escala de 4pt ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Ritmo vertical — a propósito NO uniforme entre secciones */
  --sec-pad:    clamp(4rem, 8vw, 6.5rem);
  --sec-pad-lg: clamp(5rem, 11vw, 9rem);
  --sec-pad-sm: clamp(2.75rem, 5vw, 4rem);

  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 1180px;
  --measure-prose: 62ch;

  /* ---- Reglas y radios ---- */
  --rule-hair: 1px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* ---- Movimiento ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 90ms;
  --dur-short:   220ms;
  --dur-mid:     560ms;

  /* ---- Capas ---- */
  --z-depth: 0;
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 40;
  --z-overlay: 60;
}