/**
 * Product typography for FuelRadar (Inter + DM Mono).
 * Licensed Saans/Serrif slots remain available under /static/fonts/.
 */

@font-face {
  font-family: "Saans";
  src: url("/static/fonts/saans/Saans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saans";
  src: url("/static/fonts/saans/Saans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Saans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-display-1: clamp(1.75rem, 3vw, 2.25rem);
  --text-display-1-lh: 1.12;
  --text-display-1-ls: -0.03em;
  --text-display-1-weight: 600;

  --text-display-2: clamp(1.5rem, 2.5vw, 1.875rem);
  --text-display-2-lh: 1.15;
  --text-display-2-ls: -0.03em;
  --text-display-2-weight: 600;

  --text-heading: 1.125rem;
  --text-heading-lh: 1.25;
  --text-heading-ls: -0.02em;
  --text-heading-weight: 600;

  --text-subhead: 0.9375rem;
  --text-subhead-lh: 1.45;
  --text-subhead-ls: normal;
  --text-subhead-weight: 400;

  --text-body-lg: 0.9375rem;
  --text-body-lg-lh: 1.5;
  --text-body-lg-ls: normal;

  --text-body: 0.8125rem;
  --text-body-lh: 1.45;
  --text-body-ls: normal;

  --text-label: 0.8125rem;
  --text-label-lh: 1.35;
  --text-label-ls: normal;
  --text-label-weight: 500;

  --text-caption: 0.75rem;
  --text-caption-lh: 1.35;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
}

.type-display,
.type-display-2,
.type-heading {
  font-family: var(--font-sans);
}

.type-display {
  font-size: var(--text-display-1);
  line-height: var(--text-display-1-lh);
  letter-spacing: var(--text-display-1-ls);
  font-weight: var(--text-display-1-weight);
}

.type-display-2 {
  font-size: var(--text-display-2);
  line-height: var(--text-display-2-lh);
  letter-spacing: var(--text-display-2-ls);
  font-weight: var(--text-display-2-weight);
}

.type-heading {
  font-size: var(--text-heading);
  line-height: var(--text-heading-lh);
  letter-spacing: var(--text-heading-ls);
  font-weight: var(--text-heading-weight);
}

.type-subhead {
  font-size: var(--text-subhead);
  line-height: var(--text-subhead-lh);
  font-weight: var(--text-subhead-weight);
}

.type-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
}

.type-body {
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
}

.type-label {
  font-size: var(--text-label);
  line-height: var(--text-label-lh);
  font-weight: var(--text-label-weight);
}

.type-caption {
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
}

.type-mono {
  font-family: var(--font-mono);
}