@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');

:root {
    --color-A: #80E9B5;
    --color-A-dark: #00B692;
    --color-B: #FFDC5D;
    --color-B-dark: #EAA741;
    --color-C: #87D5FC;
    --color-C-dark: #6EABFF;
    --color-D: #FFC0EA;
    --color-success: #397EFF;
    --color-warning: #FF777C;
    --color-warning-dark: #FF3F47;
    --color-neutral: white;
    --color-neutral-dark: #E6E6E6;
    --color-neutral-dark-trans: rgba(63, 63, 63, 0.7);
    --color-dark-accent: #222222;

    --text-heading: #232323;
    --text-paragraph: #3F3F3F;

    /* Fonts */
    --font-heading: 'Dongle', sans-serif;
    --font-display: 'Bagel Fat One', cursive;

    /* Font sizes */
    --label-display: 48px;
    --label-h1: 54px;
    --label-h2: 45px;
    --label-h3: 37px;
    --label-h4: 31px;
    --label-details: 22px;
}

.heading-display {
    color: var(--text-heading, #232323);
    text-align: center;
    font-family: var(--font-display, "Bagel Fat One");
    font-size: var(--label-display, 48px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 57.6px */
}

.heading-1 {
    color: var(--text-paragraph, #3F3F3F);
    font-family: var(--font-heading, Dongle);
    font-size: var(--label-h1, 54px);
    font-weight: 400;
    line-height: 80%; /* 43.20px */
}

.heading-2 {
    color: var(--text-heading, #232323);
    text-align: center;
    font-family: var(--font-heading, Dongle);
    font-size: var(--label-h2, 45px);
    font-style: normal;
    font-weight: 400;
    line-height: 90%; /* 40.5px */
}

.heading-3 {
    color: var(--text-heading, #232323);
    font-family: var(--font-heading, 'Dongle');
    font-size: var(--label-h3, 37px);
    font-style: normal;
    font-weight: 400;
    line-height: 90%; /* 33.3px */
}

.heading-4 {
    color: var(--text-paragraph, #3F3F3F);
    text-align: center;
    font-family: var(--font-heading, Dongle);
    font-size: var(--label-h4, 31px);
    font-style: normal;
    font-weight: 400;
    line-height: 90%; /* 27.9px */
}

.tab-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--color-B, #FFDC5D);
    border-radius: 8px;
    outline: 1px solid var(--color-B-dark, #EAA741);
    outline-offset: -1px;
    text-decoration: none;
    color: var(--text-heading, #232323);
    font-family: var(--font-heading, 'Dongle');
    font-size: var(--label-h4, 31px);
    line-height: 90%;
}

.tab-button-icon {
    width: 24px;
    height: 24px;
}