/* LifeRoc Capital — Typography tokens
   Headings: geometric caps, generously letter-spaced (Jost / Century Gothic style).
   Body: Open Sans, sentence case, comfortable reading rhythm. */
:root {
  /* Families */
  --font-display: 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale (px) */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 46px;
  --text-5xl: 60px;
  --text-display: 74px;

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing — the brand leans on WIDE tracking for caps headings */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-caps: 0.12em;    /* section headers: "WHAT WE DO" */
  --tracking-hero: 0.22em;    /* extreme: page-title "WHY LIFEROC" */
  --tracking-label: 0.14em;   /* eyebrows / nav / button labels */

  /* ---------- Semantic roles ---------- */
  --role-display-font: var(--font-display);
  --role-display-size: var(--text-display);
  --role-display-weight: var(--weight-medium);
  --role-display-tracking: var(--tracking-wide);
  --role-display-leading: var(--leading-tight);

  --role-heading-font: var(--font-display);
  --role-heading-weight: var(--weight-medium);
  --role-heading-tracking: var(--tracking-caps);

  --role-eyebrow-font: var(--font-display);
  --role-eyebrow-size: var(--text-sm);
  --role-eyebrow-weight: var(--weight-semibold);
  --role-eyebrow-tracking: var(--tracking-label);

  --role-body-font: var(--font-body);
  --role-body-size: var(--text-base);
  --role-body-weight: var(--weight-regular);
  --role-body-leading: var(--leading-normal);

  --role-label-font: var(--font-display);
  --role-label-weight: var(--weight-semibold);
  --role-label-tracking: var(--tracking-label);
}