@font-face {
  font-family: Satoshi;
  src: url("./fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("./fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("./fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #F6F4EF;
  --ink: #0A0A0A;
  --muted: #6B675F;
  --lime: #C8F000;
  --line: rgba(10, 10, 10, 0.12);
  --card: #F6F4EF;
  --glass: color-mix(in srgb, #F6F4EF 58%, transparent);
  --bar-80: #C8F000;
  --bar-10: #E3DFD4;
  --bar-10b: #C8C3B6;
  --shadow: none;
  --radius: 14px;
  --radius-pill: 999px;
  --radius-btn: 10px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: Satoshi, ui-sans-serif, system-ui, sans-serif;
  --logo-ink: #0A0A0A;
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0A0A0A;
  --ink: #F6F4EF;
  --muted: #9A9588;
  --line: rgba(246, 244, 239, 0.12);
  --card: #0A0A0A;
  --glass: color-mix(in srgb, #0A0A0A 58%, transparent);
  --bar-10: #F6F4EF;
  --bar-10b: #2A2A28;
}