@import "./style/tokens.css";
@import "./style/reset.css";
@import "./style/font-face-en.css";
@import "./style/font-face-zh-hant.css";
@import "./style/font-face-zh-hans.css";
@import "./style/style.css";
@import "./style/_dbs-base.css";

:root{
    button.gs-btn{
        padding: 8px 24px;
        border-radius: 9999px;
        height: fit-content;
    }
    *,
    *::after,
    *::before {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
    }

}

body{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-weight: var(--font-weight-light) ;
    font-family: var(--text-body-font-family) !important;
    line-height: normal ;
    color:  var(--color-black);
    .list-item:hover{
        background-color: #F7F7F7;
        border-radius: 8px;
        cursor: pointer;
    }
    a.gs-anchor:link{
        text-decoration: none;
        color: #17181A;
    }
    button.primary{
        background-color: #0c0319;
        >*{
          color: #ffffff;
        }    
      }
    button.primary:hover{
        background-color: #290758;
        cursor: pointer;
    }
    button.secondary:hover{
        background-color: #eef2f5;
        cursor: pointer;
    }
}

/*Color Slates*/
.u-color-slate-0 {
    color: var(--color-slate-00);
}
.u-color-slate-10 {
    color: var(--color-slate-10);
}
.u-color-slate-20 {
    color: var(--color-slate-20);
}
.u-color-slate-30 {
    color: var(--color-slate-30);
}
.u-color-slate-40 {
    color: var(--color-slate-40);
}
.u-color-slate-50 {
    color: var(--color-slate-50);
}
.u-color-slate-60 {
    color: var(--color-slate-60);
}
.u-color-slate-70 {
    color: var(--color-slate-70);
}
.u-color-slate-80 {
    color: var(--color-slate-80);
}
.u-color-slate-90 {
    color: var(--color-slate-90);
}
.u-color-slate-100 {
    color: var(--color-slate-100);
}
.u-color-slate-110 {
    color: var(--color-slate-110);
}

/* DLS 3.1 Elevations */
.u-elevation--1 {
    box-shadow: var(--elevation-1);
}
  
.u-elevation--2 {
    box-shadow: var(--elevation-2);
}

.u-elevation--3 {
    box-shadow: var(--elevation-3);
}

.u-elevation--4 {
    box-shadow: var(--elevation-4);
}

.u-elevation--5 {
    box-shadow: var(--elevation-5);
}

.u-elevation--drawer {
    box-shadow: var(--drawer-panel-elevation);
}

.u-elevation--primary-btn {
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.25);
}

.u-elevation--sticky-bottom {
    box-shadow: var(--elevation-sticky-bottom);
}

/* Fonts */
.u-font-extra-bold {
    font-weight: var(--font-weight-extra-bold);
}
.u-font-bold {
    font-weight: var(--font-weight-bold);
}
.u-font-semi-bold {
    font-weight: var(--font-weight-medium);
}
.u-font-regular {
    font-weight: var(--font-weight-normal);
}
.u-font-light {
    font-weight: var(--font-weight-light);
}
.u-font-uppercase {
    text-transform: uppercase;
}
.u-font-lowercase {
    text-transform: lowercase;
}
.u-font-capitalize {
    text-transform: capitalize;
}
.u-font-underline {
    text-decoration: underline;
}
.u-font-overline {
    text-decoration: overline;
}
.u-font-linethrough {
    text-decoration: line-through ;
}

/* New Font Weights */
.u-font-weight-thin{
    font-weight: var(--font-weight-thin);
}
.u-font-weight-extra-light{
    font-weight:  var(--font-weight-extra-light)
}
.u-font-weight-light{
    font-weight: var(--font-weight-light);
}
.u-font-weight-normal{
    font-weight:  var(--font-weight-normal);
}
.u-font-weight-medium {
    font-weight: var(--font-weight-medium);
}
.u-font-weight-semibold{
    font-weight: var(--font-weight-semibold);
}
.u-font-weight-bold{
    font-weight: var(--font-weight-bold);
}
.u-font-weight-extra-bold{
    font-weight: var(--font-weight-extra-bold);
}
.u-font-weight-black{
    font-weight: var(--font-weight-black);
}

/* Typography 3.1 */

/*h1*/
h1 {
    color: var(--color-slate-110);
    font-size: var(--font-size-56) ;
    font-weight: var(--font-weight-normal);
    line-height: 7.6rem  ;
    letter-spacing: var(--tracking-normal);
}
h1.regular{
    font-weight: var(--font-weight-normal);
}
h1.medium{
    font-weight: var(--font-weight-medium);
}
h1.semi-bold{
    font-weight: var(--font-weight-semibold);
}

