/* UMBRA — Typography tokens
   Wide geometric display, neutral technical UI, console mono.
   Wordmark + display: wide tracking, light weight. */

:root {
  /* ---- Families ---- */
  --font-display: 'Michroma', 'Eurostile Extended', sans-serif;
  --font-ui: 'Saira', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

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

  /* ---- Type scale (rem, 16px base) ---- */
  --text-2xs: 0.6875rem;   /* 11px — micro labels, telemetry */
  --text-xs: 0.75rem;      /* 12px — captions, tags */
  --text-sm: 0.8125rem;    /* 13px — secondary UI */
  --text-base: 0.9375rem;  /* 15px — body */
  --text-md: 1.0625rem;    /* 17px — lead body */
  --text-lg: 1.375rem;     /* 22px — card titles */
  --text-xl: 1.875rem;     /* 30px — section heads */
  --text-2xl: 2.5rem;      /* 40px — page titles */
  --text-3xl: 3.5rem;      /* 56px — hero */
  --text-4xl: 5rem;        /* 80px — display */

  /* ---- Line heights ---- */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- Letter-spacing — wide is core to the brand ---- */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;     /* wordmark, taglines */
  --tracking-widest: 0.32em;    /* eyebrows, all-caps labels */

  /* ---- Semantic roles ---- */
  --type-display-family: var(--font-display);
  --type-display-tracking: 0.12em;
  --type-display-weight: var(--weight-regular);

  --type-eyebrow-family: var(--font-mono);
  --type-eyebrow-tracking: var(--tracking-widest);
  --type-eyebrow-size: var(--text-xs);

  --type-body-family: var(--font-ui);
  --type-body-size: var(--text-base);
  --type-body-leading: var(--leading-normal);
}