@font-face {
  font-family: Geist;
  src: url("fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --font-sans: geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, sfmono-regular, menlo, monospace;
  --text-label: 12px;
  --text-button: 14px;
  --text-small: 14px;
  --text-body: 16px;
  --text-lead: 18px;
  --text-h3: 28px;
  --text-h2: clamp(32px, 2.4vw + 10px, 44px);
  --text-display: clamp(36px, 4.2vw, 64px);
  --leading-none: 1;
  --leading-tight: 1.12;
  --leading-body: 1.5;
  --leading-code: 1.43;
  --tracking-display: -0.04em;
  --tracking-heading: -0.025em;
  --tracking-mono: -0.02em;
  --weight-regular: 400;
  --weight-medium: 500;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --gutter: 24px;
  --content-max: 1440px;
  --text-max: 824px;
  --header-height: 72px;
  --control-height: 32px;
  --control-height-small: 26px;
  --radius-button: 3px;
  --radius-chip: 4px;
  --radius-block: 6px;
  --radius-panel: 16px;
  --duration-fast: 150ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --page: light-dark(#f5f5f5, #020202);
  --raised: light-dark(#fff, #101010);
  --sunken: light-dark(#ebebeb, #1f1d1c);
  --text: light-dark(#020202, #eee);
  --text-muted: light-dark(#5c5855, #a49d9a);
  --text-subtle: light-dark(#8a8380, #8a8380);
  --line: light-dark(#ccc9c7, #3d3a39);
  --line-strong: light-dark(#a49d9a, #5c5855);
  --accent: light-dark(#2f6b46, #7fc79a);
  --warn: light-dark(#8a4b12, #e8a25c);
  --danger: light-dark(#b42318, #f97066);
  --button-primary: light-dark(#101010, #fafafa);
  --button-primary-hover: light-dark(#3d3a39, #d6d3d2);
  --button-primary-text: light-dark(#f5f5f5, #020202);
  --chip-selected: light-dark(#d6d3d2, #2e2c2b);
  --diff-add: light-dark(#dcefdf, #10301c);
  --diff-del: light-dark(#f6dedb, #3a1513);
  --focus: light-dark(#020202, #eee);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}