/* Typography — Sechenie
 * Display: Playfair Display Bold. Body & UI: Inter.
 * Scale and roles per the brief.
 */
:root {
  /* ---- Families ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ---- Type scale (role-based) ---- */
  /* Display / H1 — Playfair 48–64, Bold */
  --text-display: 700 clamp(40px, 5vw, 64px)/1.08 var(--font-display);
  --text-display-tracking: -0.5px;

  /* H2 — Playfair 32–40, Bold */
  --text-h2: 700 clamp(30px, 3.4vw, 40px)/1.15 var(--font-display);
  --text-h2-tracking: -0.3px;

  /* H3 — Inter 20–24, SemiBold */
  --text-h3: 600 22px/1.3 var(--font-body);

  /* Body — Inter 16, Regular */
  --text-body-size: 16px;
  --text-body-line: 1.625;        /* 26px */

  /* Body Small — Inter 14 */
  --text-small-size: 14px;
  --text-small-line: 1.5;

  /* UI / Buttons — Inter 15, SemiBold */
  --text-ui-size: 15px;
  --text-ui-weight: 600;

  /* Data / Numbers — Inter 14, Medium */
  --text-data-size: 14px;
  --text-data-weight: 500;

  /* Label / Tag / eyebrow — Inter 11, SemiBold, uppercase, +1.5px */
  --text-label-size: 11px;
  --text-label-weight: 600;
  --text-label-tracking: 1.5px;
}

/* Optional helper classes (consumers may use tokens directly instead) */
.t-display { font: var(--text-display); letter-spacing: var(--text-display-tracking); color: var(--text-heading); }
.t-h2 { font: var(--text-h2); letter-spacing: var(--text-h2-tracking); color: var(--text-heading); }
.t-h3 { font: var(--text-h3); color: var(--text-heading); }
.t-body { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--text-body); }
.t-small { font-family: var(--font-body); font-size: var(--text-small-size); line-height: var(--text-small-line); color: var(--text-muted); }
.t-label {
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}