/* ==========================================================================
   VARIABLES.CSS
   Sistema de diseño — Charol Vanessa Sánchez Avendaño · Psicóloga
   Paleta: blanco cálido, beige, lavanda, gris cálido, azul grisáceo.
   Tipografía: Cormorant Garamond (display) + Jost (cuerpo / UI).
   ========================================================================== */

:root {

  /* ---------- Color · Base ---------- */
  --color-bg:             #FBF8F4;   /* blanco cálido */
  --color-bg-alt:         #F4EEE4;   /* beige muy claro */
  --color-bg-deep:        #EFE7DA;   /* beige acentuado, para bloques */
  --color-surface:        #FFFFFF;   /* tarjetas / superficies */

  /* ---------- Color · Acento ---------- */
  --color-lavender-soft:  #D9D2ED;   /* lavanda muy suave, fondos */
  --color-lavender:       #B6A9DA;   /* lavanda principal */
  --color-lavender-deep:  #8C7CBD;   /* lavanda profunda, hover / focus */
  --color-blue-gray:      #8791A6;   /* azul grisáceo, apoyo */

  /* ---------- Color · Texto ---------- */
  --color-text:           #2C2A27;   /* texto principal, casi negro cálido */
  --color-text-soft:      #5C574E;   /* texto secundario */
  --color-text-mute:      #8A8478;   /* gris cálido, texto terciario */
  --color-text-inverse:   #FBF8F4;   /* texto sobre fondos oscuros */

  /* ---------- Color · Línea / Borde ---------- */
  --color-line:           rgba(44, 42, 39, 0.10);
  --color-line-soft:      rgba(44, 42, 39, 0.06);
  --color-line-inverse:   rgba(251, 248, 244, 0.24);

  /* ---------- Cristal / Frosted Glass ---------- */
  --glass-bg:             rgba(255, 255, 255, 0.55);
  --glass-bg-deep:        rgba(44, 42, 39, 0.35);
  --glass-blur:           18px;

  /* ---------- Tipografía ---------- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --fs-h1:   clamp(2.6rem, 5.2vw, 5.4rem);
  --fs-h2:   clamp(2rem, 3.6vw, 3.4rem);
  --fs-h3:   clamp(1.4rem, 2.2vw, 1.9rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.12;
  --lh-snug:  1.32;
  --lh-body:  1.7;

  --ls-eyebrow: 0.18em;
  --ls-wide:    0.06em;

  /* ---------- Espaciado (escala 8pt + editorial) ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.85rem;
  --space-sm:  1.25rem;
  --space-md:  2rem;
  --space-lg:  3.25rem;
  --space-xl:  5.5rem;
  --space-2xl: 8.5rem;
  --space-3xl: 12rem;

  --section-pad-y: clamp(4.5rem, 9vw, 9rem);
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* ---------- Bordes / Radios ---------- */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-full: 999px;

  /* ---------- Sombras (muy suaves) ---------- */
  --shadow-xs: 0 1px 2px rgba(44, 42, 39, 0.04);
  --shadow-sm: 0 8px 24px -12px rgba(44, 42, 39, 0.10);
  --shadow-md: 0 20px 48px -16px rgba(44, 42, 39, 0.14);
  --shadow-lg: 0 32px 80px -24px rgba(44, 42, 39, 0.18);
  --shadow-lavender: 0 20px 44px -16px rgba(140, 124, 189, 0.35);

  /* ---------- Transiciones ---------- */
  --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   240ms;
  --dur-base:   480ms;
  --dur-slow:   900ms;
  --dur-breath: 6400ms;

  /* ---------- Z-index ---------- */
  --z-header: 100;
  --z-cursor: 200;
  --z-modal:  300;
}

/* Reduce el ritmo tipográfico general en pantallas muy grandes (4K) */
@media (min-width: 1920px) {
  :root {
    --container-max: 1440px;
  }
}