/* CM-RG · Archipelago — typography tokens
   Voice of an old hydrographic survey: spaced small-caps labels,
   confident serif headlines, narrative bookish body text, mono figures. */

:root {
  --font-display: 'EB Garamond', 'Georgia', serif;       /* H1–H3, hero, chart titles */
  --font-body: 'Literata', 'Georgia', serif;             /* narrative text */
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;/* figures, coords, data */

  /* — Scale (page designs at ~1280–1440px) — */
  --text-hero: 58px;        /* hero headline */
  --text-h1: 44px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-lead: 21px;        /* page lead / subhead */
  --text-body-size: 18px;
  --text-small: 15px;
  --text-caption-size: 13px;
  --text-overline: 13px;    /* spaced small-caps labels */

  /* — Line heights — */
  --leading-display: 1.08;
  --leading-heading: 1.18;
  --leading-body: 1.62;
  --leading-tight: 1.35;

  /* — Weights — */
  --weight-display: 600;    /* EB Garamond SemiBold */
  --weight-heading: 600;
  --weight-body: 400;
  --weight-medium: 500;

  /* — Letterspacing — */
  --tracking-display: -0.01em;
  --tracking-overline: 0.18em;  /* CHART LABELS · WIDE SMALL CAPS */
  --tracking-caps: 0.08em;      /* buttons, nav */
}

/* Base text defaults for any page that links styles.css */
body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  margin: 0;
}

/* The signature chart label: spaced small caps in drawing ink */
.overline {
  font-family: var(--font-display);
  font-size: var(--text-overline);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-variant-numeric: oldstyle-nums;
  color: var(--text-secondary);
}

.overline--accent { color: var(--text-accent); }

/* Figures and coordinates */
.figure {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  letter-spacing: 0.02em;
  color: var(--text-body);
}