// some color
// @import './theme.scss';
$primarycolor: #409EFF;
// $primarycolor: var(--theme-primary);
$primarycolor-1: #3578E5;
$successcolor: #67C23A;
$warningcolor: #E6A23C;
$dangercolor: #F56C6C;
$infocolor: #909399;

$normalwhite: #ffffff;

// some font color
$primaryfont: var(--primary-color-10);
$normalfont: var(--primary-color-8);
$secondaryfont: var(--primary-color-6);
$seatfont: var(--primary-color-4);

// bgcolor
$primarybg: var(--primary-bgcolor-10);
$normalbg: var(--primary-bgcolor-8);
$secondarybg: var(--primary-bgcolor-6);
$seatbg: var(--primary-bgcolor-4);

// border
$border1: #DCDFE6;
$border2: #E4E7ED;
$border3: #EBEEF5;
$border4: #F2F6FC;

// box-shadow
.basics-box-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

$color-purple: hsla(230, 84%, 63%, 1);
$color-salmon: hsla(359, 98%, 68%, 1);
$color-green: hsla(149, 78%, 53%, 1);
$color-blue: hsla(201, 100%, 55%, 1);
$color-red: hsla(356, 86%, 55%, 1);
$color-yellow: hsla(40, 100%, 66%, 1);
$color-grey8: hsla(230, 11%, 19%, 1);
$color-grey7: hsla(230, 10%, 30%, 1);
$color-grey6: hsla(230, 9%, 45%, 1);
$color-grey5: hsla(230, 8%, 60%, 1);
$color-grey4: hsla(230, 7%, 75%, 1);
$color-grey3: hsla(230, 7%, 84%, 1);
$color-grey2: hsla(230, 7%, 92%, 1);
$color-grey1: hsla(230, 7%, 97%, 1);
$color-white: hsla(230, 7%, 100%, 1);
$themeLight-color-body: hsla(230, 11%, 19%, 1);
$themeLight-color-bodyDimmed: hsla(230, 40%, 19%, 0.6);
$themeLight-color-background: hsla(230, 7%, 100%, 1);
$themeLight-color-overlay: hsla(230, 7%, 100%, 1);
$themeLight-color-primary: hsla(230, 84%, 63%, 1);
$themeLight-color-focusRing: hsla(230, 84%, 63%, 0.5);
$themeLight-color-border: hsla(230, 9%, 45%, 0.2);
$themeLight-color-disabledContent: hsla(230, 8%, 60%, 1);
$themeLight-color-disabledBackground: hsla(230, 7%, 92%, 1);
$themeLight-color-backdrop: hsla(230, 11%, 19%, 0.5);
$themeLight-color-formFieldBorder: hsla(230, 7%, 84%, 1);
$themeLight-color-formFieldBackground: hsla(230, 7%, 100%, 1);
$themeDark-color-body: hsla(230, 7%, 97%, 1);
$themeDark-color-bodyDimmed: hsla(230, 40%, 97%, 0.6);
$themeDark-color-background: hsla(230, 11%, 19%, 1);
$themeDark-color-overlay: hsla(230, 10%, 30%, 1);
$themeDark-color-primary: hsla(230, 84%, 63%, 1);
$themeDark-color-focusRing: hsla(230, 84%, 63%, 0.5);
$themeDark-color-border: hsla(230, 7%, 75%, 0.2);
$themeDark-color-disabledContent: hsla(230, 8%, 60%, 1);
$themeDark-color-disabledBackground: hsla(230, 10%, 30%, 1);
$themeDark-color-backdrop: hsla(230, 11%, 19%, 0.5);
$themeDark-color-formFieldBorder: hsla(230, 9%, 45%, 1);
$themeDark-color-formFieldBackground: hsla(230, 11%, 19%, 1);
$fontSize-small: 12px;
$lineHeight-small: 18px;
$fontSize-medium: 14px;
$lineHeight-medium: 22px;
$fontSize-large: 18px;
$lineHeight-large: 26px;
$fontSize-xlarge: 22px;
$lineHeight-xlarge: 32px;
$fontSize-xxlarge: 32px;
$lineHeight-xxlarge: 38px;
$fontWeight-normal: 400;
// Show All Properties (11 more)
// }
// <style>
// :root, .theme-light {
//     --lns-color-body: var(--lns-themeLight-color-body);
//     --lns-color-bodyDimmed: var(--lns-themeLight-color-bodyDimmed);
//     --lns-color-background: var(--lns-themeLight-color-background);
//     --lns-color-overlay: var(--lns-themeLight-color-overlay);
//     --lns-color-primary: var(--lns-themeLight-color-primary);
//     --lns-color-focusRing: var(--lns-themeLight-color-focusRing);
//     --lns-color-border: var(--lns-themeLight-color-border);
//     --lns-color-disabledContent: var(--lns-themeLight-color-disabledContent);
//     --lns-color-disabledBackground: var(--lns-themeLight-color-disabledBackground);
//     --lns-color-backdrop: var(--lns-themeLight-color-backdrop);
//     --lns-color-formFieldBorder: var(--lns-themeLight-color-formFieldBorder);
//     --lns-color-formFieldBackground: var(--lns-themeLight-color-formFieldBackground);
// } 
