:root {
    --primary-color: #36368c;
    --primary-color-hover: #3e3e97;

    --secondary-color: #AB3CB5;
    --secondary-color-hover: #d84be6;

    --background-color: #fffff0;

    --on-bg-color: #C4EAE1;

    --element-bg-color: #ffffff;

    --text-color: #000000;
    --text-white: #ffffff;

    --message-color: #ABDBF0;
    --message-border-color: #6AB6D7;

    --error-color: #D95B5B;
    --error-border-color: #E42121;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 10px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;

    --border-radius: 10px;
    --border-radius-md: 5px;
    --border-radius-sm: 2px;
    --border-radius-round : 50%;

    --icon-size : 20px;

    --component-header-height: 48px;

    --input-height: 40px;

    --font-family: Inter, sans-serif;

    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size: 15px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-size-title: 18px;

    --bold : 700;
    --semi-bold : 600;
    --medium: 500;

    --gap : var(--spacing-md);

}

* {
    box-sizing: border-box;
}

h1 {
    font-size: 28px;
    font-weight: var(--bold);
    margin: 0;
    line-height: 1.3;
}

h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--bold);
    margin: 0;
    line-height: 1.4;
}

h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--semi-bold);
    margin: 0;
    line-height: 1.4;
}

body{
    font-family: var(--font-family);
    font-size: var(--font-size);
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.6;
}

@media screen and (max-width: 1000px) {
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: var(--font-size-lg);
    }
}