:root {
  --main-green: #66c167;
  --main-action-green: #67C23A;
  --main-action-red: #FF7262;
  --main-wax: #F89022;
  --main-red: #f96c6c;
  --main-yellow: #ffc107;
  --secondary-green: #1fc781;
  --black-primary: #161617;
  --radius: 4px;
  --radius-2: 8px;
  --slider-bg: #5E5E5E;

  // AMM Spaces
  --amm-space-1: 5px;
  --amm-space-2: 8px;
  --amm-space-3: 12px;
}

[trade-theme="default"] {
  --color-primary: #66C167;
  --color-primary-op: rgba(102, 193, 103, .2);
  --primary-darker: #46A147;
  --color-secondary: #F96C6C;
  --color-secondary-op: rgba(249, 108, 108, .2);
  --secondary-darker: #D94C4C;
}

[trade-theme="bloom"] {
  --color-primary: #277DFA;
  --color-primary-op: rgba(39, 125, 250, .2);
  --primary-darker: #055AD6;
  --color-secondary: #FFAB2E;
  --color-secondary-op: rgba(250, 149, 0, .2);
  --secondary-darker: #D68000;
}

[trade-theme="cyber"] {
  --color-primary: #00D65D;
  --color-primary-op: rgba(0, 153, 66, 0.2);
  --primary-darker: #009942;
  --color-secondary:  #F4486C;
  --color-secondary-op: rgba(212, 13, 55, 0.2);
  --secondary-darker: #D40D37;
}

[trade-theme="contrast"] {
  --color-primary: #00B909;
  --color-primary-op: rgba(0, 185, 9, .2);
  --primary-darker: #10C919;
  --color-secondary: #C60606;
  --color-secondary-op: rgba(198, 6, 6, .2);
  --secondary-darker: #D61616;
}

.theme-dark {
  // backgrounds
  --background-color-base: #282828;
  --background-color-secondary: #212121;
  --background-color-third: #212121;
  --background-grid-layout: #000;
  --bg-big-card: #212121;
  --bg-alter-1: #282828;
  --bg-alter-2: #363535;
  --landing-card-bg: rgba(40, 40, 40, 0.3);
  --landing-icon-bg: #111111;
  --table-background: #212121;
  --dialog-background: #212121;
  --card-number: #161617;
  --disabled-indicator: #C4C4C4;
  --access-indicator: #66C167;

  // continer
  --access-text-color: #66C167;
  --access-bg: rgba(102, 193, 103, .2);

  // buttons
  --btn-default: #333333;
  --btn-alternative: #333333;
  --btn-active: #161617;
  --btn-outline: #161617;
  --hover: rgba(21, 21, 21, 0.3);
  --dark-btn-sm: #383838;
  --swap-tab-active: #141415;

  --tag-color: rgba(120, 120, 135, 0.36);

  --text-default: #f2f2f2;
  --text-theme: #000;
  --text-contrast: #fff;
  --text-secondary: #d9d9d9;
  --text-grey-thirdly: #bdbdbd;
  --text-dark: #888;
  --text-disable: #8E8E93;
  --text-transparent: rgba(242, 242, 242, 0.3);

  --card-shadow: 0px -0.5px 0px rgba(0, 0, 0, 0.2);
  --dropdown-shadow: 0px 12px 24px 0px rgba(18, 18, 18, 0.16);

  --color-text-primary: #F2F2F2;
  --border-color: #3F3F3F;
  --border-hover-color: #1fc7816e;
  --border-active-color: #32D74B;
  --light-border-color: rgba(120, 120, 135, 0.36);

  --color-success: #8cc176;
  --color-danger: #b82c0d;

  --active-row: #282828;

  --border-1: 1px solid rgba(60, 60, 67, 0.36);
  --border-1-color: rgba(60, 60, 67, 0.36); 
  --border-2: 2px solid rgb(63, 63, 63, 1);
  --border-2-color: rgb(63, 63, 63, 1);

  --selector-bg: #282828;

  --table-header-background: #333333;
  --dropdown-border: #333;
  --tab-link-border: #333;
  --dropdown-hover: rgba(200, 200, 200, 0.1);

  //trade 
  --trade-bg: #212121;
  --trade-bg-secondary: #282828;
  --trade-tab-bg: #212121;
  --trade-header-bg: #333333;

  //gradient
  --start-bg: rgba(33, 33, 33, 1);
  --end-bg: rgba(0, 0, 0, 0);

  --normal-card-shadow: #00000080;

  --cancel: #c4c4c4;

  --select-color: #333333;
  --select-color-dark: #161617;
}

.theme-light {

  // backgrounds
  --background-color-base: #f0f2f5;
  --background-color-secondary: #CDD0D6;
  --background-color-third: #fff;
  --background-grid-layout: #fff;
  --bg-big-card: #fff;
  --bg-alter-1: #dcdfe6;
  --bg-alter-2: #dcdfe6;
  --landing-card-bg: rgba(250, 250, 250, 0.3);
  --landing-icon-bg: #ededed;
  --table-background: #f0f2f5;
  --table-tabs-background: #D4D7DE;
  --table-header-background: #dcdfe6;
  --dialog-background: #f5f5f9;
  --chart-actions-background: #d4d7dE;
  --card-number: #f0f0f0;
  --disabled-indicator: #C4C4C4;
  --access-indicator: #66C167;

  // buttons
  --btn-default: #E6E8EB;
  --btn-alternative: #fff;
  --btn-active: #D4D7DE;
  --btn-outline: #fff;
  --hover: rgba(200, 200, 200, 0.5);
  --dark-btn-sm: #e0e0e0;
  --swap-tab-active: #e0e0e0;
  --text-default: #303133;
  --text-theme: #fff;
  --text-contrast: #000;
  --text-secondary: #606266;
  --text-dark: #aaa;
  --text-grey-thirdly: #787878;
  --text-disable: #c4c4c4;
  --text-transparent: rgba(0, 0, 0, 0.3);

  --tag-color: rgba(120, 120, 135, 0.36);

  --border-color: #CDD0D6;
  --border-hover-color: #1fc7816e;
  --border-active-color: #32D74B;
  --light-border-color: rgba(120, 120, 135, 0.36);

  --card-shadow: 0px 5px 20px rgba(0, 0, 0, 0.08);
  --dropdown-shadow: 0px 5px 20px rgba(0, 0, 0, 0.08);

  --active-row: #c2deff;

  --border-1: 1px solid rgba(60, 60, 67, 0.36);
  --border-1-color: rgba(60, 60, 67, 0.36); 
  --border-2: 2px solid #CDD0D6;

  --selector-bg: #dcdfe6;

  --dropdown-border: #CDD0D6;
  --tab-link-border: #CDD0D6;
  --dropdown-hover: rgba(225, 225, 225, 0.5);

    //trade 
  --trade-bg: #F0F2F5;
  --trade-bg-secondary: #F0F2F5;
  --trade-tab-bg: #D4D7DE;
  --trade-header-bg: #DCDFE6;

    //gradient
  --start-bg: rgba(222, 222, 222, 1);
  --end-bg: rgba(0, 0, 0, 0); 
  --cancel: #303133;

  --normal-card-shadow: #aaaaaa8a;
  --select-color: #ffffff;
  --select-color-dark: #f2f2f2;
}

