/* ============================================================
   Outer — Typography tokens
   Display/editorial: Constantia (serif, the wordmark voice)
   UI/body: Naste (humanist sans, the tagline voice)
   ============================================================ */

:root {
  /* Families */
  --font-display: "Constantia", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:    "Naste", "Helvetica Neue", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, monospace;

  /* Weights (Naste) */
  --fw-extralight: 200; /* @kind other */
  --fw-light:      300; /* @kind other */
  --fw-regular:    400; /* @kind other */
  --fw-medium:     500; /* @kind other */
  --fw-semibold:   600; /* @kind other */
  --fw-bold:       700; /* @kind other */
  --fw-extrabold:  800; /* @kind other */

  /* Type scale — editorial, generous.
     Display sizes use --font-display; UI sizes use --font-sans. */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;
  --text-7xl:  104px;

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.14em;  /* uppercase eyebrows / tagline */
}

/* Editorial helpers ------------------------------------------------ */
.o-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.o-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--petrol-600);
}
.o-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}