@supports(--css: variables) {
  :root,
  [data-theme='default'] {
    --main-text: #2e3247;
    --additional-text: #889ab3;
    --light-background: #eef2ff;
    --dark-background: #fff;
    --input-border: #e6e6ff;
    --input-background: #f8faff;
    --disabled: #ccd2e0;
  }

  [data-theme='dark'] {
    --main-text: #fff;
    --additional-text: #889ab3;
    --light-background: #2b2e46;
    --dark-background: #202335;
    --input-border: #414463;
    --input-background: #35384e;
    --disabled: #ccd2e0;
  }
}

// Fonts
$roboto: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

// Colors
$white: #fff;
$black: #000;

$text-black: #2e3247;
$text-gray: #889ab3;
$background: #eef2ff;
$smoke-blue: #e5ecfd;
$soft-blue: #6290ff;
$disabled: #ccd2e0;
$red: #fb6b6d;
$green: #25e2b6;
$blue: #3485ff;

// Gradients
$blue-gradient: linear-gradient(45deg, $blue, $soft-blue);
$blue-hover-gradient: linear-gradient(45deg, darken($blue, 5%), lighten($soft-blue, 5%));
$green-gradient: linear-gradient(45deg, $green, #01dcbe);
$green-hover-gradient: linear-gradient(45deg, darken($green, 5%), lighten(#01dcbe, 5%));
$red-gradient: linear-gradient(45deg, #fa484b, #ff676a);
$red-hover-gradient: linear-gradient(45deg, darken(#fa484b, 5%), lighten(#ff676a, 10%));
