:root.newcoin {
  --black: #000000;
  --white: #FFFFFF;
  --brand-light-1: #FEFDFB;
  --brand-light-2: #FFFAE9;
  --brand-light-3: #FFF3C1;
  --brand-light-4: #FFE99C;
  --brand-light-5: #FFDE77;
  --brand-light-6: #FBD375;
  --brand-light-7: #E8C266;
  --brand-light-8: #D6AA38;
  --brand-light-9: #F0B90B;
  --brand-light-10: #F6BF1E;
  --brand-light-11: #9A7000;
  --brand-light-12: #463A1D;
  --brand-light-9-alpha: rgba(240, 185, 11, 0.15);

  --brand-dark-1: #13110B;
  --brand-dark-2: #1C1810;
  --brand-dark-3: #2C220A;
  --brand-dark-4: #3B2A00;
  --brand-dark-5: #483400;
  --brand-dark-6: #55410B;
  --brand-dark-7: #68531E;
  --brand-dark-8: #846A28;
  --brand-dark-9: #F0B90B;
  --brand-dark-10: #E5AE00;
  --brand-dark-11: #FFCC3A;
  --brand-dark-12: #FDE7B7;
  --brand-dark-9-alpha: rgba(240, 185, 11, 0.15);

  --neutral-light-1: #FCFCFC;
  --neutral-light-2: #F9F9F9;
  --neutral-light-3: #F0F0F0;
  --neutral-light-4: #E8E8E8;
  --neutral-light-5: #E0E0E0;
  --neutral-light-6: #D9D9D9;
  --neutral-light-7: #CECECE;
  --neutral-light-8: #BBBBBB;
  --neutral-light-9: #8D8D8D;
  --neutral-light-10: #838383;
  --neutral-light-11: #646464;
  --neutral-light-12: #202020;
  --neutral-light-alpha-1: rgba(0, 0, 0, 0.0118);
  --neutral-light-alpha-2: rgba(0, 0, 0, 0.0235);
  --neutral-light-alpha-3: rgba(0, 0, 0, 0.0627);
  --neutral-light-alpha-4: rgba(0, 0, 0, 0.0902);
  --neutral-light-alpha-5: rgba(0, 0, 0, 0.1216);
  --neutral-light-alpha-6: rgba(0, 0, 0, 0.1529);
  --neutral-light-alpha-7: rgba(0, 0, 0, 0.1922);
  --neutral-light-alpha-8: rgba(0, 0, 0, 0.2667);
  --neutral-light-alpha-9: rgba(0, 0, 0, 0.4471);
  --neutral-light-alpha-10: rgba(0, 0, 0, 0.4941);
  --neutral-light-alpha-11: rgba(0, 0, 0, 0.6078);
  --neutral-light-alpha-12: rgba(0, 0, 0, 0.874);
  --neutral-dark-1: #111111;
  --neutral-dark-2: #191919;
  --neutral-dark-3: #222222;
  --neutral-dark-4: #2A2A2A;
  --neutral-dark-5: #313131;
  --neutral-dark-6: #3A3A3A;
  --neutral-dark-7: #484848;
  --neutral-dark-8: #606060;
  --neutral-dark-9: #6E6E6E;
  --neutral-dark-10: #7B7B7B;
  --neutral-dark-11: #B4B4B4;
  --neutral-dark-12: #EEEEEE;
  --neutral-dark-alpha-1: rgba(17, 17, 187, 0.0118);
  --neutral-dark-alpha-2: rgba(203, 203, 249, 0.0431);
  --neutral-dark-alpha-3: rgba(206, 206, 250, 0.0902);
  --neutral-dark-alpha-4: rgba(210, 217, 254, 0.1608);
  --neutral-dark-alpha-5: rgba(210, 217, 254, 0.1608);
  --neutral-dark-alpha-6: rgba(218, 223, 252, 0.2039);
  --neutral-dark-alpha-7: rgba(220, 227, 254, 0.2667);
  --neutral-dark-alpha-8: rgba(222, 227, 253, 0.3804);
  --neutral-dark-alpha-9: rgba(232, 236, 255, 0.5686);
  --neutral-dark-alpha-10: rgba(230, 234, 255, 0.5176);
  --neutral-dark-alpha-11: rgba(239, 241, 254, 0.7294);
  --neutral-dark-alpha-12: rgba(250, 251, 255, 0.9373);

  --green-50: #E7F8F1;
  --green-100: #B5EAD4;
  --green-200: #91DFBF;
  --green-300: #5ED1A2;
  --green-400: #3FC890;
  --green-500: #00CA76;
  --green-600: #0EA96A;
  --green-700: #0B8452;
  --green-800: #086640;
  --green-900: rgba(0, 202, 118, 0.15);

  --green-success: #00C850;
  --green-success-alpha: rgba(0, 200, 80, 0.15);

  --red-50: #FFEDEF;
  --red-100: #FFC6CE;
  --red-200: #FFABB6;
  --red-300: #FF8495;
  --red-400: #FF6D81;
  --red-500: #FF1C41;
  --red-600: #E84258;
  --red-700: #B53345;
  --red-800: #8C2835;
  --red-900: rgba(255, 28, 65, 0.15);

  --red-danger: #FF0E00;
  --red-danger-alpha: rgba(255, 14, 0, 0.15);

  --orange-50: #FEF3E9;
  --orange-100: #FCD9BA;
  --orange-200: #FAC698;
  --orange-300: #F8AD69;
  --orange-400: #F79D4C;
  --orange-500: #F5841F;
  --orange-600: #DF781C;
  --orange-700: #AE5E16;
  --orange-800: #874911;
  --orange-900: rgba(245, 132, 31, 0.10);

  --yellow-50: #FDF8EB;
  --yellow-100: #F9EAC1;
  --yellow-200: #FFE08E;
  --yellow-300: #F2D17A;
  --yellow-400: #EFC860;
  --yellow-500: #EBBA38;
  --yellow-600: #D6A933;
  --yellow-700: #A78428;
  --yellow-800: #81661F;
  --yellow-900: rgba(235, 186, 56, 0.10);

  --red-Korea: #E84251;
  --red-Korea-alpha: rgba(232, 66, 81, 0.15);
  --blue-Korea: #4082FF;
  --blue-Korea-alpha: rgba(64, 130, 255, 0.15);
}
  
