/* || Fonts ('Public Sans')
 *************************/
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* || Global Variables
 *************************/
:root {
    /* || Light Mode
     *************************/
    --stroke: #DCDCDD;
    --bg: #F1F3F4;
    --dash: #DCE3EB;
    --unit-bg: var(--white);

    /* || Additional
     *************************/
    --green: #50C099;
    --blue: #5DAAEE;
    --yellow: #FFC565;
    --salmon: #F9837C;

    --white: #FFFFFF;
    --black: #000000;

    /* || Typo Label Colors
     *************************/
    --primary-highlight: #7B57E0;
    --primary-base: #2B2E48;
    --secondary-base: #7D7D7D;
    --error: #C71026;
    --success: #0B8A00;
}

:root:has(#darkmode:checked) {
    /* || Dark Mode
     *************************/
    --stroke: #576776;
    --bg: #0D0F11;
    --dash: #334E68;
    --unit-bg: #191D23;
    --unit-bg-2: #262C36;

    /* || Additional
     *************************/
    --green: #47A785;
    --blue: #5395CF;
    --yellow: #EFB047;
    --salmon: #F9837C;

    /* || Typo Label Colors
     *************************/
    --primary-base: #e3e3e3;
    --secondary-base: #B8C0CC;
    --error: #F53B30;
    --success: #2AA31F;
}

/* || Typography
 *************************/
.text-present-1 {
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
}

.text-present-2 {
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
}

.text-present-3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
}

.text-present-4 {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
}

.text-present-4-bold {
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
}

.text-present-5 {
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
}

.text-present-5-bold {
    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
}

/* || Default Variables
 *************************/
.primary-section {
    padding: 24px 20px;
    width: 100%;
    border-radius: 12px;
    background-color: var(--unit-bg);
}

.primary-section:not(:first-child) {
    margin-top: 16px;
}

.primary-section__header {
    margin-bottom: 32px;
}

.toggler-checkbox {
    display: none;
}

@media only screen and (min-width: 768px) {
    .primary-section {
        padding: 32px;
    }

    .primary-section:not(:first-child) {
        margin-top: 24px;
    }
}

@media only screen and (min-width: 1440px) {
    .primary-section:not(:first-child) {
        margin-top: 0;
    }
}