@import url("./global-config-light.css");

:root {
  --primary: rgb(54, 207, 255);
  --primary-fallback: rgb(54, 207, 255);
  --secondary: rgb(0, 71, 254);
  --tertiary: rgb(255, 46, 1);
  --success: rgb(37, 168, 58);
  --selected: rgb(255, 184, 0);
  --hint: rgb(255, 122, 0);
  --failure: rgb(221, 50, 50);
  --text: rgb(112, 117, 133);
  --text2: rgb(179, 182, 188);
  --text4: rgb(44,52,77);
  --text5: rgb(255, 255, 255);
  --textBtn: rgb(255, 255, 255);
  --border: rgb(43, 50, 67);
  --background1: rgb(40, 46, 63);
  --background2: rgb(238, 240, 246);
  --background3: rgb(238, 240, 246);
  --background4: rgb(0, 71, 254);
  --backgroundfb: rgb(153 153 153 / 10%);
  --background5: linear-gradient(90deg, #000428 0.42%, #004e92 99.59%);

  --font-size: 14px;
  --register-bg: var(--background2);
  --font-color-primary: rgb(112, 117, 133);
  --font-color-secondary: #b3b6bc;
  --title-font-color: #2f384e;
  --box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.07), -4px -4px 13px #fff,
    6px 6px 36px rgba(0, 0, 0, 0.06);
  --box-shadow-inset: -4px -4px 16px rgba(255, 255, 255, 0.25),
    4px 4px 8px rgba(66, 83, 107, 0.09), inset 0 -4px 14px #fff,
    inset 0 2px 6px rgba(66, 83, 107, 0.22);
  --box-shadow-simle: 2px 2px 16px rgba(33, 36, 49, 0.16);
  --button-bg: rgb(238, 240, 246);
  --button-bg-hover: #f6f7fc;
  --element-border-color: rgb(238, 240, 246);
  --border-color: rgba(209, 217, 230, 0.9);
  --contrast: 0;
  --accent-color: rgb(54, 207, 255);
  --accent-gradient: linear-gradient(273.8deg,
      rgb(0, 71, 254) 15.88%,
      rgb(54, 207, 255) 98.99%);
  --primary-filter: brightness(0) saturate(100%) invert(80%) sepia(45%) saturate(4440%) hue-rotate(163deg) brightness(102%) contrast(101%);
  --secondary-filter: brightness(0) saturate(100%) invert(14%) sepia(82%) saturate(5483%) hue-rotate(228deg) brightness(104%) contrast(107%);
  --text5-filter: brightness(0) saturate(100%) invert(99%) sepia(16%) saturate(2%) hue-rotate(225deg) brightness(116%) contrast(100%);

  /* new color system enhancement */

  --primary-new: rgb(0, 178, 255);
  --primary-fallback-new: rgb(54, 207, 255);
  --secondary-new: rgb(0, 71, 254);
  --tertiary-new: rgb(0, 164, 255);
  --success-new: rgb(37, 168, 58);
  --selected-new: rgb(0, 163, 255);
  --hint-new: rgb(255, 122, 0);
  --failure-new: rgb(221, 50, 50);
  --text-new: rgb(85, 100, 145);
  --text2-new: rgb(48, 48, 73);
  --text3-new: rgb(50,59,84);
  --text4-new: rgb(44,52,77);
  --text5-new: rgb(39, 50, 87);
  --textBtn-new: rgb(255, 255, 255);
  --border-new: rgb(208, 207, 226);
  --background1-new: rgb(255, 255, 255);
  --background2-new: rgb(245, 248, 255);
  --background3-new: rgb(235, 239, 248);
  --background4-new: rgb(209, 227, 255);
  --backgroundfb-new: rgb(153 153 153 / 10%);
  --background5-new: rgb(230,234,242);
}

:root.dark {
  --primary: rgb(54, 207, 255);
  --primary-fallback: rgb(54, 207, 255);
  --secondary: rgb(0, 71, 254);
  --tertiary: rgb(255, 46, 1);
  --success: rgb(37, 168, 58);
  --selected: rgb(255, 184, 0);
  --hint: rgb(255, 122, 0);
  --failure: rgb(221, 50, 50);
  --text: rgb(112, 117, 133);
  --text2: rgb(179, 182, 188);
  --text4: rgb(255,255,255);
  --text5: rgb(255, 255, 255);
  --textBtn: rgb(255, 255, 255);
  --border: rgb(43, 50, 67);
  --background1: rgb(40, 46, 63);
  --background2: rgb(32, 36, 47);
  --background3: rgb(29, 34, 48);
  --background4: rgb(0, 71, 254);
  --backgroundfb: rgb(255 255 255 / 20%);
  --background5: linear-gradient(90deg, #000428 0.42%, #004e92 99.59%);

  --font-size: 14px;
  --register-bg: var(--background2);
  --font-color-secondary: #2a2c2d;
  --title-font-color: #b3b6bc;
  --font-color-primary: #b3b6bc;
  --background-body: #20242f;
  --box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.24), -4px -4px 13px #333646,
    6px 6px 36px rgba(0, 0, 0, 0.23);
  --box-shadow-inset: -2px -2px 4px rgba(64, 67, 84, 0.2),
    2px 2px 4px rgba(0, 0, 0, 0.08), inset 0 -2px 6px rgba(66, 69, 84, 0.8),
    inset 0 2px 8px rgba(0, 0, 0, 0.4);
  --box-shadow-simle: 2px 2px 16px rgba(0, 0, 0, 0.48);
  --button-bg: #20242f;
  --button-bg-hover: #282d3a;
  --element-border-color: #20242f;
  --border-color: #2b3243;
  --contrast: 1;

  --borderD500: 
    linear-gradient(0deg, rgba(23, 23, 23, 0.5), rgba(23, 23, 23, 0.5)),
    linear-gradient(0deg, var(--border), var(--border));
  --bg-opacity: 0;
  --bg-base-color: var(--primary);

  --bo-t: 0;
  --bo-l: 0;
  --bo-w: 100%;
  --bo-h: 2px;
  --bo-z: 1;
  --bo-opacity: 0;
  --bo-base-color: var(--border);
  --bg-light-overlay: 255, 255, 255;
  --bg-dark-overlay: 23, 23, 23;

  /* new color system enhancement */

  --primary-new: rgb(0, 178, 255);
  --primary-fallback-new: rgb(54, 207, 255);
  --secondary-new: rgb(0, 71, 254);
  --tertiary-new: rgb(1, 164, 255);
  --success-new: rgb(37, 168, 58);
  --selected-new: rgb(0, 163, 255);
  --hint-new: rgb(255, 122, 0);
  --failure-new: rgb(221, 50, 50);
  --text-new: rgb(207, 213, 231);
  --text2-new: rgb(255, 255, 255);
  --text3-new: rgb(179, 182, 188);
  --text4-new: rgb(255,255,255);
  --text5-new: rgb(255, 255, 255);
  --textBtn-new: rgb(255, 255, 255);
  --border-new: rgb(65, 74, 97);
  --background1-new: rgb(40, 46, 63);
  --background2-new: rgb(32, 36, 47);
  --background3-new: rgb(29, 34, 48);
  --background4-new: rgb(0, 71, 254);
  --backgroundfb-new: rgb(153 153 153 / 10%);
  --background5-new: rgb(43,51,74);
}