:root.yubit {
  --black: #000000;
  --white: #FFFFFF;

  --brand-light-1: #FEFDFC;
  --brand-light-2: #FFF9F1;
  --brand-light-3: #FEEFDA;
  --brand-light-4: #FDE5C4;
  --brand-light-5: #F9DAAF;
  --brand-light-6: #EFCEA1;
  --brand-light-7: #E1BE8B;
  --brand-light-8: #D2A665;
  --brand-light-9: #D0A463;
  --brand-light-10: #C8984E;
  --brand-light-11: #8C6421;
  --brand-light-12: #403627;
  --brand-light-9-alpha: rgba(208, 164, 99, 0.15);

  --brand-dark-1: #13110D;
  --brand-dark-2: #1C1813;
  --brand-dark-3: #282118;
  --brand-dark-4: #33291B;
  --brand-dark-5: #3F311D;
  --brand-dark-6: #4F3C20;
  --brand-dark-7: #644A24;
  --brand-dark-8: #815F29;
  --brand-dark-9: #D0A463;
  --brand-dark-10: #C49958;
  --brand-dark-11: #E1B573;
  --brand-dark-12: #FAE0BB;
  --brand-dark-9-alpha: rgba(208, 164, 99, 0.15);

  --neutral-light-1: #FCFCFC;
  --neutral-light-2: #F9F9F9;
  --neutral-light-3: #F0F0F0;
  --neutral-light-4: #E8E8E8;
  --neutral-light-5: #E0E0E0;
  --neutral-light-6: #D9D9D9;
  --neutral-light-7: #CECECE;
  --neutral-light-8: #BBBBBB;
  --neutral-light-9: #8D8D8D;
  --neutral-light-10: #838383;
  --neutral-light-11: #646464;
  --neutral-light-12: #202020;
  --neutral-light-alpha-1: rgba(0, 0, 0, 0.0118);
  --neutral-light-alpha-2: rgba(0, 0, 0, 0.0235);
  --neutral-light-alpha-3: rgba(0, 0, 0, 0.0627);
  --neutral-light-alpha-4: rgba(0, 0, 0, 0.0902);
  --neutral-light-alpha-5: rgba(0, 0, 0, 0.1216);
  --neutral-light-alpha-6: rgba(0, 0, 0, 0.1529);
  --neutral-light-alpha-7: rgba(0, 0, 0, 0.1922);
  --neutral-light-alpha-8: rgba(0, 0, 0, 0.2667);
  --neutral-light-alpha-9: rgba(0, 0, 0, 0.4471);
  --neutral-light-alpha-10: rgba(0, 0, 0, 0.4941);
  --neutral-light-alpha-11: rgba(0, 0, 0, 0.6078);
  --neutral-light-alpha-12: rgba(0, 0, 0, 0.874);
  --neutral-dark-1: #111111;
  --neutral-dark-2: #191919;
  --neutral-dark-3: #222222;
  --neutral-dark-4: #2A2A2A;
  --neutral-dark-5: #313131;
  --neutral-dark-6: #3A3A3A;
  --neutral-dark-7: #484848;
  --neutral-dark-8: #606060;
  --neutral-dark-9: #6E6E6E;
  --neutral-dark-10: #7B7B7B;
  --neutral-dark-11: #B4B4B4;
  --neutral-dark-12: #EEEEEE;
  --neutral-dark-alpha-1: rgba(17, 17, 187, 0.0118);
  --neutral-dark-alpha-2: rgba(203, 203, 249, 0.0431);
  --neutral-dark-alpha-3: rgba(206, 206, 250, 0.0902);
  --neutral-dark-alpha-4: rgba(210, 217, 254, 0.1608);
  --neutral-dark-alpha-5: rgba(210, 217, 254, 0.1608);
  --neutral-dark-alpha-6: rgba(218, 223, 252, 0.2039);
  --neutral-dark-alpha-7: rgba(220, 227, 254, 0.2667);
  --neutral-dark-alpha-8: rgba(222, 227, 253, 0.3804);
  --neutral-dark-alpha-9: rgba(232, 236, 255, 0.5686);
  --neutral-dark-alpha-10: rgba(230, 234, 255, 0.5176);
  --neutral-dark-alpha-11: rgba(239, 241, 254, 0.7294);
  --neutral-dark-alpha-12: rgba(250, 251, 255, 0.9373);

  --green-50: #E7F8F1;
  --green-100: #B5EAD4;
  --green-200: #91DFBF;
  --green-300: #5ED1A2;
  --green-400: #3FC890;
  --green-500: #00CA76;
  --green-600: #0EA96A;
  --green-700: #0B8452;
  --green-800: #086640;
  --green-900: rgba(0, 202, 118, 0.15);

  --green-success: #00C850;
  --green-success-alpha: rgba(0, 200, 80, 0.15);

  --red-50: #FFEDEF;
  --red-100: #FFC6CE;
  --red-200: #FFABB6;
  --red-300: #FF8495;
  --red-400: #FF6D81;
  --red-500: #FF1C41;
  --red-600: #E84258;
  --red-700: #B53345;
  --red-800: #8C2835;
  --red-900: rgba(255, 28, 65, 0.15);

  --red-danger: #FF0E00;
  --red-danger-alpha: rgba(255, 14, 0, 0.15);

  --orange-50: #FEF3E9;
  --orange-100: #FCD9BA;
  --orange-200: #FAC698;
  --orange-300: #F8AD69;
  --orange-400: #F79D4C;
  --orange-500: #F5841F;
  --orange-600: #DF781C;
  --orange-700: #AE5E16;
  --orange-800: #874911;
  --orange-900: rgba(245, 132, 31, 0.15);

  --yellow-50: #FDF8EB;
  --yellow-100: #F9EAC1;
  --yellow-200: #FFE08E;
  --yellow-300: #F2D17A;
  --yellow-400: #EFC860;
  --yellow-500: #EBBA38;
  --yellow-600: #D6A933;
  --yellow-700: #A78428;
  --yellow-800: #81661F;
  --yellow-900: rgba(235, 186, 56, 0.15);

  --red-Korea: #E84251;
  --red-Korea-alpha: rgba(232, 66, 81, 0.15);
  --blue-Korea: #4082FF;
  --blue-Korea-alpha: rgba(64, 130, 255, 0.15);
}

