:root {
    /* Color */
    --color-black-bean: #303434;
    --color-ice: #EDEEE9;
    --color-olive: #9CA14E;
    --color-dark-olive: #5a6b1a;
    --color-smoke: #AAAAAB;
    --color-dark-grey: #9A9999;
    --color-vanilla: #F1EDD1;
    --color-light-vanilla: #FDFBF1;
    --color-lavender: #434C72;
    --color-green: #005E3E;
    --color-red: #BA0C2F;
    --color-cream: #CFC38F;
    --color-error: #D93025;
    --color-dark-grey: #9a9999;
    --color-terracotta: #A24D34;
    --color-pink: #e6a6a1;
    --color-rum: #785037;
    --color-amber: #F6A623;

    /* Theme Color */
    --color-primary: var(--color-olive);
    --color-primary-foreground: var(--color-vanilla);
    --color-secondary: var(--color-vanilla);
    --color-secondary-foreground: var(--color-olive);

    --color-text-primary: var(--color-black-bean);
    --color-text-secondary: var(--color-smoke);

    --color-background: var(--color-light-vanilla);

    /* Shadow */
    --shadow-default: 0px 6px 15px 0px #0000001A;
}

/*
    START: RESET
    Josh's Custom CSS Reset (with customization)
    https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    color-scheme: only light;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
        scroll-behavior: smooth;
    }
}

body {
    -webkit-font-smoothing: antialiased;
    font: 12px/1.5 'Jost';
    color: var(--color-text-primary);
    background-color: var(--color-background);
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font: inherit;
}

#root, #__next {
    isolation: isolate;
}
/* END: RESET */