/* ============================================================
   Studio Quattro — Typography
   Founders Grotesk (grotesca) + Alga (serif editorial)
   "La convivencia entre una grotesca moderna y una serif
    elegante genera el contraste característico."
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-grotesk:      "Founders Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-grotesk-cond: "Founders Grotesk Cond", "Founders Grotesk", sans-serif;
  --font-display-xcond:"Founders Grotesk XCond", "Founders Grotesk", sans-serif;
  --font-serif:        "Alga", "Cormorant Garamond", Georgia, serif;

  /* Semantic roles */
  --font-title:   var(--font-grotesk);   /* títulos, branding, UI          */
  --font-body:    var(--font-grotesk);   /* cuerpo de texto                */
  --font-editorial: var(--font-serif);   /* frases, conceptos, destacados  */

  /* ---- Weights ---- */
  --fw-extralight: 200; /* @kind font */
  --fw-light:      300; /* @kind font */
  --fw-regular:    400; /* @kind font */
  --fw-medium:     500; /* @kind font */
  --fw-semibold:   600; /* @kind font */
  --fw-bold:       700; /* @kind font */

  /* ---- Type scale (fluid-ish, editorial: big jumps + lots of air) ---- */
  --fs-display-2xl: 128px;  /* portada / hero grotesk XCond */
  --fs-display-xl:  96px;
  --fs-display-lg:  72px;
  --fs-display-md:  56px;
  --fs-h1:          44px;
  --fs-h2:          34px;
  --fs-h3:          26px;
  --fs-h4:          21px;
  --fs-body-lg:     19px;
  --fs-body:        17px;
  --fs-body-sm:     15px;
  --fs-caption:     13px;
  --fs-micro:       11px;

  /* ---- Line heights ---- */
  --lh-tight:   0.95; /* @kind font */ /* big display */
  --lh-snug:    1.08;   /* @kind font */
  --lh-heading: 1.15;   /* @kind font */
  --lh-body:    1.55;   /* @kind font */
  --lh-relaxed: 1.7;    /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-mega:    -0.03em; /* @kind font */ /* huge grotesk display */
  --ls-tight:   -0.015em; /* @kind font */
  --ls-normal:  0em;      /* @kind font */
  --ls-label:   0.08em; /* @kind font */ /* uppercase labels */
  --ls-wide:    0.16em; /* @kind font */ /* spaced caps */
}

/* ---------- Editorial serif helper ---------- */
.sq-editorial {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-style: italic;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

/* ---------- Eyebrow / label ---------- */
.sq-eyebrow {
  font-family: var(--font-title);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}