/* =========================================================
   ESTUDIO ESGB · DESIGN TOKENS
   Estética: refinada, boutique, mucho whitespace.
   Inspiración: theratio + oraxis.
========================================================= */

:root {
  /* ---------- COLOR ---------- */
  --color-bg:          #fbfaf7;   /* off-white cálido refinado */
  --color-bg-soft:     #f1ede4;   /* arena suave para alt sections */
  --color-bg-card:     #ffffff;
  --color-bg-dark:     #16221a;   /* verde casi negro para secciones invertidas */

  --color-fg:          #16221a;   /* texto principal — verde muy oscuro, refinado */
  --color-fg-soft:     #2d4a35;   /* verde medio para hovers/acentos */
  --color-fg-mute:     #8a8d83;   /* gris cálido para texto secundario */

  --color-line:        #e0ddd2;
  --color-line-soft:   #ece9e0;

  --color-accent:      #2d4a35;   /* verde medio, más visible que el fg */
  --color-accent-fg:   #fbfaf7;
  --color-accent-soft: #b8d4bc;   /* verde claro / sage para acentos sobre imagen */

  /* ---------- TIPOGRAFÍA — una sola familia, refinada ---------- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Escala fluida — más refinada (no exagerada) */
  --fs-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm:   clamp(0.82rem, 0.8rem + 0.12vw, 0.9rem);
  --fs-base: clamp(0.95rem, 0.93rem + 0.15vw, 1.05rem);
  --fs-lg:   clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-xl:   clamp(1.35rem, 1.25rem + 0.5vw, 1.6rem);
  --fs-2xl:  clamp(1.7rem, 1.5rem + 1vw, 2.25rem);
  --fs-3xl:  clamp(2.1rem, 1.7rem + 1.6vw, 3rem);
  --fs-4xl:  clamp(2.6rem, 2rem + 2.5vw, 4rem);
  --fs-hero: clamp(2.8rem, 2rem + 4.5vw, 6rem);

  /* Pesos */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  /* Line-height */
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* Letter-spacing */
  --ls-tighter: -0.035em;
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-wider:    0.18em;

  /* ---------- SPACING ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-11:  160px;
  --sp-12:  200px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad-y: clamp(5rem, 10vw, 10rem);
  --header-h:      80px;

  /* ---------- RADIOS ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-sm:  0 1px 2px rgba(22, 34, 26, 0.04);
  --shadow-md:  0 8px 28px rgba(22, 34, 26, 0.06);
  --shadow-lg:  0 24px 64px rgba(22, 34, 26, 0.10);

  /* ---------- TRANSICIONES ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:      200ms var(--ease-out);
  --t-base:      400ms var(--ease-out);
  --t-slow:      700ms var(--ease-out);

  /* ---------- Z-INDEX ---------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;
}