/* ── Font-metric-adjusted fallbacks (eliminates FOUT layout shift) ── */
/* These @font-face declarations synthesize metric-matched fallback fonts so the
   browser reserves the correct line-box space before Inter / DM Mono load.      */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.64%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'DM Mono Fallback';
  src: local('Courier New');
  size-adjust: 112.78%;
  ascent-override: 80.18%;
  descent-override: 25.06%;
  line-gap-override: 0%;
}

:root {
  /* Font families — FOUT-adjusted stacks include metric-matched fallbacks above */
  --font-sans: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'DM Mono Fallback', 'Courier New', monospace;

  /* Display */
  --type-display-xl-family: var(--font-sans);
  --type-display-xl-size: clamp(3.25rem, 8vw, 5rem);
  --type-display-xl-line: 0.95;
  --type-display-xl-weight: 600;
  --type-display-xl-tracking: -0.04em;

  --type-display-lg-family: var(--font-sans);
  --type-display-lg-size: clamp(2.75rem, 6vw, 4rem);
  --type-display-lg-line: 1;
  --type-display-lg-weight: 500;
  --type-display-lg-tracking: -0.035em;

  --type-display-sm-family: var(--font-sans);
  --type-display-sm-size: clamp(1.75rem, 4vw, 3rem);
  --type-display-sm-line: 1.05;
  --type-display-sm-weight: 600;
  --type-display-sm-tracking: -0.03em;

  /* Headings */
  --type-h1-family: var(--font-sans);
  --type-h1-size: clamp(2.25rem, 4.5vw, 3rem);
  --type-h1-line: 1.05;
  --type-h1-weight: 600;
  --type-h1-tracking: -0.03em;

  --type-h2-family: var(--font-sans);
  --type-h2-size: clamp(1.875rem, 3.25vw, 2.25rem);
  --type-h2-line: 1.1;
  --type-h2-weight: 600;
  --type-h2-tracking: -0.025em;

  --type-h3-family: var(--font-sans);
  --type-h3-size: clamp(1.5rem, 2.5vw, 1.75rem);
  --type-h3-line: 1.15;
  --type-h3-weight: 600;
  --type-h3-tracking: -0.02em;

  --type-h4-family: var(--font-sans);
  --type-h4-size: 1.375rem;
  --type-h4-line: 1.2;
  --type-h4-weight: 500;
  --type-h4-tracking: -0.015em;

  --type-h5-family: var(--font-sans);
  --type-h5-size: 1.125rem;
  --type-h5-line: 1.3;
  --type-h5-weight: 500;
  --type-h5-tracking: -0.01em;

  --type-h6-family: var(--font-sans);
  --type-h6-size: 1rem;
  --type-h6-line: 1.35;
  --type-h6-weight: 500;
  --type-h6-tracking: -0.005em;

  /* Body */
  --type-body-lg-family: var(--font-sans);
  --type-body-lg-size: 1.125rem;
  --type-body-lg-line: 1.6;
  --type-body-lg-weight: 400;
  --type-body-lg-tracking: -0.01em;

  --type-body-md-family: var(--font-sans);
  --type-body-md-size: 1rem;
  --type-body-md-line: 1.6;
  --type-body-md-weight: 400;
  --type-body-md-tracking: -0.01em;

  --type-body-sm-family: var(--font-sans);
  --type-body-sm-size: 0.875rem;
  --type-body-sm-line: 1.55;
  --type-body-sm-weight: 400;
  --type-body-sm-tracking: -0.005em;

  --type-body-xs-family: var(--font-sans);
  --type-body-xs-size: 0.75rem;
  --type-body-xs-line: 1.5;
  --type-body-xs-weight: 400;
  --type-body-xs-tracking: 0em;

  /* Labels */
  --type-label-lg-family: var(--font-sans);
  --type-label-lg-size: 0.875rem;
  --type-label-lg-line: 1.2;
  --type-label-lg-weight: 500;
  --type-label-lg-tracking: 0em;

  --type-label-md-family: var(--font-sans);
  --type-label-md-size: 0.75rem;
  --type-label-md-line: 1.2;
  --type-label-md-weight: 500;
  --type-label-md-tracking: 0.01em;

  --type-label-sm-family: var(--font-sans);
  --type-label-sm-size: 0.6875rem;
  --type-label-sm-line: 1.2;
  --type-label-sm-weight: 500;
  --type-label-sm-tracking: 0.02em;

  /* Mono */
  --type-mono-xl-family: var(--font-mono);
  --type-mono-xl-size: 1rem;
  --type-mono-xl-line: 1.4;
  --type-mono-xl-weight: 500;
  --type-mono-xl-tracking: 0.02em;

  --type-mono-lg-family: var(--font-mono);
  --type-mono-lg-size: 0.875rem;
  --type-mono-lg-line: 1.4;
  --type-mono-lg-weight: 500;
  --type-mono-lg-tracking: 0.02em;

  --type-mono-md-family: var(--font-mono);
  --type-mono-md-size: 0.75rem;
  --type-mono-md-line: 1.4;
  --type-mono-md-weight: 500;
  --type-mono-md-tracking: 0.04em;

  --type-mono-sm-family: var(--font-mono);
  --type-mono-sm-size: 0.6875rem;
  --type-mono-sm-line: 1.3;
  --type-mono-sm-weight: 500;
  --type-mono-sm-tracking: 0.06em;

  --type-mono-xs-family: var(--font-mono);
  --type-mono-xs-size: 0.625rem;
  --type-mono-xs-line: 1.3;
  --type-mono-xs-weight: 500;
  --type-mono-xs-tracking: 0.08em;
}

/* ── Semantic element defaults ────────────────────────────── */
/* Component and utility class overrides take priority via specificity */

