/* ============================================================
   Opto Alignment — Typography Tokens
   Display: Barlow Semi Condensed · Body: IBM Plex Sans · Data: IBM Plex Mono
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;

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

  /* ---- Type scale (1.25 major-third-ish, tuned for technical UI) ---- */
  --fs-display-xl: 4.25rem;  /* 68px — hero */
  --fs-display-lg: 3.25rem;  /* 52px */
  --fs-display-md: 2.5rem;   /* 40px */
  --fs-h1: 2rem;             /* 32px */
  --fs-h2: 1.5rem;           /* 24px */
  --fs-h3: 1.25rem;          /* 20px */
  --fs-h4: 1.0625rem;        /* 17px */
  --fs-body-lg: 1.125rem;    /* 18px */
  --fs-body: 1rem;           /* 16px */
  --fs-body-sm: 0.875rem;    /* 14px */
  --fs-caption: 0.8125rem;   /* 13px */
  --fs-micro: 0.6875rem;     /* 11px — labels, eyebrows */

  /* ---- Line heights ---- */
  --lh-tight: 1.05;    /* @kind other */
  --lh-snug: 1.2;      /* @kind other */
  --lh-normal: 1.5;    /* @kind other */
  --lh-relaxed: 1.65;  /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tighter: -0.02em; /* @kind other */
  --ls-tight: -0.01em;   /* @kind other */
  --ls-normal: 0;        /* @kind other */
  --ls-wide: 0.04em;     /* @kind other */
  --ls-wider: 0.12em;    /* @kind other */

  /* ---- Semantic roles ---- */
  --type-eyebrow-size: var(--fs-micro);
  --type-eyebrow-spacing: var(--ls-wider);
  --type-eyebrow-weight: var(--fw-semibold);
}