/*h2*/
h2 {
    color: var(--color-slate-110);
    font-size: var(--typography-font-size-4-xl);
    font-weight: var(--font-weight-normal);
    line-height:  var(--space-56);
    letter-spacing: var(--tracking-tight);
}
h2.regular {
    font-weight: var(--font-weight-normal);
}
h2.medium {
    font-weight: var(--font-weight-medium);
}
h2.semi-bold {
    font-weight: var(--font-weight-semibold);
}

/*h3*/
h3 {
    color: var(--color-slate-110);
    font-size:  var(--typography-font-size-3-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--space-48);
    letter-spacing: var(--tracking-normal);
}
h3.medium{
    font-weight: var(--font-weight-medium);
}
h3.semi-bold{
    font-weight: var(--font-weight-semibold);
}

/*h4*/
h4 {
    color: var(--color-slate-110);
    font-size: var(--currency-pair-amount-2-xl-font-size);
    font-weight: var(--font-weight-medium);
    line-height: 3.8rem ;
    letter-spacing: var(--tracking-normal);
}
h4.medium {
    font-weight: var(--font-weight-medium);
}
h4.semi-bold {
    font-weight: var(--font-weight-semibold);
}

/*h5*/
h5 {
    color: var(--color-slate-110);
    font-size: var(--typography-font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height:  var(space-28);
    letter-spacing: var(--tracking-normal);
}
h5.medium {
    font-weight: var(--font-weight-medium);
}
h5.semi-bold {
    font-weight: var(--font-weight-semibold);
}

/*h6*/
h6 {
    color:var(--color-slate-110);
    font-size: var(--typography-font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--space-24);
    letter-spacing: var(--tracking-normal);
}
h6.medium {
    font-weight: var(--font-weight-medium);
}
h6.semi-bold {
    font-weight: var(--font-weight-semibold);
}

/*title*/
.title{
    color: var(--color-slate-110);
    font-size: var(--typography-font-size-md) ;
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    letter-spacing: var(--tracking-normal);
}
.title.medium {
    font-weight: var(--font-weight-medium);
}
.title.semi-bold {
    font-weight: var(--font-weight-semibold);
}
.title.small{
    font-size: var(--typography-font-size-sm);
}

/*text*/
.text.regular {
    font-weight: var(--font-weight-normal);
}
.text.medium {
    font-weight: var(--font-weight-medium);
}
.text.small{
    font-size: var(--typography-font-size-xs);
}
.text.footnote{
    font-size: var(--typography-font-size-2-xs);
}
.text.tiny{
    font-size:  var(--typography-font-size-3-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.0;
    letter-spacing: var(--tracking-wide);
}

/*sub-head*/
.sub-head {
    color: var(--color-slate-110);
    font-size: var(--font-size-32);
    line-height:  var(--space-40);
    font-weight: var(--font-weight-light);
    letter-spacing: -.75px;
}

/*paragraph*/
p {
    color: var(--color-slate-110);
    font-size: var(--typography-font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--space-24);
    letter-spacing: var(--tracking-normal);
}
p.semi-bold {
    font-weight: var(--font-weight-medium);
}
p.bold {
    font-weight: var(--font-weight-bold);
}
p.regular {
    font-weight: var(--font-weight-normal);
}
p.medium {
    font-weight: var(--font-weight-medium);
}
p.small{
    font-size: var(--typography-font-size-xs);
    line-height: var(--space-20);
    letter-spacing: var(--tracking-normal);
    color: var(--color-slate-90);
}
p.footnote{
    font-size:  var(--typography-font-size-2-xs);
    line-height: var(--space-16);
    letter-spacing: -var(--tracking-normal);
}

/*label*/
label {
    color: var(--color-slate-60);
    font-size: var(--font-size-14);
    line-height: var(--space-24);
    font-weight: var(--font-weight-normal);
    letter-spacing: -.25px;
}

/*tips*/
.tips {
    color: var(--color-slate-80) ;
    font-size: var(--font-size-12);
    line-height: var(--space-18);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--space-0);
}

/*caption*/
caption {
    color: var(--color-slate-80);
    font-size: var(--font-size-16);
    line-height: var(--space-24);
    font-weight: var(--font-weight-medium);
    display:inline-block;
    text-align: left;
    letter-spacing: -.5px;
}

/*code*/
code {
    color: var(--color-slate-80);
    font-size: var(--font-size-16);
    line-height: var(--space-24);
    font-weight: var(--font-weight-normal);
    letter-spacing: -.5px;
}

/*a*/
a {
    font-size: var(--font-size-16);
    line-height: var(--space-24);
    font-weight: var(--font-weight-normal) ;
    letter-spacing: -.25px;
}

a.gs-anchor:link, a.gs-anchor:active, a.gs-anchor:visited, a.gs-anchor:hover{
    cursor: pointer;
}

a:focus {
    outline: none;
}