@font-face {
  font-family: "EB Garamond";
  src:
    url("/design-system/fonts/EBGaramond-VariableFont_wght.ttf") format("truetype-variations"),
    url("/design-system/fonts/EBGaramond-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src:
    url("/design-system/fonts/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations"),
    url("/design-system/fonts/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src:
    url("/design-system/fonts/IBM_Plex_Sans/IBMPlexSans-VariableFont_wdth,wght.ttf") format("truetype-variations"),
    url("/design-system/fonts/IBM_Plex_Sans/IBMPlexSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src:
    url("/design-system/fonts/IBM_Plex_Sans/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations"),
    url("/design-system/fonts/IBM_Plex_Sans/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink-0: #0b0e13;
  --ink-1: #11151c;
  --ink-2: #181d26;
  --ink-3: #222934;
  --ink-4: #2c3340;
  --line-1: #232934;
  --line-2: #2e3645;
  --line-3: #3d4658;
  --fg-1: #f2ecdc;
  --fg-2: #c7c0ae;
  --fg-3: #8e8676;
  --fg-4: #5e5849;
  --brass: #c2aa7a;
  --brass-bright: #dcc79e;
  --brass-deep: #8f7a50;
  --brass-ink: #17120a;
  --positive: #4f8c5e;
  --positive-bg: #15241a;
  --negative: #b5494b;
  --negative-bg: #2a1517;
  --warning: #c49545;
  --warning-bg: #2a1f0f;
  --info: #4a78b5;
  --info-bg: #11202e;
  --focus-ring: rgba(194, 170, 122, 0.55);
  --selection-bg: rgba(194, 170, 122, 0.25);
  --font-display: "EB Garamond", Georgia, serif;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-38: 2.375rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-full: 999px;
  --tr-wide: 0.04em;
  --tr-wider: 0.12em;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.45);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--ink-0);
  color: var(--fg-2);
  font-family: var(--font-sans);
}

body {
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0)),
    url("/design-system/grain.svg");
  background-size: auto, 240px 240px;
}

::selection {
  background: var(--selection-bg);
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}