:root.eaglex {
  --black: #000000;
  --white: #FFFFFF;

  --brand-light-1: #FEFDFB;
  --brand-light-2: #FFF9EC;
  --brand-light-3: #FFF1CB;
  --brand-light-4: #FFE7AD;
  --brand-light-5: #FFDC90;
  --brand-light-6: #FCD08B;
  --brand-light-7: #EABF7C;
  --brand-light-8: #D8A859;
  --brand-light-9: #D4A455;
  --brand-light-10: #C8994A;
  --brand-light-11: #9B6E15;
  --brand-light-12: #463924;
  --brand-light-9-alpha: rgba(212, 164, 85, 0.15);

  --brand-dark-1: #13110D;
  --brand-dark-2: #1C1812;
  --brand-dark-3: #2A2114;
  --brand-dark-4: #372811;
  --brand-dark-5: #433112;
  --brand-dark-6: #523D19;
  --brand-dark-7: #664C20;
  --brand-dark-8: #836125;
  --brand-dark-9: #D4A455;
  --brand-dark-10: #C8994A;
  --brand-dark-11: #E5B465;
  --brand-dark-12: #F7E1BF;
  --brand-dark-9-alpha: rgba(212, 164, 85, 0.15);

  --neutral-light-1: #FCFCFC;
  --neutral-light-2: #F9F9F9;
  --neutral-light-3: #F0F0F0;
  --neutral-light-4: #E8E8E8;
  --neutral-light-5: #E0E0E0;
  --neutral-light-6: #D9D9D9;
  --neutral-light-7: #CECECE;
  --neutral-light-8: #BBBBBB;
  --neutral-light-9: #8D8D8D;
  --neutral-light-10: #838383;
  --neutral-light-11: #646464;
  --neutral-light-12: #202020;
  --neutral-light-alpha-1: rgba(0, 0, 0, 0.0118);
  --neutral-light-alpha-2: rgba(0, 0, 0, 0.0235);
  --neutral-light-alpha-3: rgba(0, 0, 0, 0.0627);
  --neutral-light-alpha-4: rgba(0, 0, 0, 0.0902);
  --neutral-light-alpha-5: rgba(0, 0, 0, 0.1216);
  --neutral-light-alpha-6: rgba(0, 0, 0, 0.1529);
  --neutral-light-alpha-7: rgba(0, 0, 0, 0.1922);
  --neutral-light-alpha-8: rgba(0, 0, 0, 0.2667);
  --neutral-light-alpha-9: rgba(0, 0, 0, 0.4471);
  --neutral-light-alpha-10: rgba(0, 0, 0, 0.4941);
  --neutral-light-alpha-11: rgba(0, 0, 0, 0.6078);
  --neutral-light-alpha-12: rgba(0, 0, 0, 0.874);

  --neutral-dark-1: #111111;
  --neutral-dark-2: #191919;
  --neutral-dark-3: #222222;
  --neutral-dark-4: #2A2A2A;
  --neutral-dark-5: #313131;
  --neutral-dark-6: #3A3A3A;
  --neutral-dark-7: #484848;
  --neutral-dark-8: #606060;
  --neutral-dark-9: #6E6E6E;
  --neutral-dark-10: #7B7B7B;
  --neutral-dark-11: #B4B4B4;
  --neutral-dark-12: #EEEEEE;
  --neutral-dark-alpha-1: rgba(17, 17, 187, 0.0118);
  --neutral-dark-alpha-2: rgba(203, 203, 249, 0.0431);
  --neutral-dark-alpha-3: rgba(206, 206, 250, 0.0902);
  --neutral-dark-alpha-4: rgba(210, 217, 254, 0.1608);
  --neutral-dark-alpha-5: rgba(210, 217, 254, 0.1608);
  --neutral-dark-alpha-6: rgba(218, 223, 252, 0.2039);
  --neutral-dark-alpha-7: rgba(220, 227, 254, 0.2667);
  --neutral-dark-alpha-8: rgba(222, 227, 253, 0.3804);
  --neutral-dark-alpha-9: rgba(232, 236, 255, 0.5686);
  --neutral-dark-alpha-10: rgba(230, 234, 255, 0.5176);
  --neutral-dark-alpha-11: rgba(239, 241, 254, 0.7294);
  --neutral-dark-alpha-12: rgba(250, 251, 255, 0.9373);

  --green-50: #E7F8F1;
  --green-100: #B5EAD4;
  --green-200: #91DFBF;
  --green-300: #5ED1A2;
  --green-400: #3FC890;
  --green-500: #00CA76;
  --green-600: #0EA96A;
  --green-700: #0B8452;
  --green-800: #086640;
  --green-900: rgba(0, 202, 118, 0.15);

  --green-success: #00C850;
  --green-success-alpha: rgba(0, 200, 80, 0.15);

  --red-50: #FFEDEF;
  --red-100: #FFC6CE;
  --red-200: #FFABB6;
  --red-300: #FF8495;
  --red-400: #FF6D81;
  --red-500: #FF1C41;
  --red-600: #E84258;
  --red-700: #B53345;
  --red-800: #8C2835;
  --red-900: rgba(255, 28, 65, 0.15);

  --red-danger: #FF0E00;
  --red-danger-alpha: rgba(255, 14, 0, 0.15);

  --orange-50: #FEF3E9;
  --orange-100: #FCD9BA;
  --orange-200: #FAC698;
  --orange-300: #F8AD69;
  --orange-400: #F79D4C;
  --orange-500: #F5841F;
  --orange-600: #DF781C;
  --orange-700: #AE5E16;
  --orange-800: #874911;
  --orange-900: rgba(245, 132, 31, 0.15);

  --yellow-50: #FDF8EB;
  --yellow-100: #F9EAC1;
  --yellow-200: #FFE08E;
  --yellow-300: #F2D17A;
  --yellow-400: #EFC860;
  --yellow-500: #EBBA38;
  --yellow-600: #D6A933;
  --yellow-700: #A78428;
  --yellow-800: #81661F;
  --yellow-900: rgba(235, 186, 56, 0.15);

  --red-Korea: #E84251;
  --red-Korea-alpha: rgba(232, 66, 81, 0.15);
  --blue-Korea: #4082FF;
  --blue-Korea-alpha: rgba(64, 130, 255, 0.15);
}