h1, h2, h3, h4 {
  margin: 0;
}

h1 {
  font-family: var(--type-h1-family);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
}

h2 {
  font-family: var(--type-h2-family);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-tracking);
}

h3 {
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
}

h4 {
  font-family: var(--type-h4-family);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line);
  font-weight: var(--type-h4-weight);
  letter-spacing: var(--type-h4-tracking);
}

p {
  font-family: var(--type-body-md-family);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--type-body-md-weight);
  letter-spacing: var(--type-body-md-tracking);
}

small {
  font-family: var(--type-body-sm-family);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
  letter-spacing: var(--type-body-sm-tracking);
}

/* ── Tracking helpers ─────────────────────────────────────── */
.tracking-tight {
  letter-spacing: -.02em;
}

.tracking-wide {
  letter-spacing: .05em;
}

/* ── Optional utility classes for fast prototyping */
.type-display-xl,
.type-display-lg,
.type-display-sm,
.type-h1,
.type-h2,
.type-h3,
.type-h4,
.type-h5,
.type-h6,
.type-body-lg,
.type-body-md,
.type-body-sm,
.type-body-xs,
.type-label-lg,
.type-label-md,
.type-label-sm,
.type-mono-xl,
.type-mono-lg,
.type-mono-md,
.type-mono-sm,
.type-mono-xs {
  margin: 0;
}

.type-display-xl {
  font-family: var(--type-display-xl-family);
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-line);
  font-weight: var(--type-display-xl-weight);
  letter-spacing: var(--type-display-xl-tracking);
}

.type-display-lg {
  font-family: var(--type-display-lg-family);
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-line);
  font-weight: var(--type-display-lg-weight);
  letter-spacing: var(--type-display-lg-tracking);
}

.type-display-sm {
  font-family: var(--type-display-sm-family);
  font-size: var(--type-display-sm-size);
  line-height: var(--type-display-sm-line);
  font-weight: var(--type-display-sm-weight);
  letter-spacing: var(--type-display-sm-tracking);
}

.type-h1 {
  font-family: var(--type-h1-family);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
}

.type-h2 {
  font-family: var(--type-h2-family);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-tracking);
}

.type-h3 {
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
}

.type-h4 {
  font-family: var(--type-h4-family);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line);
  font-weight: var(--type-h4-weight);
  letter-spacing: var(--type-h4-tracking);
}

.type-h5 {
  font-family: var(--type-h5-family);
  font-size: var(--type-h5-size);
  line-height: var(--type-h5-line);
  font-weight: var(--type-h5-weight);
  letter-spacing: var(--type-h5-tracking);
}

.type-h6 {
  font-family: var(--type-h6-family);
  font-size: var(--type-h6-size);
  line-height: var(--type-h6-line);
  font-weight: var(--type-h6-weight);
  letter-spacing: var(--type-h6-tracking);
}

.type-body-lg {
  font-family: var(--type-body-lg-family);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  font-weight: var(--type-body-lg-weight);
  letter-spacing: var(--type-body-lg-tracking);
}

.type-body-md {
  font-family: var(--type-body-md-family);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--type-body-md-weight);
  letter-spacing: var(--type-body-md-tracking);
}

.type-body-sm {
  font-family: var(--type-body-sm-family);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
  letter-spacing: var(--type-body-sm-tracking);
}

.type-body-xs {
  font-family: var(--type-body-xs-family);
  font-size: var(--type-body-xs-size);
  line-height: var(--type-body-xs-line);
  font-weight: var(--type-body-xs-weight);
  letter-spacing: var(--type-body-xs-tracking);
}

.type-label-lg {
  font-family: var(--type-label-lg-family);
  font-size: var(--type-label-lg-size);
  line-height: var(--type-label-lg-line);
  font-weight: var(--type-label-lg-weight);
  letter-spacing: var(--type-label-lg-tracking);
}

.type-label-md {
  font-family: var(--type-label-md-family);
  font-size: var(--type-label-md-size);
  line-height: var(--type-label-md-line);
  font-weight: var(--type-label-md-weight);
  letter-spacing: var(--type-label-md-tracking);
}

.type-label-sm {
  font-family: var(--type-label-sm-family);
  font-size: var(--type-label-sm-size);
  line-height: var(--type-label-sm-line);
  font-weight: var(--type-label-sm-weight);
  letter-spacing: var(--type-label-sm-tracking);
}

.type-mono-xl,
.type-mono-lg,
.type-mono-md,
.type-mono-sm,
.type-mono-xs {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.type-mono-xl {
  font-size: var(--type-mono-xl-size);
  line-height: var(--type-mono-xl-line);
  font-weight: var(--type-mono-xl-weight);
  letter-spacing: var(--type-mono-xl-tracking);
}

.type-mono-lg {
  font-size: var(--type-mono-lg-size);
  line-height: var(--type-mono-lg-line);
  font-weight: var(--type-mono-lg-weight);
  letter-spacing: var(--type-mono-lg-tracking);
}

.type-mono-md {
  font-size: var(--type-mono-md-size);
  line-height: var(--type-mono-md-line);
  font-weight: var(--type-mono-md-weight);
  letter-spacing: var(--type-mono-md-tracking);
}

.type-mono-sm {
  font-size: var(--type-mono-sm-size);
  line-height: var(--type-mono-sm-line);
  font-weight: var(--type-mono-sm-weight);
  letter-spacing: var(--type-mono-sm-tracking);
}

.type-mono-xs {
  font-size: var(--type-mono-xs-size);
  line-height: var(--type-mono-xs-line);
  font-weight: var(--type-mono-xs-weight);
  letter-spacing: var(--type-mono-xs-tracking);
}