@use "functions";

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

// new variables

// text colors
// ---------- light mode ----------
$text-color: #2b3344;
$text-disabled: #b7b7c6;
$input-text-color: #595965;
$highlight-text-color: #6f42c1;
$text-button-color: #f3f3fd;

// ---------- dark mode ----------
$text-color-dark: #f3f3fd;
$text-disabled-dark: #6f6f7a;
$input-text-color-dark: #b5b5c8;
$highlight-text-color-dark: #d2baff;
$text-button-color-dark: #f3f3fd;

// background colors
// ---------- light mode ----------
$background-color: linear-gradient(-45deg, #fcfdfd71 0%, #fcfdfd79 100%);
$background-color-solid-gradient: linear-gradient(
  -45deg,
  #fcfdfd 0%,
  #fcfdfd 100%
);
$background-color-solid: #fcfdfd;
$background-color-secondary: #fcfdfd4d;
$background-color-accent: #6f42c1;
$background-color-button: #6f42c1;
$background-color-drop-down: #6f42c14d;
$background-color-input: #ffffff4d;
$background-color-input-focus: #f2f2f7;
$background-color-drop-down-gradient: linear-gradient(
  -45deg,
  #75649366 0%,
  #40257266 100%
);
$background-color-selected: #e0dfff;
$background-radial-gray-gradient: radial-gradient(
  circle,
  #bfe0f8 0%,
  #e9ebff 46%,
  #e2acff 100%
);

// ---------- dark mode ----------
$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
$background-color-solid-gradient-dark: linear-gradient(
  -45deg,
  #333333 0%,
  #2d2437 100%
);
$background-color-solid-dark: #19191d;
$background-color-secondary-dark: #19191d99;
$background-color-accent-dark: #6f42c1;
$background-color-button-dark: #6f42c1;
$background-color-drop-down-dark: #50505080;
$background-color-input-dark: #ffffff33;
$background-color-input-focus-dark: #333333;
$background-color-drop-down-gradient-dark: linear-gradient(
  -45deg,
  #8973b166 0%,
  #53427366 100%
);
$background-color-selected-dark: #403e66;
$background-radial-gray-gradient-dark: radial-gradient(
  circle,
  #31373b 0%,
  #48494b 46%,
  #52415c 100%
);

// border colors
// ---------- light mode ----------
$border-color: #e0dfff;
$input-border-color: #d5dddd80;
$border-color-accent: #6f42c1;

// ---------- dark mode ----------
$border-color-dark: #564b69;
$input-border-color-dark: #d5dddd80;
$border-color-accent-dark: #6f42c1;

// highlight colors
// ---------- light mode ----------
$highlight-accent-color: #e0dfff;
$highlight-secondary-color: #6f42c1;

// ---------- dark mode ----------
$highlight-accent-color-dark: #403e6a;
$highlight-secondary-color-dark: #c4abf1;

// icon colors
// ---------- light mode ----------
$icon-default-color: #6f42c1;
$icon-default-color-hover: #7f4ddb;
$icon-default-color-active: #f2f2f7;

// ---------- dark mode ----------
$icon-default-color-dark: #6f42c1;
$icon-default-color-hover-dark: #7f4ddb;
$icon-default-color-active-dark: #f2f2f7;

// colors
$color1: #a392cd;
$color2: #7b4cd3;
$color3: #b186ff;
$color4: #8752e8;
$color5: #c7a8ff;

// log indication colors
// ------------ text -------------
$log-default-text-color: #6f42c1;
$log-info-text-color: #1773fd;
$log-warn-text-color: #f3a50c;
$log-error-text-color: #fc230f;
$log-success-text-color: #23a84f;
// ----------- dark ---------------
$log-default-text-color-dark: #b18ef1;
$log-info-text-color-dark: #7eb0fa;
$log-warn-text-color-dark: #ffaa00;
$log-error-text-color-dark: #ff887d;
$log-success-text-color-dark: #43ff81;

// ------------ background -------------
$log-default-backgroung-color: #6e42c133;
$log-info-background-color: #1773fd5d;
$log-warn-background-color: #f3a50c33;
$log-error-background-color: #fc230f33;
$log-success-background-color: #0ef75b33;

// old variables
$accent-color: #6f42c1;
$accent-color-dark: #c4abf1;

$background-color-gray: #f3f3f3;
$background-color-gray-dark: #232323;

$shadow-color: #3c3c431a;
$shadow-color-dark: #8f8f8f1a;

$acent-gradient-dark: linear-gradient(90deg, #b392f0 0%, #a676ff 100%);
$acent-gradient: linear-gradient(90deg, #6f42c1 0%, #925df3 100%);

$faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
$faint-gradient-dark: radial-gradient(
  circle,
  #31373b 0%,
  #48494b 46%,
  #52415c 100%
);

$font-inter: "Inter", sans-serif;
$font-josefin-sans: "Josefin Sans", sans-serif;
$font-poppins: "Poppins", sans-serif;
$font-roboto: "Roboto", sans-serif;

$tiny: 0.625rem;
$small: 0.75rem;
$regular: 0.8rem;
$large: 1rem;
$xlarge: 1.125rem;
$xxlarge: 1.5rem;
$xxxlarge: 2rem;

$thin-weight: 300;
$regular-weight: 400;
$medium-weight: 500;
$bold-weight: 600;

$z-index-drei-html: 1;
$z-index-default: 1;
$z-index-marketplace: 2;
$z-index-tools: 3;
$z-index-negative: -1;
$z-index-ui-base: 10;
$z-index-ui-overlay: 20;
$z-index-ui-popup: 30;
$z-index-ui-highest: 50;

$box-shadow-light: 0px 2px 4px $shadow-color;
$box-shadow-medium: 0px 4px 8px $shadow-color;
$box-shadow-heavy: 0px 8px 16px $shadow-color;

$border-radius-small: 4px;
$border-radius-medium: 6px;
$border-radius-large: 12px;
$border-radius-circle: 50%;
$border-radius-xlarge: 16px;
$border-radius-extra-large: 20px;
$border-radius-xxx: 30px;