@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --primary-50: #E9F2F5;
    --primary-100: #BED8E2;
    --primary-200: #94BFCF;
    --primary-300: #67A6BC;
    --primary-400: #5099B2;
    --primary-500: #05809F; /*primary*/
    --primary-600: #035d75;
    --primary-700: #024d61;
    --light: #fff;
    --dark: #1b1b1b;
    --postit: #f9f8e1;
    --postit-hover: #e7e6ae;
    --accent: #D30E53;
    --accent-50: #fbe7ee;
    --accent-100: #f6cfdd;
    --accent-200: #f399a6;
    --accent-800: #b70b47;
    --accent-900: #9c073b;
    --background: #E8ECEF;
    --grey-50: #fafafa;
    --grey-100: #f8f8f8;
    --grey-200: #ebebeb;
    --grey-300: #d4d4d4;
    --grey-400: #b5b5b5;
    --grey-500: #9c9c9c;
    --grey-600: #808080;
    --grey-700: #606060;
    --grey-800: #525252;
    --grey-900: #383838;
    --green-50: #d2e4d4;
    --green-100: #a6c9a8;
    --green-200: #88b78b;
    --green-400: #6aa56e;
    --green-600: #558458;
    --green-700: #406342;
    --green-800: #2a422c;
    --green-900: #203121;
    --validation-info-light: #d6ebff;
    --validation-info-default: #0172f0;
    --validation-info-dark: #004a8f;
    --validation-correct-light: #eafaef;
    --validation-correct-default: #1e853c;
    --validation-correct-dark: #256312;
    --validation-warning-light: #fff7eb;
    --validation-warning-default: #ff9f0a;
    --validation-warning-dark: #aa6010;
    --validation-wrong-light: #fce9e8;
    --validation-wrong-default: #de1131;
    --validation-wrong-dark: #ab0d26;
    --font-weight-regular: normal;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --heading-large: 500 clamp(2rem, calc(1.25vw + 1.5rem), 3rem) / 1.3 'Roboto';
    --heading-medium: 500 clamp(1.5rem, calc(1vw + 1rem), 2rem) / 1.3 'Roboto';
    --heading-small: 500 clamp(1.2rem, calc(0.8vw + 0.8rem), 1.5rem) / 1.3 'Roboto';
    --heading-xsmall: 500 clamp(1rem, calc(0.5vw + 0.7rem), 1.25rem) / 1.3 'Roboto';
    --paragraph-xlarge: 400 clamp(1.4rem, calc(1vw + 1rem), 1.75rem) / 1.2 'Roboto';
    --paragraph-large: 400 clamp(1.2rem, calc(0.7vw + 0.8rem), 1.5rem) / 1.2 'Roboto';
    --paragraph-medium: 400 clamp(1rem, calc(0.5vw + 0.7rem), 1.25rem) / 1.2 'Roboto';
    --paragraph-small: 400 clamp(0.9rem, calc(0.45vw + 0.6rem), 1rem) / 1.2 'Roboto';
    --paragraph-xsmall: 400 clamp(0.8rem, calc(0.4vw + 0.5rem), 1rem) / 1.2 'Roboto';
}

.pink-theme {
    --primary-50: #fbe7ee;
    --primary-100: #f6cedf;
    --primary-200: #f2b7cb;
    --primary-300: #ed9fba;
    --primary-400: #e987a9;
    --primary-500: #d30e53;
    --primary-600: #9c073b;
    --primary-700: #820530;
    --background: #efe8ea;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
    background: var(--background);
    color: var(--grey-900);
    height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.6s ease-in;
}

body {
    accent-color: var(--primary-500);
    overflow-y: scroll;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    margin: 0;
    padding: 0;
}