:root {
  --size-0: 0;
  --size-1: 1px;
  --size-2: 2px;
  --size-4: 4px;
  --size-5: 5px;
  --size-6: 6px;
  --size-8: 8px;
  --size-7: 7px;
  --size-10: 10px;
  --size-12: 12px;
  --size-14: 14px;
  --size-16: 16px;
  --size-20: 20px;
  --size-24: 24px;
  --size-28: 28px;
  --size-30: 30px;
  --size-32: 32px;
  --size-36: 36px;
  --size-40: 40px;
  --size-48: 48px;
  --size-56: 56px;
  --size-64: 64px;
  --size-72: 72px;
  --size-80: 80px;
  --size-92: 92px;
  --size-96: 96px;
  --size-100: 100px;

  --font-size-8: 8px; /* only used for iconfont */
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-48: 48px;

  --re-border-radius: 6px;
  --re-transition: ease-in 0.2s;
}

:root.dark {
  --text-primary: var(--white);
  --text-secondary: var(--neutral-dark-11);
  --text-tertiary: var(--neutral-dark-10);
  --text-disabled: var(--neutral-dark-9);
  --text-black: var(--black);
  --text-static-white: var(--white);
  --text-static-black: var(--black);
  --text-brand-default: var(--brand-dark-9);
  --text-brand-hover: var(--brand-dark-10);
  --text-brand-press: var(--brand-dark-9);
  --text-brand-disable: var(--brand-dark-10);
  --text-green: var(--green-500);
  --text-red: var(--red-500);
  --text-yellow: var(--yellow-200);
  --text-orange: var(--orange-500);
  --text-blue-Korea: var(--blue-Korea);
  --text-red-Korea: var(--red-Korea);

  --bg-primary: var(--black);
  --bg-secondary: var(--neutral-dark-1);
  --bg-tertiary: var(--neutral-dark-2);
  --bg-static-white: var(--white);
  --bg-static-black: var(--black);
  --bg-static-grey: var(--neutral-dark-alpha-1);
  --bg-static-brand: var(--brand-dark-9);

  --fill-fill-input: var(--neutral-dark-3);
  --fill-fill-dropdown: var(--neutral-dark-1);
  --fill-fill-switch: var(--neutral-dark-4);
  --fill-fill-slider: var(--neutral-dark-4);
  --fill-fill-tooltip: var(--neutral-dark-12);
  --fill-fill-axis: var(--neutral-light-6);
  --fill-fill-hover-1: var(--neutral-dark-alpha-3);
  --fill-fill-hover-2: var(--neutral-dark-alpha-3);
  --fill-fill-hover-card: var(--neutral-dark-3);
  --fill-fill-modal: var(--neutral-dark-1);
  --fill-fill-mask: var(--neutral-light-alpha-11);


  --fill-button-primary-default: var(--brand-dark-9);
  --fill-button-primary-hover: var(--brand-dark-10);
  --fill-button-primary-press: var(--brand-dark-11);
  --fill-button-primary-disabled: var(--neutral-dark-alpha-5);
  --fill-button-black-default: var(--white);
  --fill-button-black-hover: var(--neutral-dark-12);
  --fill-button-black-press: var(--neutral-dark-11);
  --fill-button-black-disable: var(--neutral-dark-alpha-5);
  --fill-button-secondary-default: var(--neutral-dark-alpha-3);
  --fill-button-secondary-hover: var(--neutral-dark-alpha-4);
  --fill-button-secondary-press: var(--neutral-dark-alpha-3);
  --fill-button-secondary-disable: var(--neutral-dark-alpha-5);

  --fill-tag-brand: var(--brand-dark-9-alpha);
  --fill-tag-green: var(--green-900);
  --fill-tag-green-success: var(--green-success-alpha);
  --fill-tag-red: var(--red-900);
  --fill-tag-red-danger: var(--red-success-alpha);
  --fill-tag-yellow: var(--yellow-900);
  --fill-tag-orange: var(--orange-900);
  --fill-tag-gray: var(--neutral-dark-4);
  --fill-tag-red-Korea-Alpha: var(--red-Korea-alpha);
  --fill-tag-blue-Korea-Alpha: var(--blue-Korea-alpha);

  --line-divider-primary: var(--neutral-dark-alpha-4);
  --line-default: var(--neutral-dark-alpha-7);
  --line-focus-brand: var(--brand-dark-9);
  --line-focus-red: var(--red-danger);
  --line-radio-checkbox: var(--neutral-dark-alpha-7);
  
  --line-button-default: var(--neutral-dark-alpha-6);
  --line-button-hover: var(--brand-darkt-9);
  --line-button-default: var(--neutral-dark-alpha-6);
  --border-divider-static-primary: var(--neutral-dark-alpha-4);

  --function-brand: var(--brand-dark-9);
  --function-red: var(--red-500);
  --function-red-danger: var(--red-danger);
  --function-green: var(--green-500);
  --function-green-success: var(--green-success);
  --function-orange: var(--orange-500);

   /* tradingview-color 不建议用rgba */
   --re-tv-color-platform-background: #111;
   --re-tv-color-vert-grid: #1c2129;
   --re-tv-color-horz-grid: #1c2129;
   --re-tv-color-cross-hair: #989898;
   --re-tv-main-color: #444;
   --re-tv-text-color: #9e9e9e;
   --re-tv-color-blue: #5884d0;
   --re-tv-color-blue-0: #181a22;
}

