@font-face {
    font-family: 'Roboto';
    src: url('/BeangoContent/fonts/roboto/Roboto-Bold.woff2') format('woff2'),
        url('/BeangoContent/fonts/roboto/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/BeangoContent/fonts/roboto/Roboto-Regular.woff2') format('woff2'),
        url('/BeangoContent/fonts/roboto/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html, body {
    color: var(--foreground);
    font-family: 'Roboto', '微軟正黑體', 'Microsoft JhengHei', sans-serif, Arial, Helvetica;
}

/* Link */
a,
a:link,
a:visited {
    color: #1E293B;
    text-decoration: none;
}

@media screen and (min-width: 992px) {
    a:hover {
        color: var(--primary);
    }
}

/* Input, Textarea */
input::placeholder,
textarea::placeholder {
    color: #94A3B8;
}

/* Button */
/* Button - solid (default) */
a.btn,
a.btn:link,
a.btn:visited,
.btn {
    padding: 12px 16px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: var(--primary-foreground);
    background-color: var(--primary-800);
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

a.btn:hover,
.btn:hover {
    color: var(--primary-foreground);
    background-color: var(--primary-900);
    border: 1px solid transparent;
}

a.btn:active,
.btn:active {
    color: var(--primary-foreground);
    background-color: var(--primary);
    border: 1px solid transparent;
    outline: none;
}

a.btn:focus,
.btn:focus {
    color: var(--primary-foreground);
}

a.btn:disabled,
a.btn.disabled,
.btn:disabled,
.btn.disabled {
    color: var(--muted-foreground);
    background-color: var(--muted);
    border: 1px solid transparent;
    cursor: not-allowed;
}

/* Button - outline */
a.btn.outline,
a.btn.outline:link,
a.btn.outline:visited,
.btn.outline {
    color: var(--primary-800);
    background-color: var(--primary-foreground);
    border: 1px solid var(--primary-800);
    box-shadow: none;
}

a.btn.outline:hover,
.btn.outline:hover {
    color: var(--primary-900);
    background-color: var(--primary-100);
    border-color: var(--primary-900);
}

a.btn.outline:active,
.btn.outline:active {
    color: var(--primary);
    background-color: var(--primary-300);
    border-color: var(--primary);
    outline: none;
}

a.btn.outline:disabled,
a.btn.outline.disabled,
.btn.outline:disabled,
.btn.outline.disabled {
    color: var(--muted-foreground);
    background-color: var(--primary-foreground);
    border-color: var(--muted-foreground);
}

/* Button - secondary - outline */
a.btn.secondary.outline,
a.btn.secondary.outline:link,
a.btn.secondary.outline:visited,
.btn.secondary.outline {
    color: var(--foreground);
    border: 1px solid var(--foreground);
}

a.btn.secondary.outline:hover,
.btn.secondary.outline:hover {
    background-color: #F1F5F9;
}

a.btn.secondary.outline:active,
.btn.secondary.outline:active {
    background-color: #CBD5E1;
}

/* Button - ghost */
a.btn.ghost,
a.btn.ghost:link,
a.btn.ghost:visited,
.btn.ghost {
    color: var(--primary-800);
    background-color: transparent;
    box-shadow: none;
}

a.btn.ghost:hover,
.btn.ghost:hover {
    color: var(--primary-900);
    background-color: var(--primary-100);
}

a.btn.ghost:active,
.btn.ghost:active {
    color: var(--primary);
    background-color: var(--primary-300);
    outline: none;
}

a.btn.ghost:disabled,
a.btn.ghost.disabled,
.btn.ghost:disabled,
.btn.ghost.disabled {
    color: var(--muted-foreground);
    background-color: var(--primary-foreground);
}

a.btn:focus,
a.btn.outline:focus,
a.btn.ghost:focus,
.btn:focus,
.btn.outline:focus,
.btn.ghost:focus {
    outline: none;
}

/* Shape */
.btn.rounded {
    border-radius: 35px;
}

/* icon */
i.svg-icon {
    width: 20px;
    height: 20px;
    display: block;
    mask-position: center;
    mask-size: contain;
    background-color: var(--foreground);
}