/* ============================================================
   EBTHub — Typography tokens
   Two faces only. Blanka = hero display. Michroma = everything else.
   Both are geometric/technical; both run UPPERCASE for headings &
   labels with generous letter-spacing. Numbers are always Michroma
   (Blanka is display-only — never for body or numbers).
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: "Blanka", "Michroma", system-ui, sans-serif; /* hero headlines */
  --font-ui:      "Michroma", system-ui, sans-serif;             /* nav, subheaders, labels, numbers, buttons */
  --font-body:    "Blinker", "Michroma", system-ui, sans-serif;  /* long-form running prose */
  --font-mono:    "Michroma", ui-monospace, monospace;           /* data / tabular */

  /* ---- Display scale (Blanka). Tight leading, big steps.
          Blanka is wide & heavy → it needs generous letter-spacing. ---- */
  --display-2xl: 96px;
  --display-xl:  72px;
  --display-lg:  56px;
  --display-md:  42px;
  --display-sm:  32px;

  --leading-display: 1.0;
  --tracking-display: 0.02em;   /* tight, but a fine line shows between strokes (e.g. I/L) */

  /* ---- Text scale. Michroma (UI) is wide → modest sizes, lots of air.
          Blinker (body) is narrower & more legible → can run a touch
          larger with tighter leading for comfortable paragraphs. ---- */
  --text-2xl: 28px;   /* section titles (Michroma) */
  --text-xl:  22px;
  --text-lg:  18px;
  --text-md:  16px;   /* base */
  --text-sm:  14px;
  --text-xs:  12px;
  --text-2xs: 10px;   /* eyebrow / micro-labels */

  /* Body (Blinker) sizes — prose runs slightly larger for readability */
  --body-lg: 19px;
  --body-md: 17px;
  --body-sm: 15px;

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-ui:      1.6;   /* Michroma UI strings need the air */
  --leading-body:    1.55;  /* Blinker prose */
  --leading-relaxed: 1.65;

  /* ---- Tracking. Michroma is naturally wide; labels go wider. ---- */
  --tracking-tight:  0;
  --tracking-normal: 0.01em;
  --tracking-wide:   0.12em;   /* eyebrows, nav, buttons */
  --tracking-wider:  0.22em;   /* micro eyebrow labels */

  /* ---- Weights — both faces are single-weight (400) ---- */
  --weight-regular: 400;
}