:root {
    interpolate-size: allow-keywords;
}

@font-face {
    font-family: "Golos Text";
  
    font-display: swap;
    src: url('./fonts/GolosText/Golos-Text_VF.ttf') format('truetype');
  }

@layer default {
body {
    height: 100vh;
    margin: 0;
}

p,ul,ol,h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}

h1 {
    --font-size-base: clamp(0.0625rem, 0.0417rem + 0.0926vw, 0.125rem);;

    font-family: var(--font-family);
    font-size: calc(var(--font-size-base) * 32);;
    font-weight: 700;
    line-height: 100%;
    color: var(--color-font-primary);
}

h3 {
    font-family: var(--font-family);
    font-size: calc(var(--font-size-base) * 15);
    font-weight: 700;
    line-height: 127%;
    color: var(--color-font-primary);
}

h4 {
    font-family: var(--font-family);
    font-size: calc(var(--font-size-base) * 12);
    font-weight: 700;
    line-height: 133%;
    color: var(--color-font-primary);
}

h5 {
    font-family: var(--font-family);
    font-size: calc(var(--font-size-base) * 8);
    font-weight: 700;
    line-height: 150%;
    color: var(--color-font-primary);
}

p {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    color: var(--color-font-secondary);;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

ol { 
    counter-reset: item;
    list-style-type: none;

    &>li {
      display: block;
    }
    
    &>li::before {
      content: counters(item, ".") ". "; 
      counter-increment: item;
    }
}
  

.vue-loading {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.vue-loading[v-cloak] {
	opacity: 0;
}

.luxe-index{
    display: flex;
    flex-direction: column;
    padding-inline: var(--page-padding-inline);
}

.header-container {
    color: var(--color-font-primary);
    background-color: var(--color-primary);
}

.app{
    height: 100%;
}

.footer{
    margin-top: auto;
}

.main-container{
    --black: #000;
    --white: #fff;
    --color-primary:;
	--color-secondary:;
	--color-border:;
	--color-icon:;
	--color-font-primary:;
	--color-font-secondary:;
	--color-brand:;
	--color-brand-light:;
	--color-brand-smooth:;
    --color-mix:;

    /* Accents */
    --accent-error: #f55d6d;
	--accent-success: #5dc14a;
	--accent-caution: #f5d140;

    /* Dimensions */

    --dimension-base: clamp(0.0625rem, 0.0417rem + 0.0926vw, 0.125rem);
    --font-size-base: clamp(0.1rem, 0.0917rem + 0.037vw, 0.125rem);
    --dimension-button-padding: calc(var(--dimension-base) * 8) calc(var(--dimension-base) * 12);
    --page-padding-inline: calc(var(--dimension-base) * 60);
    --border-radius-base: calc(var(--dimension-base) * 4);

    /* Typography */
    --font-family: 'Golos Text', sans-serif;

    position: relative;

    overflow-x: clip;
    display: flex;
    flex-direction: column;

    height: fit-content;
    min-height: 100vh;

    font-family: var(--font-family);
    font-size: calc(var(--font-size-base) * 8);
    font-weight: 400;
    line-height: 150%;
    color: var(--color-font-secondary);

    background-color: var(--color-primary);

    /* text-align: center; */
}

.button {
    position: relative;

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    height: fit-content;
    padding: var(--dimension-button-padding);
    border: var(--dimension-base) solid transparent;
    border-radius: calc(var(--dimension-base) * 6);

    font-family: var(--font-family);
    font-size: calc(var(--font-size-base) * 8);
    font-weight: 700;
    line-height: 150%;
    text-align: center;
    text-wrap: nowrap;

    .active:hover {
        background-color: auto;
    }

    &>a, &>router-link {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;
    }
}

.button.primary {
    border-color: var(--color-brand);
    color: var(--color-secondary);
    background-color: var(--color-brand);

    &:hover {
        background-color: var(--color-brand-light);        
    }
}

.button.secondary {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background-color: transparent;

    &:hover {
        background-color: var(--color-brand-smooth);
    }

    &.active {
        border-color: var(--color-brand);
        color: var(--color-secondary);
        background-color: var(--color-brand);
    }
} 

.button.clear {
    color: var(--color-brand);
    background-color: transparent;

    &:hover {
        background-color: var(--color-brand-smooth);
    }
}

.button.icon {
    padding: calc(var(--dimension-base) * 8);
}

.button.medium {
    padding: calc(var(--dimension-base) * 5) calc(var(--dimension-base) * 8);
    border-radius: calc(var(--dimension-base) * 4);
}

.button.disabled {
    color: var(--color-icon);
    background-color: var(--color-secondary);
}

.input{
    height: fit-content;
    padding: calc(var(--dimension-base) * 5) calc(var(--dimension-base) * 8);
    border: var(--dimension-base) solid var(--color-border);
    border-radius: calc(var(--dimension-base) * 4);

    font-size: calc(var(--font-size-base) * 8);
    font-weight: 400;
    line-height: 150%;
    color: inherit;

    background-color: var(--color-primary);

    &:hover{
        border-color: var(--color-brand);
    }

    &:focus,
    &:focus-visible {
        border-color: var(--color-brand);
        outline: none;
    }

    &.error {
        border-color: var(--accent-error);
    }

    &.success {
        border-color: var(--accent-success);
    }

    &:disabled {
        color: var(--color-icon);
        background-color: var(--color-secondary);
    }
}


a {
    color: var(--color-font-primary);
    text-decoration: none;

    &:visited {
        color: var(--color-font-primary);
    }

    &:hover {
        /* font-weight: 700; */
        color: var(--color-brand-light);
    }

    &.active {
        font-weight: 700;
        color: var(--color-brand);
        text-decoration: underline;
    }
}

.edit-overlay {
    position: absolute;
    z-index: 500;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    border-radius: calc(var(--dimension-base) * 12);

    opacity: 0;
    background-color: rgb(0 0 0 / 50%);

    transition: opacity 0.3s ease-in-out;

    &>.edit-overlay-button {
        position: absolute;
        top: 0;
        right: 0;

        display: flex;
        gap: calc(var(--dimension-base) * 4);
    }

    &:hover {
        opacity: 1;
    }
}

.page-block {
    padding: calc(var(--dimension-base) * 60);
}

.info-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dimension-base) * 20);
}

.info-section {
    display: flex;
    gap: calc(var(--dimension-base) * 10);
}


}