:root.light {
  --text-primary: var(--black);
  --text-secondary: var(--neutral-light-11);
  --text-tertiary: var(--neutral-light-10);
  --text-disabled: var(--neutral-light-alpha-8);
  --text-black: var(--white);
  --text-static-white: var(--white);
  --text-static-black: var(--black);
  --text-brand-default: var(--brand-light-9);
  --text-brand-hover: var(--brand-light-10);
  --text-brand-press: var(--brand-light-11);
  --text-brand-disable: var(--neutral-light-alpha-8);
  --text-green: var(--green-500);
  --text-red: var(--red-500);
  --text-yellow: var(--yellow-500);
  --text-orange: var(--orange-500);
  --text-blue-Korea: var(--blue-Korea);
  --text-red-Korea: var(--red-Korea);

  --bg-primary: var(--white);
  --bg-secondary: var(--neutral-light-1);
  --bg-tertiary: var(--neutral-light-2);
  --bg-static-white: var(--white);
  --bg-static-black: var(--black);
  --bg-static-grey: var(--neutral-dark-alpha-1);
  --bg-static-brand: var(--brand-light-9);

  --fill-fill-input: var(--neutral-light-3);
  --fill-fill-dropdown: var(--neutral-light-1);
  --fill-fill-switch: var(--neutral-light-4);
  --fill-fill-slider: var(--neutral-light-4);
  --fill-fill-tooltip: var(--neutral-light-12);
  --fill-fill-axis: var(--neutral-light-6);
  --fill-fill-hover-1: var(--neutral-light-alpha-3);
  --fill-fill-hover-2: var(--neutral-light-alpha-3);
  --fill-fill-hover-card: var(--neutral-light-3);
  --fill-fill-modal: var(--neutral-light-1);
  --fill-fill-mask: var(--neutral-light-alpha-11);

  --fill-button-primary-default: var(--brand-light-9);
  --fill-button-primary-hover: var(--brand-light-10);
  --fill-button-primary-press: var(--brand-light-11);
  --fill-button-primary-disabled: var(--neutral-light-alpha-5);
  --fill-button-black-default: var(--black);
  --fill-button-black-hover: var(--neutral-light-12);
  --fill-button-black-press: var(--neutral-light-11);
  --fill-button-black-disable: var(--neutral-light-alpha-5);
  --fill-button-secondary-default: var(--neutral-light-alpha-3);
  --fill-button-secondary-hover: var(--neutral-light-alpha-4);
  --fill-button-secondary-press: var(--neutral-light-alpha-3);
  --fill-button-secondary-disable: var(--neutral-light-alpha-5);

  --fill-tag-brand: var(--brand-light-9-alpha);
  --fill-tag-green: var(--green-900);
  --fill-tag-green-success: var(--green-success-alpha);
  --fill-tag-red: var(--red-900);
  --fill-tag-red-danger: var(--red-success-alpha);
  --fill-tag-yellow: var(--yellow-900);
  --fill-tag-orange: var(--orange-900);
  --fill-tag-gray: var(--neutral-light-4);
  --fill-tag-red-Korea-Alpha: var(--red-Korea-alpha);
  --fill-tag-blue-Korea-Alpha: var(--blue-Korea-alpha);

  --line-divider-primary	:var(--neutral-light-alpha-4);
  --line-default: var(--neutral-light-alpha-7);
  --line-focus-brand: var(--brand-light-9);
  --line-focus-red: var(--red-danger);
  --line-radio-checkbox: var(--neutral-light-alpha-7);

  --line-button-default: var(--neutral-light-alpha-6);
  --line-button-hover: var(--brand-light-9);
  --line-button-default: var(--neutral-light-alpha-6);
  --border-divider-static-primary: var(--neutral-dark-alpha-4);

  --function-brand: var(--brand-light-9);
  --function-red: var(--red-500);
  --function-red-danger: var(--red-danger);
  --function-green: var(--green-500);
  --function-green-success: var(--green-success);
  --function-orange: var(--orange-500);
}

