/* =============================================================================
   Ela Design System — Typography Primitives
   -----------------------------------------------------------------------------
   Font families, sizes, weights, and named text styles mirrored from the
   Figma Ela Design System file.
   Source: https://www.figma.com/design/h2W5Vaejp6jpCvZV1ga3h4/Ela-Design-System
   ============================================================================= */

@import url("base.css");
@import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Font families ---------- */
  --ff-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-text:    "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Font weights ---------- */
  --fw-regular: 400;
  --fw-bold:    700;

  /* ---------- Font sizes (px, matching Figma point values) ---------- */
  --fz-xs:  10px;
  --fz-s:   12px;
  --fz-sm:  14px;
  --fz-m:   17px;
  --fz-l:   22px;
  --fz-xl:  26px;
  --fz-xxl: 32px;

  /* ---------- Line heights ---------- */
  --lh-tight:    1.20;  /* headings */
  --lh-snug:     1.33;  /* paragraph small */
  --lh-normal:   1.40;  /* paragraph, caption */
  --lh-flat:     1.00;  /* caption small */

  /* ---------- Letter spacing ---------- */
  --ls-tight:   -0.01em;  /* -1% — headings 0–2 */
  --ls-normal:   0;
}


/* =============================================================================
   Named text styles
   These match the Figma text style names 1:1. Apply as utility classes.
   ============================================================================= */

.t-heading-0,
.t-heading-1,
.t-heading-2,
.t-heading-3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.t-heading-0 { font-size: var(--fz-xxl); }
.t-heading-1 { font-size: var(--fz-xl); }
.t-heading-2 { font-size: var(--fz-l); }
.t-heading-3 { font-size: var(--fz-m); letter-spacing: var(--ls-normal); }

.t-paragraph {
  font-family: var(--ff-text);
  font-weight: var(--fw-regular);
  font-size: var(--fz-m);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  margin: 0;
}

.t-paragraph-small {
  font-family: var(--ff-text);
  font-weight: var(--fw-regular);
  font-size: var(--fz-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  margin: 0;
}

.t-caption-bold {
  font-family: var(--ff-text);
  font-weight: var(--fw-bold);
  font-size: var(--fz-s);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  margin: 0;
}

.t-caption {
  font-family: var(--ff-text);
  font-weight: var(--fw-regular);
  font-size: var(--fz-s);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  margin: 0;
}

.t-caption-small {
  font-family: var(--ff-text);
  font-weight: var(--fw-regular);
  font-size: var(--fz-xs);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-normal);
  margin: 0;
}