@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/inter-900.woff2") format("woff2");
}

:root, [data-theme="light"] {
  --surface-100: #ffffff;
  --surface-200: #f5f4f2;
  --ink: #1d1d1b;
  --ink-muted: #5b5854;
  --border: #e4e1dc;
  --brand-orange: #fd5e2a;
  --on-brand-orange: #1d1d1b;
  --info: #2b6cb0;
  --success: #00754f;
  --warning: #8a5a00;
  --danger: #a61b4c;
}
[data-theme="dark"] {
  --surface-100: #000000;
  --surface-200: #1d1d1b;
  --ink: #ffffff;
  --ink-muted: #b9b6b0;
  --border: #333330;
  --brand-orange: #fd5e2a;
  --on-brand-orange: #1d1d1b;
  --info: #7cade0;
  --success: #4fd8a8;
  --warning: #e3a63e;
  --danger: #f0729a;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --font-sans: "Inter", system-ui, sans-serif;
  --text-display-lg: 900 100px/1 var(--font-sans);
  --text-display-sm: 900 40px/1.05 var(--font-sans);
  --text-heading-lg: 700 28px/1.15 var(--font-sans);
  --text-heading-md: 700 20px/1.7 var(--font-sans);
  --text-heading-sm: 700 17px/1.3 var(--font-sans);
  --text-body-lg: 400 17px/1.55 var(--font-sans);
  --text-body: 400 15px/1.6 var(--font-sans);
  --text-body-sm: 400 13px/1.5 var(--font-sans);
  --text-label: 600 12px/1.2 var(--font-sans);
  --text-button: 700 15px/1 var(--font-sans);
}
.display-lg {
  font-family: var(--font-sans);
  font-size: 100px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}
.display-sm {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
}
.heading-lg {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
}
.heading-md {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: 0;
}
.heading-sm {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.button {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
}