@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* Global typography scale and utilities */
:root {
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "Consolas", "Liberation Mono", "Courier New", monospace;

  --h1-size: 48px;
  --h1-line: 56px;
  --h1-weight: 700;

  --h2-size: 40px;
  --h2-line: 48px;
  --h2-weight: 700;

  --h3-size: 36px;
  --h3-line: 44px;
  --h3-weight: 600;

  --h4-size: 32px;
  --h4-line: 40px;
  --h4-weight: 600;

  --h5-size: 24px;
  --h5-line: 32px;
  --h5-weight: 600;

  --h6-size: 20px;
  --h6-line: 28px;
  --h6-weight: 500;

  --subtitle1-size: 16px;
  --subtitle1-line: 24px;
  --subtitle1-weight: 500;

  --subtitle2-size: 14px;
  --subtitle2-line: 20px;
  --subtitle2-weight: 500;

  --body1-size: 16px;
  --body1-line: 24px;
  --body1-weight: 400;

  --body2-size: 14px;
  --body2-line: 20px;
  --body2-weight: 400;

  --button-large-size: 16px;
  --button-large-line: 24px;
  --button-large-weight: 500;

  --caption-size: 12px;
  --caption-line: 16px;
  --caption-weight: 400;

  --input-large-size: 16px;
  --input-large-line: 24px;
  --input-large-weight: 400;
}

html {
  font-size: var(--body2-size);
}

body {
  font-family: var(--font-sans);
  line-height: var(--body1-line);
  font-weight: var(--body1-weight);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); }
h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); }
h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); }
h4 { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: var(--h4-weight); }
h5 { font-size: var(--h5-size); line-height: var(--h5-line); font-weight: var(--h5-weight); }
h6 { font-size: var(--h6-size); line-height: var(--h6-line); font-weight: var(--h6-weight); }

p {
  font-size: var(--body1-size);
  line-height: var(--body1-line);
  font-weight: var(--body1-weight);
  margin: 0 0 1rem 0;
}

small, .type-caption {
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  font-weight: var(--caption-weight);
}

.type-display {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
}

.type-h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); }
.type-h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); }
.type-h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); }
.type-h4 { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: var(--h4-weight); }
.type-h5 { font-size: var(--h5-size); line-height: var(--h5-line); font-weight: var(--h5-weight); }
.type-h6 { font-size: var(--h6-size); line-height: var(--h6-line); font-weight: var(--h6-weight); }

.subtitle-1 { font-size: var(--subtitle1-size); line-height: var(--subtitle1-line); font-weight: var(--subtitle1-weight); }
.subtitle-2 { font-size: var(--subtitle2-size); line-height: var(--subtitle2-line); font-weight: var(--subtitle2-weight); }
.body-1 { font-size: var(--body1-size); line-height: var(--body1-line); font-weight: var(--body1-weight); }
.body-2 { font-size: var(--body2-size); line-height: var(--body2-line); font-weight: var(--body2-weight); }
.button-large { font-size: var(--button-large-size); line-height: var(--button-large-line); font-weight: var(--button-large-weight); }
.input-value-large { font-size: var(--input-large-size); line-height: var(--input-large-line); font-weight: var(--input-large-weight); }

code, pre {
  font-family: var(--font-mono);
}