@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: 6px;
  --radius-chip: 6px;
  --radius-block: 8px;
  --radius-panel: 12px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --radius-square: 2px;
  --icon-size: 16px;
  --icon-stroke: 1.75;
  --control-xs: 20px;
  --control-s: 24px;
  --control-m: 28px;
  --control-l: 32px;
  --label-size: 11px;
  --label-tracking: 0.06em;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 40px;
  --leading-snug: 1.35;
  --leading-ascii: 1.15;
  --tracking-tight: -0.015em;
  --z-sticky: 10;
  --z-overlay: 50;
  --z-toast: 60;
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-scene: 800ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-reveal: cubic-bezier(0.5, 1, 0.89, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --stagger-step: 60ms;
  --stagger-icon: 50ms;
  --distance-nudge: 4px;
  --distance-reveal: 32px;
  --distance-enter: 60px;
  --scale-press: 0.95;
  --page: light-dark(#f5f5f5, #0f0e0d);
  --raised: light-dark(#fff, #161514);
  --sunken: light-dark(#ebebeb, #1a1917);
  --surface-page: var(--page);
  --surface-panel: var(--raised);
  --surface-raised: var(--raised);
  --surface-overlay: var(--raised);
  --surface-sunken: var(--sunken);
  --surface-selected: var(--sunken);
  --surface-hover: light-dark(rgb(2 2 2 / 5%), rgb(238 238 238 / 6%));
  --surface-active: light-dark(rgb(2 2 2 / 8%), rgb(238 238 238 / 10%));
  --backdrop: light-dark(rgb(0 0 0 / 50%), rgb(0 0 0 / 75%));
  --text: light-dark(#020202, #eee);
  --text-muted: light-dark(#5c5855, #a49d9a);
  --text-subtle: light-dark(#6b6663, #968f8c);
  --text-disabled: light-dark(#a49d9a, #5c5855);
  --line: light-dark(#d6d3d2, #2e2c2b);
  --line-soft: color-mix(in srgb, var(--line) 60%, transparent);
  --line-strong: light-dark(#ccc9c7, #3d3a39);
  --line-control: light-dark(#8a8380, #77716e);
  --focus: light-dark(#020202, #eee);
  --focus-halo: light-dark(rgb(2 2 2 / 12%), rgb(238 238 238 / 14%));
  --action: light-dark(#101010, #fafafa);
  --action-hover: light-dark(#3d3a39, #d6d3d2);
  --on-action: light-dark(#f5f5f5, #020202);
  --button-primary: var(--action);
  --button-primary-hover: var(--action-hover);
  --button-primary-text: var(--on-action);
  --chip-selected: var(--surface-active);
  --accent: var(--text);
  --warn: light-dark(#8a4b12, #e8a25c);
  --warning: var(--warn);
  --warning-text: var(--warn);
  --warning-soft: light-dark(
    color-mix(in srgb, #8a4b12 12%, #fff),
    color-mix(in srgb, #e8a25c 14%, #101010)
  );
  --danger: light-dark(#b42318, #f97066);
  --danger-text: var(--danger);
  --danger-soft: light-dark(#f6dedb, color-mix(in srgb, #f97066 14%, #101010));
  --diff-add: light-dark(rgb(2 2 2 / 6%), rgb(238 238 238 / 8%));
  --diff-add-text: var(--text);
  --diff-del: light-dark(#f6dedb, #3a1513);
  --diff-del-text: var(--danger);
  --shadow-xs: 0 1px 1px light-dark(rgb(2 2 2 / 4%), rgb(0 0 0 / 30%));
  --shadow-sm: 0 1px 2px light-dark(rgb(2 2 2 / 6%), rgb(0 0 0 / 40%));
  --shadow-md: 0 4px 12px light-dark(rgb(2 2 2 / 8%), rgb(0 0 0 / 50%));
  --shadow-lg: 0 12px 32px light-dark(rgb(2 2 2 / 14%), rgb(0 0 0 / 60%));
  --ascii: light-dark(#8a8380, #8a8380);
}

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

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

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