/* yubit的button和文案有渐变，其他子站点是纯色，所以需要单独处理 */
:root.yubit .transfer-modal {
  --text-brand-default: linear-gradient(to right, var(--brand-light-6), var(--brand-light-9));
  --text-brand-hover: linear-gradient(to right, var(--brand-light-5), var(--brand-light-7));
  --text-brand-press: linear-gradient(to right, var(--brand-light-10), var(--brand-light-11));
  --text-brand-disable: var(--neutral-light-alpha-8);

  --fill-button-primary-default: linear-gradient(to right, var(--brand-light-6), var(--brand-light-9));
  --fill-button-primary-hover: linear-gradient(to right, var(--brand-light-5), var(--brand-light-7));
  --fill-button-primary-press: linear-gradient(to right, var(--brand-light-10), var(--brand-light-11));
  --fill-button-primary-disabled: var(--neutral-light-alpha-5);
}

:root.yubit .gradient {
  --text-brand-default: linear-gradient(to right, var(--brand-light-6), var(--brand-light-9));
  --text-brand-hover: linear-gradient(to right, var(--brand-light-5), var(--brand-light-7));
  --text-brand-press: linear-gradient(to right, var(--brand-light-10), var(--brand-light-11));
  --text-brand-disable: var(--neutral-light-alpha-8);

  --fill-button-primary-default: linear-gradient(to right, var(--brand-light-6), var(--brand-light-9));
  --fill-button-primary-hover: linear-gradient(to right, var(--brand-light-5), var(--brand-light-7));
  --fill-button-primary-press: linear-gradient(to right, var(--brand-light-10), var(--brand-light-11));
  --fill-button-primary-disabled: var(--neutral-light-alpha-5);
}

:root.dark.greenUpRedDown {
  --long: #00CA76;
  --long-bg: rgba(38, 242, 209, 0.08);
  --long-opacity: rgba(36, 174, 100, 0.08);
  --long-opacity-10: rgba(38, 242, 209, 0.1);
  --long-opacity-20: rgba(38, 242, 209, 0.2);
  --long-opacity-75: rgb(0, 166, 103, 0.75);
  --long-gradient: rgba(36, 174, 100, 0);
  --long-gradient-light: rgba(36, 174, 100, 0.15);
  --short: #FF1C41;
  --short-bg: rgba(229, 76, 103, 0.12);
  --short-opacity: rgba(224, 64, 64, 0.08);
  --short-opacity-10: rgba(246, 70, 93, 0.1);
  --short-opacity-20: rgba(246, 70, 93, 0.15);
  --short-opacity-75: rgba(224, 64, 64, 0.75);
  --short-gradient: rgba(224, 64, 64, 0);
  --short-gradient-light: rgba(224, 64, 64, 0.15);
}

:root.dark.redUpGreenDown {
    --long: #FF1C41;
    --long-bg: rgba(229, 76, 103, 0.12);
    --long-opacity: rgba(224, 64, 64, 0.08);
    --long-opacity-10: rgba(246, 70, 93, 0.1);
    --long-opacity-20: rgba(246, 70, 93, 0.15);
    --long-opacity-75: rgba(224, 64, 64, 0.75);
    --long-gradient: rgba(36, 174, 100, 0);
    --long-gradient-light: rgba(224, 64, 64, 0.15);
    --short: #00CA76;
    --short-bg: rgba(38, 242, 209, 0.08);
    --short-opacity: rgba(36, 174, 100, 0.08);
    --short-opacity-10: rgba(38, 242, 209, 0.1);
    --short-opacity-20: rgba(38, 242, 209, 0.2);
    --short-opacity-75: rgb(0, 166, 103, 0.75);
    --short-gradient: rgba(224, 64, 64, 0);
    --short-gradient-light: rgba(36, 174, 100, 0.15);
}

