:root {
  --border-radius: 12px;
  --black: #000;
  --white: #fff;
  --yellow: #F5FF80;
  --red: #F32727;
  --green: #31CB53;
  --blue: #0235EB;
  --gray: #D7E4E3;
  --gray100: #171717;
  --background: var(--white);
  --border: #e5e5e5;
  --focus-outline: var(--black);
  --color: var(--black);
  --color-title: var(--black);
  --color-link: var(--blue);
  --fill-black: var(--black);
  --fill-white: var(--white);
  --fill-yellow: var(--black);
  --fill-gray: var(--gray);
  --fill-gray-yellow: var(--gray);
  --btn-bg: var(--black);
  --btn-bg-hover: #1a1a1a;
  --btn-bg-active: #333;
  --btn-bg-green: #31CB53;
  --btn-bg-green-hover: #58d774;
  --btn-bg-green-active: #27a242;
  --btn-color: var(--white);
  --btn-select-bg: var(--gray);
  --btn-select-color: var(--black);
  --btn-select-bg-checked: var(--yellow);
  --gradient: -webkit-linear-gradient(right, var(--black), var(--black));
  --editor-bg: var(--white);
  --editor-top-bg: #F3F3F3;
  --editor-tab-bg: var(--white);
}

.theme-dark {
  --background: var(--black);
  --focus-outline: var(--white);
  --border: #171717;
  --color: var(--white);
  --color-title: var(--white);
  --color-link: var(--yellow);
  --fill-black: var(--white);
  --fill-white: var(--black);
  --fill-yellow: var(--yellow);
  --fill-gray: var(--black);
  --fill-gray-yellow: var(--yellow);
  --btn-bg: var(--white);
  --btn-bg-hover: #e6e6e6;
  --btn-bg-active: #ccc;
  --btn-bg-green: #50C21B;
  --btn-bg-green-hover: #67e22e;
  --btn-bg-green-active: #3e9515;
  --btn-color: var(--black);
  --btn-select-bg: var(--white);
  --btn-select-color: var(--black);
  --btn-select-bg-checked: var(--yellow);
  --gradient: -webkit-linear-gradient(right, var(--yellow), var(--gray));
  --editor-bg: var(--gray100);
  --editor-top-bg: #252525;
  --editor-tab-bg: var(--gray100);
}

html,
body {
  background: var(--background);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* .theme-dark,
.theme-dark body {
  background: var(--background);
} */

body {
  color: var(--color);
}

@font-face {
  font-family: 'Graphik Web';
  src: url('/fonts/Graphik-Bold.woff2') format('woff2'),
      url('/fonts/Graphik-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hasklig';
  src: url('/fonts/Hasklig-Regular.woff2') format('woff2'),
       url('/fonts/Hasklig-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}