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

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

@font-face {
  font-family: 'Fira-Mono';
  src: url("../fonts/FiraMono-Regular.woff2");
}

body {
  --tonic-body: 'Inter-Light', sans-serif;
  --tonic-header: 'Inter-Black', sans-serif;
  --tonic-subheader: 'Inter-Medium', sans-serif;
  --tonic-monospace: 'Fira-Mono', monospace;
}

@media (prefers-color-scheme: light) {
  body, *[theme="light"] {
    --tonic-background: rgba(240, 240, 240, 1);
    --tonic-window: rgba(255, 255, 255, 1);
    --tonic-accent: rgba(56, 185, 255, 1);
    --tonic-primary: rgba(54, 57, 61, 1);
    --tonic-secondary: rgba(232, 232, 228, 1);
    --tonic-light: rgba(153, 157, 160, 1);
    --tonic-medium: rgba(150, 150, 150, 1);
    --tonic-shadow: rgba(150, 150, 150, 0.25);
    --tonic-dark: rgba(24, 24, 24, 1);
    --tonic-disabled: rgba(152, 161, 175, 1);
    --tonic-button-text: rgba(54, 57, 61, 1);
    --tonic-button-shadow: rgba(0, 0, 0, 33%);
    --tonic-button-background: rgba(245, 245, 245, 1);
    --tonic-button-background-hover: rgba(230, 230, 230, 1);
    --tonic-button-background-focus: rgba(237, 237, 237, 1);
    --tonic-input-text: rgba(54, 57, 61, 1);
    --tonic-input-text-hover: rgba(228, 228, 228, 1);
    --tonic-input-border: rgba(201, 201, 201, 1);
    --tonic-input-border-hover: rgba(54, 57, 61, 1);
    --tonic-input-background: rgba(244, 244, 244, 1);
    --tonic-input-background-focus: rgba(242, 242, 242, 1);
    --tonic-border: rgba(200, 200, 200, 1);
    --tonic-border-accent: rgba(206, 206, 206, 1);
    --tonic-error: rgba(240, 102, 83, 1);
    --tonic-notification: rgba(240, 102, 83, 1);
    --tonic-danger: rgba(240, 102, 83, 1);
    --tonic-success: rgba(133, 178, 116, 1);
    --tonic-warning: rgba(249, 169, 103, 1);
    --tonic-info: rgba(108, 112, 114, 1);
    --tonic-overlay: rgba(255, 255, 255, 0.75);

    --tonic-toaster-inline-info: rgba(255, 255, 255, 1);
  }
}

@media (prefers-color-scheme: dark) {
  body, *[theme="dark"] {
    --tonic-background: rgba(31, 30, 30, 1);
    --tonic-window: rgba(40, 40, 40, 1);
    --tonic-accent: rgba(56, 185, 255, 1);
    --tonic-primary: rgba(255, 255, 255, 1);
    --tonic-secondary: rgba(195, 195, 195, 1);
    --tonic-medium: rgba(153, 157, 160, 1);
    --tonic-dark: rgba(24, 24, 24, 1);
    --tonic-shadow: rgba(0, 0, 0, 0.3);
    --tonic-disabled: rgba(170, 170, 170, 1);
    --tonic-button-text: rgba(255, 255, 255, 1);
    --tonic-button-shadow: rgba(0, 0, 0, 1);
    --tonic-button-background: rgba(74, 74, 74, 1);
    --tonic-button-background-hover: rgba(94, 94, 94, 1);
    --tonic-button-background-focus: rgba(84, 84, 84, 1);
    --tonic-input-text: rgba(255, 255, 255, 1);
    --tonic-input-text-hover: rgba(255, 255, 255, 1);
    --tonic-input-background: rgba(18, 18, 18,0.4);
    --tonic-input-background-focus: rgba(8, 8, 8, 0.2);
    --tonic-input-border: rgba(80, 80, 80, 1);
    --tonic-input-border-hover: rgba(105, 105, 105, 1);
    --tonic-border: rgba(70, 70, 70, 1);
    --tonic-border-accent: rgba(90, 90, 90, 1);
    --tonic-error: rgba(240, 102, 83, 1);
    --tonic-notification: rgba(240, 102, 83, 1);
    --tonic-caution: rgba(240, 102, 83, 1);
    --tonic-success: rgba(133, 178, 116, 1);
    --tonic-warning: rgba(249, 169, 103, 1);
    --tonic-info: rgba(110, 110, 110, 1);
    --tonic-overlay: rgba(0, 0, 0, 0.40);

    --tonic-toaster-inline-info: rgba(50, 50, 50, 1);
  }
}