:root.dark.redUpBlueDown {
  --long: #FF1C41;
    --long-bg: rgba(229, 76, 103, 0.12);
    --long-opacity: rgba(224, 64, 64, 0.08);
    --long-opacity-10: rgba(246, 70, 93, 0.1);
    --long-opacity-20: rgba(246, 70, 93, 0.15);
    --long-opacity-75: rgba(224, 64, 64, 0.75);
    --long-gradient: rgba(224, 64, 64, 0);
    --long-gradient-light: rgba(224, 64, 64, 0.15);
    --short: #348FEA;
    --short-bg: rgba(52, 143, 234, 0.08);
    --short-opacity: rgba(52, 143, 234, 0.08);
    --short-opacity-10: rgba(52, 143, 2349, 0.1);
    --short-opacity-15: rgba(52, 143, 234, 0.15);
    --short-opacity-20: rgba(52, 143, 234, 0.15);
    --short-opacity-75: rgb(52, 143, 234, 0.75);
    --short-gradient: rgba(36, 174, 100, 0);
    --short-gradient-light: rgba(52, 143, 234, 0.15);
}

:root.eaglex.light {
  --text-primary: var(--black);
  --text-secondary: var(--neutral-light-11);
  --text-tertiary: var(--neutral-light-10);
  --text-disabled: var(--neutral-light-alpha-8);
  --text-black: var(--white);
  --text-static-white: var(--white);
  --text-static-black: var(--black);
  --text-brand-default: var(--brand-light-9);
  --text-brand-hover: var(--brand-light-10);
  --text-brand-press: var(--brand-light-11);
  --text-brand-disable: var(--neutral-light-alpha-8);
  --text-green: var(--green-500);
  --text-red: var(--red-500);
  --text-yellow: var(--yellow-500);
  --text-orange: var(--orange-500);
  --text-blue-Korea: var(--blue-Korea);
  --text-red-Korea: var(--red-Korea);

  --bg-primary: var(--white);
  --bg-secondary: var(--neutral-light-1);
  --bg-tertiary: var(--neutral-light-2);
  --bg-static-white: var(--white);
  --bg-static-black: var(--black);
  --bg-static-grey: var(--neutral-dark-alpha-1);
  --bg-static-brand: var(--brand-light-9);

  --fill-fill-input: var(--neutral-light-3);
  --fill-fill-dropdown: var(--neutral-light-1);
  --fill-fill-switch: var(--neutral-light-4);
  --fill-fill-slider: var(--neutral-light-4);
  --fill-fill-tooltip: var(--neutral-light-12);
  --fill-fill-axis: var(--neutral-light-6);
  --fill-fill-hover-1: var(--neutral-light-alpha-3);
  --fill-fill-hover-2: var(--neutral-light-alpha-3);
  --fill-fill-hover-card: var(--neutral-light-3);
  --fill-fill-modal: var(--neutral-light-1);
  --fill-fill-mask: var(--neutral-light-alpha-11);

  --fill-button-primary-default: var(--brand-light-9);
  --fill-button-primary-hover: var(--brand-light-10);
  --fill-button-primary-press: var(--brand-light-11);
  --fill-button-primary-disabled: var(--neutral-light-alpha-5);
  --fill-button-black-default: var(--black);
  --fill-button-black-hover: var(--neutral-light-12);
  --fill-button-black-press: var(--neutral-light-11);
  --fill-button-black-disable: var(--neutral-light-alpha-5);
  --fill-button-secondary-default: var(--neutral-light-alpha-3);
  --fill-button-secondary-hover: var(--neutral-light-alpha-4);
  --fill-button-secondary-press: var(--neutral-light-alpha-3);
  --fill-button-secondary-disable: var(--neutral-light-alpha-5);
  --fill-button-green-default: var(--green-500);
  --fill-button-green-hover: var(--green-400);
  --fill-button-green-press: var(--green-600);
  --fill-button-green-disable: var(--green-100);
  --fill-button-red-default: var(--red-500);
  --fill-button-red-hover: var(--red-400);
  --fill-button-red-press: var(--red-600);
  --fill-button-red-disable: var(--red-100);

  --fill-tag-brand: var(--brand-light-9-alpha);
  --fill-tag-green: var(--green-900);
  --fill-tag-green-success: var(--green-success-alpha);
  --fill-tag-red: var(--red-900);
  --fill-tag-red-danger: var(--red-danger-alpha);
  --fill-tag-yellow: var(--yellow-900);
  --fill-tag-orange: var(--orange-900);
  --fill-tag-gray: var(--neutral-light-4);
  --fill-tag-red-Korea-Alpha: var(--red-Korea-alpha);
  --fill-tag-blue-Korea-Alpha: var(--blue-Korea-alpha);

  --line-divider-primary: var(--neutral-light-alpha-4);
  --line-default: var(--neutral-light-alpha-7);
  --line-focus-brand: var(--brand-light-9);
  --line-focus-red: var(--red-danger);
  --line-radio-checkbox: var(--neutral-light-alpha-7);
  --line-button-default: var(--neutral-light-alpha-6);
  --line-button-hover: var(--brand-light-9);
  --line-button-disable: var(--neutral-light-alpha-6);
  --border-divider-static-primary: var(--neutral-dark-alpha-4);

  --function-brand: var(--brand-light-9);
  --function-red: var(--red-500);
  --function-red-danger: var(--red-danger);
  --function-green: var(--green-500);
  --function-green-success: var(--green-success);
  --function-orange: var(--orange-500);
  --blue-Korea: var(--blue-Korea);
  --red-Korea: var(--red-Korea);
}

