@use 'inter-ui/default' as inter-ui with (
  $inter-font-display: swap,
  $inter-font-path: 'inter-ui/Inter (web)'
);
@use 'inter-ui/variable' as inter-ui-variable with (
  $inter-font-display: swap,
  $inter-font-path: 'inter-ui/Inter (web)'
);
@include inter-ui.weight-400-normal;
@include inter-ui.weight-500-normal;
@include inter-ui.weight-600-normal;
@include inter-ui.weight-700-normal;
@include inter-ui-variable.normal;

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  font-family: 'Inter', 'system-ui';
}

@supports (font-variation-settings: normal) {
  html,
  body {
    font-family: 'Inter var', 'system-ui';
  }
}

body {
  font-size: 100%;
}

:focus-visible {
  outline: none;
}

@mixin light-theme {
  color-scheme: light;
  --color-primary-blue: 73 135 252; // #4987FC
  --color-secondary: 242 242 242; // #F2F2F2
  --color-primary-purple: 103 86 189; // #6756BD
  --primary-background: 255 255 255; // #FFFFFF
  --primary-text: 48 48 48; // #303030
  --secondary-text: 128 128 128; // #808080
  --light-text: 190 190 190; // #BEBEBE
  --primary-border: 237 237 237; // #EDEDED
}

@mixin dark-theme {
  color-scheme: dark;
  --color-primary-blue: 50 104 206; // #3268CE
  --color-secondary: 46 46 46; // #2E2E2E
  --color-primary-purple: 57 41 141; // #39298D
  --primary-background: 25 25 25; // #191919
  --primary-text: 223 223 223; // #DFDFDF
  --secondary-text: 127 127 127; // #7F7F7F
  --light-text: 79 79 79; // #4F4F4F
  --primary-border: 53 53 53; // #353535
}

@layer base {
  :root {
    opacity: 0.88;
  }
}

:root.light {
  @include light-theme;
  @import 'highlight.js/scss/github.scss';
}

:root.dark {
  @include dark-theme;
  @import 'highlight.js/scss/github-dark.scss';
}
