/* ============================================================
   Carol S. Grant — Typography System
   Gloock for editorial headlines (high contrast, never for body).
   DM Sans for everything functional: body, UI, labels, eyebrows.
   High contrast in scale = quiet power. Big serif, calm sans.
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Gloock', 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Type scale (display sizes assume large headlines) */
  --text-display-xl: 5.5rem;   /* hero headline */
  --text-display-l:  4rem;
  --text-display-m:  3rem;
  --text-display-s:  2.25rem;
  --text-title:      1.625rem;  /* card / section titles */
  --text-lead:       1.375rem;  /* intro / lead paragraph */
  --text-body:       1.0625rem;
  --text-small:      0.9375rem;
  --text-eyebrow:    0.8125rem;  /* uppercase tracked label */
  --text-caption:    0.75rem;

  /* Weights */
  --weight-display:  400;   /* Gloock is a single weight */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.04;   /* large display */
  --leading-snug:    1.18;
  --leading-normal:  1.55;   /* body copy */
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-display: -0.015em;  /* tighten large serif */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-eyebrow:  0.18em;   /* generous track on eyebrows */
}

/* ---- Specimen helper classes (used in cards / kits) ---- */
.cg-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-ink);
}
.cg-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--text-soft);
}
.cg-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-ink);
}
.cg-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}