:root.eaglex.dark {
  --text-primary: var(--white);
  --text-secondary: var(--neutral-dark-11);
  --text-tertiary: var(--neutral-dark-10);
  --text-disabled: var(--neutral-dark-alpha-8);
  --text-black: var(--black);
  --text-static-white: var(--white);
  --text-static-black: var(--black);
  --text-brand-default: var(--brand-dark-9);
  --text-brand-hover: var(--brand-dark-10);
  --text-brand-press: var(--brand-dark-11);
  --text-brand-disable: var(--neutral-light-alpha-8);
  --text-green: var(--green-500);
  --text-red: var(--red-500);
  --text-yellow: var(--yellow-200);
  --text-orange: var(--orange-500);
  --text-blue-Korea: var(--blue-Korea);
  --text-red-Korea: var(--red-Korea);

  --bg-primary: var(--black);
  --bg-secondary: var(--neutral-dark-1);
  --bg-tertiary: var(--neutral-dark-2);
  --bg-static-white: var(--white);
  --bg-static-black: var(--black);
  --bg-static-grey: var(--neutral-dark-alpha-1);
  --bg-static-brand: var(--brand-dark-9);

  --fill-fill-input: var(--neutral-dark-3);
  --fill-fill-dropdown: var(--neutral-dark-1);
  --fill-fill-switch: var(--neutral-dark-4);
  --fill-fill-slider: var(--neutral-dark-4);
  --fill-fill-tooltip: var(--neutral-dark-12);
  --fill-fill-axis: var(--neutral-light-6);
  --fill-fill-hover-1: var(--neutral-dark-alpha-3);
  --fill-fill-hover-2: var(--neutral-dark-alpha-3);
  --fill-fill-hover-card: var(--neutral-dark-3);
  --fill-fill-modal: var(--neutral-dark-1);
  --fill-fill-mask: var(--neutral-light-alpha-11);

  --fill-button-primary-default: var(--brand-dark-9);
  --fill-button-primary-hover: var(--brand-dark-10);
  --fill-button-primary-press: var(--brand-dark-11);
  --fill-button-primary-disabled: var(--neutral-dark-alpha-5);
  --fill-button-black-default: var(--white);
  --fill-button-black-hover: var(--neutral-dark-12);
  --fill-button-black-press: var(--neutral-dark-11);
  --fill-button-black-disable: var(--neutral-dark-alpha-5);
  --fill-button-secondary-default: var(--neutral-dark-alpha-3);
  --fill-button-secondary-hover: var(--neutral-dark-alpha-4);
  --fill-button-secondary-press: var(--neutral-dark-alpha-3);
  --fill-button-secondary-disable: var(--neutral-dark-alpha-5);
  --fill-button-green-default: var(--green-600);
  --fill-button-green-hover: var(--green-500);
  --fill-button-green-press: var(--green-700);
  --fill-button-green-disable: var(--green-800);
  --fill-button-red-default: var(--red-600);
  --fill-button-red-hover: var(--red-500);
  --fill-button-red-press: var(--red-700);
  --fill-button-red-disable: var(--red-900);

  --fill-tag-brand: var(--brand-dark-9-alpha);
  --fill-tag-green: var(--green-900);
  --fill-tag-green-success: var(--green-success-alpha);
  --fill-tag-red: var(--red-900);
  --fill-tag-red-danger: var(--red-danger-alpha);
  --fill-tag-yellow: var(--yellow-900);
  --fill-tag-orange: var(--orange-900);
  --fill-tag-gray: var(--neutral-dark-4);
  --fill-tag-red-Korea-Alpha: var(--red-Korea-alpha);
  --fill-tag-blue-Korea-Alpha: var(--blue-Korea-alpha);

  --line-divider-primary: var(--neutral-dark-alpha-4);
  --line-default: var(--neutral-dark-alpha-7);
  --line-focus-brand: var(--brand-dark-9);
  --line-focus-red: var(--red-danger);
  --line-radio-checkbox: var(--neutral-dark-alpha-7);
  --line-button-default: var(--neutral-dark-alpha-6);
  --line-button-hover: var(--brand-dark-9);
  --line-button-disable: var(--neutral-dark-alpha-6);
  --border-divider-static-primary: var(--neutral-dark-alpha-4);

  --function-brand: var(--brand-dark-9);
  --function-red: var(--red-500);
  --function-red-danger: var(--red-danger);
  --function-green: var(--green-500);
  --function-green-success: var(--green-success);
  --function-orange: var(--orange-500);
  --blue-Korea: var(--blue-Korea);
  --red-Korea: var(--red-Korea);
}