/* MIRAI — Typography
   Space Grotesk (display/headings) · Hanken Grotesk (body/UI) · Space Mono (labels/numbers).
   Wide tracking is reserved for the wordmark and small mono labels only. */

:root {
  /* ---- Families ---- */
  --font-display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Space Grotesk is the brand voice: use it for expressive body copy on marketing/brand
     surfaces (paragraphs, leads). Hanken (--font-body) is the functional face for dense
     product UI — tables, forms, small text. Same stack as --font-display. */
  --font-brand:   'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;   /* wordmark, headings */
  --weight-bold:     700;

  /* ---- Type scale (px via rem, 16px root) ---- */
  --text-display-1: 4.5rem;    /* 72 — hero */
  --text-display-2: 3.5rem;    /* 56 */
  --text-h1:        2.5rem;    /* 40 */
  --text-h2:        2rem;      /* 32 */
  --text-h3:        1.5rem;    /* 24 */
  --text-h4:        1.25rem;   /* 20 */
  --text-body-lg:   1.125rem;  /* 18 */
  --text-body:      1rem;      /* 16 */
  --text-body-sm:   0.875rem;  /* 14 — dense UI */
  --text-label:     0.75rem;   /* 12 — mono eyebrows / captions */
  --text-caption:   0.6875rem; /* 11 — meta */

  /* ---- Line heights ---- */
  --leading-tight:   1.05;   /* display */
  --leading-snug:    1.2;    /* headings */
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.65;   /* long-form marketing copy */

  /* ---- Letter-spacing ---- */
  --tracking-tight:    -0.02em;  /* large display */
  --tracking-snug:     -0.01em;  /* headings */
  --tracking-normal:   0;
  --tracking-wide:      0.04em;
  --tracking-wordmark:  0.12em;  /* MIRAI wordmark only */
  --tracking-label:     0.16em;  /* small mono labels / eyebrows */
}

/* ---- Optional utility classes (consumers may use these directly) ---- */
.mirai-display { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-display-1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.mirai-h1 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h1); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.mirai-h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.mirai-h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h3); line-height: var(--leading-snug); }
.mirai-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--leading-normal); }
.mirai-body-sm { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: var(--leading-normal); }
/* Eyebrow / small label — the only place wide tracking + uppercase is allowed besides the wordmark. */
.mirai-eyebrow { font-family: var(--font-mono); font-weight: var(--weight-regular); font-size: var(--text-label); line-height: 1.2; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.mirai-mono { font-family: var(--font-mono); font-size: var(--text-body-sm); font-variant-numeric: tabular-nums; }
/* Tabular figures for data / metrics. */
.mirai-tnum { font-variant-numeric: tabular-nums; }