@font-face {
  font-family: 'Inter';
  src: url("/fonts/inter/Inter-Regular.ttf");
}

@font-face {
  font-family: 'Inter-Black';
  src: url("/fonts/Inter-Black.ttf");
}

@font-face {
  font-family: 'Victor-Mono';
  src: url("/fonts/VictorMono-Medium.ttf");
}

@font-face {
  font-family: 'Overpass-Mono';
  src: url("/fonts/Overpass-Mono.ttf");
}

@font-face {
  font-family: 'SymbolsNerdFont-Regular';
  src: url("/fonts/SymbolsNerdFont-Regular.ttf");
}

@font-face {
  font-family: 'SymbolsNerdFont-Medium';
  src: url("/fonts/SymbolsNerdFont-Medium.ttf");
}

:root {
  --font-body: 'Inter', sans-serif;
  --font-header: 'Inter-Black', sans-serif;
  --font-display: 'Overpass-Mono', sans-serif;
  --font-subheader: 'Inter-Medium', sans-serif;
  --font-monospace: 'Victor-Mono', monospace;

  --color-background: light-dark(rgba(245, 245, 245, 1), rgba(35, 35, 35, 1));
  --color-background-dark: light-dark(rgba(235, 235, 235, 1), rgba(25, 25, 25, 1));
  --color-window: light-dark(rgba(250, 250, 250, 1), rgba(30, 30, 30, 1));
  --color-accent: light-dark(rgba(16, 54, 125, 1), rgb(23, 94, 161));
  --color-accent-secondary: light-dark(rgba(116, 145, 179, 1), rgba(116, 145, 179, 1));
  --color-accent-light: light-dark(rgba(239, 241, 237, 1), rgba(239, 241, 237, 1));
  --color-primary: light-dark(rgba(54, 57, 61, 1), rgba(240, 240, 240, 1));
  --color-primary-dark: light-dark(rgba(46, 48, 52, 1), rgba(40, 40, 40, 1));
  --color-secondary: light-dark(rgba(170, 170, 170, 1), rgba(150, 150, 150, 1));
  --color-light: light-dark(rgba(255, 255, 255, 1), rgba(45, 45, 45, 1));
  --color-medium: light-dark(rgba(200, 200, 200, 1), rgba(60, 60, 60, 1));
  --color-shadow: light-dark(rgba(80, 80, 80, 0.25), rgba(0, 0, 0, 0.3));
  --color-shadow-dark: light-dark(rgba(50, 50, 50, 0.8), rgba(0, 0, 0, 0.8));
  --color-dark: light-dark(rgba(24, 24, 24, 1), rgba(24, 24, 24, 1));
  --color-disabled: light-dark(rgba(152, 161, 175, 1), rgba(170, 170, 170, 1));
  --color-button-text: light-dark(rgba(54, 57, 61, 1), rgba(255, 255, 255, 1));
  --color-button-shadow: light-dark(rgba(0, 0, 0, 33%), rgba(0, 0, 0, 1));
  --color-button-background: light-dark(rgba(255, 255, 255, 1), rgba(74, 74, 74, 1));
  --color-button-background-hover: light-dark(rgba(245, 245, 245, 1), rgba(50, 50, 50, 1));
  --color-button-background-focus: light-dark(rgba(230, 230, 230, 1), rgba(84, 84, 84, 1));
  --color-input-text: light-dark(rgba(54, 57, 61, 1), rgba(255, 255, 255, 1));
  --color-input-text-hover: light-dark(rgba(228, 228, 228, 1), rgba(255, 255, 255, 1));
  --color-input-border: light-dark(rgba(220, 220, 220, 1), rgba(40, 40, 40, 1));
  --color-input-border-hover: light-dark(rgba(54, 57, 61, 1), rgba(50, 50, 50, 1));
  --color-input-background: light-dark(rgba(240, 240, 240, 1), rgba(18, 18, 18,0.4));
  --color-input-background-focus: light-dark(rgba(235, 235, 235, 1), rgba(8, 8, 8, 0.2));
  --color-border: light-dark(rgba(230, 230, 230, 1), rgba(60, 60, 60, 1));
  --color-border-accent: light-dark(rgba(206, 206, 206, 1), rgba(90, 90, 90, 1));
  --color-error: rgba(240, 102, 83, 1);
  --color-notification: rgba(240, 102, 83, 1);
  --color-danger: rgba(240, 102, 83, 1);
  --color-success: rgba(133, 178, 116, 1);
  --color-warning: rgba(249, 169, 103, 1);
  --color-yield: rgb(251, 215, 30);
  --color-info: light-dark(rgba(108, 112, 114, 1), rgba(110, 110, 110, 1));
  --color-overlay: light-dark(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.40));
  --color-screen-wrapper: light-dark(rgba(215, 215, 215, 0.25), rgba(15, 15, 15, 0.5));
  --color-toaster-inline-info: light-dark(rgba(255, 255, 255, 1), rgba(50, 50, 50, 1));
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
}

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

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