/* ============================================================
   Roboprofi — Typography tokens
   One humanist sans (Barlow) across the system. Headings are set
   tight and confident; body is clean and even. Buttons & eyebrows
   are UPPERCASE with generous letter-spacing. Big "outline" index
   numbers (01, 02, 03) use a light weight.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-condensed: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --font-display: 'Barlow', system-ui, sans-serif;     /* headings */
  --font-body: 'Barlow', system-ui, sans-serif;        /* paragraphs */

  /* ---- 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 */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-display-xl: 76px;   /* hero headline */
  --fs-display-lg: 56px;
  --fs-display-md: 44px;
  --fs-h1: 38px;
  --fs-h2: 30px;
  --fs-h3: 23px;
  --fs-h4: 19px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;
  --fs-index-num: 120px;   /* the giant outline 01/02/03 numerals */

  /* ---- Line heights ---- */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug: 1.18; /* @kind font */
  --lh-heading: 1.22; /* @kind font */
  --lh-body: 1.6; /* @kind font */
  --lh-relaxed: 1.75; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.01em; /* @kind font */
  --ls-normal: 0em; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
  --ls-eyebrow: 0.16em; /* @kind font */
  --ls-button: 0.12em; /* @kind font */

  /* ============================================================
     Semantic role aliases
     ============================================================ */
  --text-display: var(--fw-semibold) var(--fs-display-lg)/var(--lh-tight) var(--font-display);
  --text-h1: var(--fw-semibold) var(--fs-h1)/var(--lh-heading) var(--font-display);
  --text-h2: var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-display);
  --text-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display);
  --text-paragraph: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
}

/* ---- Optional utility classes (consumers may use the vars directly) ---- */
.rp-eyebrow {
  font: var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.rp-index-num {
  font: var(--fw-light) var(--fs-index-num)/0.9 var(--font-sans);
  letter-spacing: 0.02em;
}