@import url("design_tokens.css");
@import url("components.css");

@font-face {
    font-family: 'Open Sans';
    src:
        local('Open Sans'),
        url('../font/OpenSans-Light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src:
        local('Open Sans'),
        url('../font/OpenSans-LightItalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src:
        local('Open Sans'),
        url('../font/OpenSans-Regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src:
        local('Open Sans'),
        url('../font/OpenSans-Italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src:
        local('Open Sans'),
        url('../font/OpenSans-Semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src:
        local('Open Sans'),
        url('../font/OpenSans-SemiboldItalic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src:
        local('Open Sans'),
        url('../font/OpenSans-Bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src:
        local('Open Sans'),
        url('../font/OpenSans-BoldItalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src:
        local('Open Sans'),
        url('../font/OpenSans-ExtraBold-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src:
        local('Open Sans'),
        url('../font/OpenSans-ExtraBoldItalic-webfont.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

:root {
    --speed: 0.3s;
    --font-family: 'Open Sans';
}

*,
*::before,
*::after {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
    scrollbar-color: var(--color-primary-500) transparent;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}


html,
body {
    height: 100dvh;
}

body {
    display: grid;
    background-color: var(--color-neutral-200);
    grid-template-areas:
        "menu content"
        "menu footer";
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    min-height: 100vh;
}

dlc-menu {
    grid-area: menu;
}


main {
    grid-area: content;
    display: flex;
    gap: var(--scale16);
    background-color: var(--color-neutral-100);
    opacity: 0;
    animation: fadein var(--speed) ease 200ms 1 forwards;
}

footer {
    grid-area: footer;
    height: fit-content;
    background-color: var(--color-neutral-100);
}

h1.bold {
    font-size: var(--h1-bold-fontSize);
    font-style: normal;
    font-weight: var(--h1-bold-fontWeight);
    line-height: var(--h1-bold-lineHeight);
    letter-spacing: var(--h1-bold-letterSpacing);
    color: var(--color-neutral-900);
}

h1.semibold {
    font-size: var(--h1-semibold-fontSize);
    font-style: normal;
    font-weight: var(--h1-semibold-fontWeight);
    line-height: var(--h1-semibold-lineHeight);
    letter-spacing: var(--h1-semibold-letterSpacing);
    color: var(--color-neutral-900);
}

h1.regular {
    font-size: var(--h1-regular-fontSize);
    font-style: normal;
    font-weight: var(--h1-regular-fontWeight);
    line-height: var(--h1-regular-lineHeight);
    letter-spacing: var(--h1-regular-letterSpacing);
    color: var(--color-neutral-900);
}

h2.bold {
    font-size: var(--h2-bold-fontSize);
    font-style: normal;
    font-weight: var(--h2-bold-fontWeight);
    line-height: var(--h2-bold-lineHeight);
    letter-spacing: var(--h2-bold-letterSpacing);
    color: var(--color-neutral-900);
}

h2.semibold {
    font-size: var(--h2-semibold-fontSize);
    font-style: normal;
    font-weight: var(--h2-semibold-fontWeight);
    line-height: var(--h2-semibold-lineHeight);
    letter-spacing: var(--h2-semibold-letterSpacing);
}

h2.regular {
    font-size: var(--h2-regular-fontSize);
    font-style: normal;
    font-weight: var(--h2-regular-fontWeight);
    line-height: var(--h2-regular-lineHeight);
    letter-spacing: var(--h2-regular-letterSpacing);
    color: var(--color-neutral-900);
}

h3.bold {
    font-size: var(--h3-bold-fontSize);
    font-style: normal;
    font-weight: var(--h3-bold-fontWeight);
    line-height: var(--h3-bold-lineHeight);
    letter-spacing: var(--h3-bold-letterSpacing);
    color: var(--color-neutral-900);
}

h3.semibold {
    font-size: var(--h3-semibold-fontSize);
    font-style: normal;
    font-weight: var(--h3-semibold-fontWeight);
    line-height: var(--h3-semibold-lineHeight);
    letter-spacing: var(--h3-semibold-letterSpacing);
    color: var(--color-neutral-900);
}

h3.regular {
    font-size: var(--h3-regular-fontSize);
    font-style: normal;
    font-weight: var(--h3-regular-fontWeight);
    line-height: var(--h3-regular-lineHeight);
    letter-spacing: var(--h3-regular-letterSpacing);
    color: var(--color-neutral-900);
}

h4.bold {
    font-size: var(--h4-bold-fontSize);
    font-weight: var(--h4-bold-fontWeight);
    line-height: var(--h4-bold-lineHeight);
    letter-spacing: var(--h4-bold-letterSpacing);
    color: var(--color-neutral-900);
}

h4.semibold {
    font-size: var(--h4-semibold-fontSize);
    font-weight: var(--h4-semibold-fontWeight);
    line-height: var(--h4-semibold-lineHeight);
    letter-spacing: var(--h4-semibold-letterSpacing);
    color: var(--color-neutral-900);
}

h4.regular {
    font-size: var(--h4-regular-fontSize);
    font-weight: var(--h4-regular-fontWeight);
    line-height: var(--h4-regular-lineHeight);
    letter-spacing: var(--h4-regular-letterSpacing);
    color: var(--color-neutral-900);
}

h4.light {
    font-size: var(--h4-light-fontSize);
    font-weight: var(--h4-light-fontWeight);
    line-height: var(--h4-light-lineHeight);
    letter-spacing: var(--h4-light-letterSpacing);
    color: var(--color-neutral-900);
}

.headline-bold {
    font-size: var(--headline-bold-fontSize);
    font-weight: var(--headline-bold-fontWeight);
    line-height: var(--headline-bold-lineHeight);
    letter-spacing: var(--headline-bold-letterSpacing);
    color: var(--color-neutral-900);
}

.headline-semibold {
    font-size: var(--headline-semibold-fontSize);
    font-weight: var(--headline-semibold-fontWeight);
    line-height: var(--headline-semibold-lineHeight);
    letter-spacing: var(--headline-semibold-letterSpacing);
    color: var(--color-neutral-900);
}

.headline-regular {
    font-size: var(--headline-regular-fontSize);
    font-weight: var(--headline-regular-fontWeight);
    line-height: var(--headline-regular-lineHeight);
    letter-spacing: var(--headline-regular-letterSpacing);
    color: var(--color-neutral-900);
}

.headline-light {
    font-size: var(--headline-light-fontSize);
    font-weight: var(--headline-light-fontWeight);
    line-height: var(--headline-light-lineHeight);
    letter-spacing: var(--headline-light-letterSpacing);
    color: var(--color-neutral-900);
}

label.bold {
    font-size: var(--label-bold-fontSize);
    font-weight: var(--label-bold-fontWeight);
    line-height: var(--label-bold-lineHeight);
    letter-spacing: var(--label-bold-letterSpacing);
    color: var(--color-neutral-900);
}

label.semibold {
    font-size: var(--label-semibold-fontSize);
    font-weight: var(--label-semibold-fontWeight);
    line-height: var(--label-semibold-lineHeight);
    letter-spacing: var(--label-semibold-letterSpacing);
    color: var(--color-neutral-900);
}

label.regular {
    font-size: var(--label-regular-fontSize);
    font-weight: var(--label-regular-fontWeight);
    line-height: var(--label-regular-lineHeight);
    letter-spacing: var(--label-regular-letterSpacing);
    color: var(--color-neutral-900);
}

label.light {
    font-size: var(--label-light-fontSize);
    font-weight: var(--label-light-fontWeight);
    line-height: var(--label-light-lineHeight);
    letter-spacing: var(--label-light-letterSpacing);
    color: var(--color-neutral-900);
}

p.bold {
    font-size: var(--body-bold-fontSize);
    font-weight: var(--body-bold-fontWeight);
    line-height: var(--body-bold-lineHeight);
    letter-spacing: var(--body-bold-letterSpacing);
    color: var(--color-neutral-900);
}

p.semibold {
    font-size: var(--body-semibold-fontSize);
    font-weight: var(--body-semibold-fontWeight);
    line-height: var(--body-semibold-lineHeight);
    letter-spacing: var(--body-semibold-letterSpacing);
    color: var(--color-neutral-900);
}

p,
p.regular {
    font-size: var(--body-regular-fontSize);
    font-weight: var(--body-regular-fontWeight);
    line-height: var(--body-regular-lineHeight);
    letter-spacing: var(--body-regular-letterSpacing);
    color: var(--color-neutral-900);
}

p.light {
    font-size: var(--body-light-fontSize);
    font-weight: var(--body-light-fontWeight);
    line-height: var(--body-light-lineHeight);
    letter-spacing: var(--body-light-letterSpacing);
    color: var(--color-neutral-900);
}

.subtitle-bold {
    font-size: var(--subtitle-bold-fontSize);
    font-weight: var(--subtitle-bold-fontWeight);
    line-height: var(--subtitle-bold-lineHeight);
    letter-spacing: var(--subtitle-bold-letterSpacing);
    color: var(--color-neutral-900);
}

.subtitle-semibold {
    font-size: var(--subtitle-semibold-fontSize);
    font-weight: var(--subtitle-semibold-fontWeight);
    line-height: var(--subtitle-semibold-lineHeight);
    letter-spacing: var(--subtitle-semibold-letterSpacing);
    color: var(--color-neutral-900);
}

.subtitle-regular {
    font-size: var(--subtitle-regular-fontSize);
    font-weight: var(--subtitle-regular-fontWeight);
    line-height: var(--subtitle-regular-lineHeight);
    letter-spacing: var(--subtitle-regular-letterSpacing);
    color: var(--color-neutral-900);
}

.caption-bold {
    font-size: var(--caption-bold-fontSize);
    font-weight: var(--caption-bold-fontWeight);
    line-height: var(--caption-bold-lineHeight);
    letter-spacing: var(--caption-bold-letterSpacing);
    color: var(--color-neutral-900);
}

.caption-semibold {
    font-size: var(--caption-semibold-fontSize);
    font-weight: var(--caption-semibold-fontWeight);
    line-height: var(--caption-semibold-lineHeight);
    letter-spacing: var(--caption-semibold-letterSpacing);
    color: var(--color-neutral-900);
}

.caption-regular {
    font-size: var(--caption-regular-fontSize);
    font-weight: var(--caption-regular-fontWeight);
    line-height: var(--caption-regular-lineHeight);
    letter-spacing: var(--caption-regular-letterSpacing);
    color: var(--color-neutral-900);
}

.footnote-bold {
    font-size: var(--footnote-bold-fontSize);
    font-weight: var(--footnote-bold-fontWeight);
    line-height: var(--footnote-bold-lineHeight);
    letter-spacing: var(--footnote-bold-letterSpacing);
    text-transform: var(--footnote-bold-textCase);
    color: var(--color-neutral-900);
}

.footnote-semibold {
    font-size: var(--footnote-semibold-fontSize);
    font-weight: var(--footnote-semibold-fontWeight);
    line-height: var(--footnote-semibold-lineHeight);
    letter-spacing: var(--footnote-semibold-letterSpacing);
    text-transform: var(--footnote-semibold-textCase);
    color: var(--color-neutral-900);
}

.footnote-regular {
    font-size: var(--footnote-regular-fontSize);
    font-weight: var(--footnote-regular-fontWeight);
    line-height: var(--footnote-regular-lineHeight);
    letter-spacing: var(--footnote-regular-letterSpacing);
    text-transform: var(--footnote-regular-textCase);
    color: var(--color-neutral-900);
}

a {
    font-size: var(--body-regular-fontSize);
    font-weight: var(--body-semibold-fontWeight);
    line-height: var(--body-regular-lineHeight);
    letter-spacing: var(--body-regular-letterSpacing);
    color: var(--color-primary-400);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* EFFECTS */
.shadow-xs {
    box-shadow: var(--dropshadow-xs);
}

.shadow-s {
    box-shadow: var(--dropshadow-s);
}

.shadow-m {
    box-shadow: var(--dropshadow-m);
}

.shadow-l {
    box-shadow: var(--dropshadow-l);
}

.shadow-xl {
    box-shadow: var(--dropshadow-xl);
}

.blur-xs {
    backdrop-filter: var(--blur-xs);
}

.blur-s {
    backdrop-filter: var(--blur-s);
}

.blur-m {
    backdrop-filter: var(--blur-m);
}

.blur-l {
    backdrop-filter: var(--blur-l);
}

.blur-xl {
    backdrop-filter: var(--blur-xl);
}

ul {
    list-style: none;
}

.hidden {
    display: none !important;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* ANIMATIONS */

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}