/* ============================================================
   323 Ocean — Typography
   Display/headings: Stolzl (substituted with Outfit). Body: DM Sans.
   ============================================================ */

:root {
  /* ---- Font families ---- */
  --font-display: 'stolzl', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; /* Stolzl (Typekit ioi0lcm); Outfit = offline fallback */
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-fallback:-apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Weights ---- */
  --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 (from the Web Visual Standard) ---- */
  --fs-hero:        clamp(32px, 5.5vw, 54px); /* @kind font */
  --fs-h1:          clamp(28px, 5vw, 42px); /* @kind font */
  --fs-h2:          clamp(22px, 3.5vw, 32px); /* @kind font */
  --fs-block:       clamp(22px, 3.5vw, 30px); /* @kind font */
  --fs-stat:        clamp(28px, 4vw, 38px); /* @kind font */
  --fs-display-num: clamp(120px, 16vw, 172px); /* @kind font */
  --fs-result:      26px; /* @kind font */
  --fs-lead:        18px; /* @kind font */
  --fs-body:        15px; /* @kind font */
  --fs-small:       14px; /* @kind font */
  --fs-column:      12px; /* @kind font */
  --fs-eyebrow:     11px; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:   1.1; /* @kind other */
  --lh-heading: 1.2; /* @kind other */
  --lh-snug:    1.4; /* @kind other */
  --lh-body:    1.7; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-eyebrow: 2px;    /* @kind other */
  --ls-column:  1.5px;  /* @kind other */
  --ls-tight:   -0.01em; /* @kind other */
  --ls-display: -0.02em; /* @kind other */

  /* ---- Semantic aliases ---- */
  --text-eyebrow-size: var(--fs-eyebrow);
}

/* ---- Optional base specimen helpers (used by cards & kits) ---- */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold-deep);
}
.t-display { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); line-height: var(--lh-heading); color: var(--text-navy); }
.t-body    { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }