/* Wizard typography. Requires fonts/fonts.css and tokens/tokens.css.
   Ten text styles. Every piece of text in the product should be one of them. */

body {
  font-family: var(--wizard-font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--wizard-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display and headings: Instrument Sans, condensed. Marketing, page titles, empty states. */
.wz-display { font-family: var(--wizard-font-display); font-weight: 700; font-stretch: 78%; font-size: var(--wizard-type-display); line-height: 1; letter-spacing: -0.03em; }
.wz-h1      { font-family: var(--wizard-font-display); font-weight: 700; font-stretch: 82%; font-size: var(--wizard-type-h1); line-height: 1.05; letter-spacing: -0.025em; }
.wz-h2      { font-family: var(--wizard-font-display); font-weight: 700; font-stretch: 82%; font-size: var(--wizard-type-h2); line-height: 1.15; letter-spacing: -0.02em; }
.wz-h3      { font-family: var(--wizard-font-display); font-weight: 700; font-stretch: 82%; font-size: var(--wizard-type-h3); line-height: 1.25; letter-spacing: -0.015em; }

/* Product text: Inter. Screen titles, body, tables, forms, labels. */
.wz-title   { font-family: var(--wizard-font-ui); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.wz-body    { font-family: var(--wizard-font-ui); font-weight: 400; font-size: 16px; line-height: 1.55; }
.wz-small   { font-family: var(--wizard-font-ui); font-weight: 400; font-size: 14px; line-height: 1.5; }
.wz-label   { font-family: var(--wizard-font-ui); font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: 0.01em; }
.wz-caption { font-family: var(--wizard-font-ui); font-weight: 400; font-size: 12px; line-height: 1.4; letter-spacing: 0.01em; color: var(--wizard-text-muted); }

/* Code, logs, IDs */
.wz-code    { font-family: var(--wizard-font-mono); font-weight: 400; font-size: 13px; line-height: 1.5; }

/* Numbers that line up in columns (tables, dashboards, prices) */
.wz-num, table { font-variant-numeric: tabular-nums; }
