/* ============================================================
   Cillus.app — Typography tokens
   Display: Bricolage Grotesque · Body/UI: Hanken Grotesk · Mono: IBM Plex Mono
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --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 → rem @16) — major-third-ish, tightened for display */
  --fs-3xs:  0.6875rem;  /* 11 — mono micro-labels */
  --fs-2xs:  0.75rem;    /* 12 — eyebrows, captions */
  --fs-xs:   0.8125rem;  /* 13 — fine print, meta */
  --fs-sm:   0.875rem;   /* 14 — secondary UI */
  --fs-base: 1rem;       /* 16 — body */
  --fs-md:   1.125rem;   /* 18 — lead body */
  --fs-lg:   1.375rem;   /* 22 — card titles */
  --fs-xl:   1.75rem;    /* 28 — section sub */
  --fs-2xl:  2.25rem;    /* 36 — H2 */
  --fs-3xl:  3rem;       /* 48 — H1 */
  --fs-4xl:  4rem;       /* 64 — display */
  --fs-5xl:  5.25rem;    /* 84 — hero display */

  /* Line heights */
  --lh-tight:   0.98; /* @kind other */
  --lh-snug:    1.12; /* @kind other */
  --lh-heading: 1.2; /* @kind other */
  --lh-body:    1.55; /* @kind other */
  --lh-relaxed: 1.7; /* @kind other */

  /* Letter spacing */
  --ls-display: -0.04em; /* @kind other */
  --ls-heading: -0.025em; /* @kind other */
  --ls-body:    -0.005em; /* @kind other */
  --ls-mono:    0.02em; /* @kind other */
  --ls-label:   0.12em; /* @kind other */

  /* ---- Semantic text roles ---- */
  --text-hero:    var(--fw-extrabold) var(--fs-5xl)/var(--lh-tight) var(--font-display);
  --text-h1:      var(--fw-extrabold) var(--fs-3xl)/var(--lh-snug) var(--font-display);
  --text-h2:      var(--fw-bold) var(--fs-2xl)/var(--lh-heading) var(--font-display);
  --text-h3:      var(--fw-bold) var(--fs-xl)/var(--lh-heading) var(--font-display);
  --text-title:   var(--fw-bold) var(--fs-lg)/var(--lh-heading) var(--font-display);
  --text-lead:    var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font-body);
  --text-default: var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font-body);
  --text-small:   var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body);
  --eyebrow:      var(--fw-medium) var(--fs-2xs)/1.2 var(--font-mono);
}