@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter Variable"), local("InterVariable"),
       url("fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter Variable Italic"), local("InterVariable-Italic"),
       url("fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  --text-base: 14px;
  --text-base-leading: 1.5;

  --text-tracking: -0.01em;
  --text-features: "cv02", "cv03", "cv04", "calt";

  --text-xs: 12px;
  --text-xs-leading: 1.3333;
  --text-sm: 13px;
  --text-sm-leading: 1.1765;
  --text-lg: 16px;
  --text-lg-leading: 1.5;
  --text-xl: 20px;
  --text-xl-leading: 1.4;
  --text-2xl: 24px;
  --text-2xl-leading: 1.3333;
  --text-3xl: 30px;
  --text-3xl-leading: 1.2;
  --text-4xl: 36px;
  --text-4xl-leading: 1.1111;
  --text-5xl: 48px;
  --text-5xl-leading: 1;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --color-bg: #fff;
  --color-text: #313131;
  --color-muted: #666;
  --color-border: #ddd;
  --color-header-bg: #1a5fb4;
  --color-header-text: #fff;
  --color-link: var(--color-header-bg);
  --color-link-hover: #0d3d6b;
  --color-panel-bg: #f5f7fa;
  --color-accent-bg: #eef3fc;
}

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: var(--text-features);
  font-optical-sizing: auto;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base-leading);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--text-tracking);
  color: var(--color-text);
  background: var(--color-bg);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: normal;
  letter-spacing: 0;
}

.num, .tabular {
  font-variant-numeric: tabular-nums;
}

.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); font-feature-settings: normal; letter-spacing: 0; }

.text-xs  { font-size: var(--text-xs);  line-height: var(--text-xs-leading); }
.text-sm  { font-size: var(--text-sm);  line-height: var(--text-sm-leading); }
.text-lg  { font-size: var(--text-lg);  line-height: var(--text-lg-leading); }
.text-xl  { font-size: var(--text-xl);  line-height: var(--text-xl-leading); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--text-2xl-leading); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--text-3xl-leading); }

.text-muted { color: var(--color-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}