:root {
    --font-size-small: 14px;
    --font-size-regular: 16px;
    --font-size-large: 20px;
    --font-size-xlarge: 24px;
    --font-size-xxlarge: 32px;

    --indention-xs: 4px;
    --indention-sm: 8px;
    --indention-md: 16px;
    --indention-lg: 24px;
    --indention-xl: 32px;
    --indention-xxl: 48px;

    --border-radius: 4px;
    --border-radius-round: 50%;

    --transition: all 0.2s ease 0s;
    --animation-in-slow: fadeIn 0.5s ease both;
    --animation-out-slow: fadeOut 0.5s ease both;

    --box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),
             0 1px 1px 0 rgba(0,0,0,.14),
             0 1px 3px 0 rgba(0,0,0,.12);

    --elevation: 8.0px 16.0px 16.0px hsl(0deg 0% 0% / 0.25);
    --elevation-bigger: 8.0px 16.0px 16.0px hsla(0, 0%, 0%, 0.8);

    --text: #100907;
    --primary: #c96742;
    --secondary: #e39d83;
    --accent: #e27f59;

    --main-color-light-20: #e2f1e6;
    --main-color-light-15: #d8e9d7;
    --main-color-light-5: #c9e6d0;
    --main-color: #a5d6a7; /* Also used for text color */
    --main-color-dark-5: #94c79b;
    --main-color-dark-10: #8bbf8a;
    --main-color-dark-15: #75aa7f;

    --main-gradient: linear-gradient(
        180deg,
        #94c79b 0%,
        #75aa7f 50%,
        #94c79b 100%
    );

    --win-box: 0 0 10px rgba(#75aa7f, 10%);
    --main-bg-hover: #1f1f1f;
    --main-bg: #191919;
    --main-bg-dark: #161616;
    --button-primary-bg: #58bc82;
    --card-primary-bg: #1e1e1e;
    --card-btn-bg: #2a2a2a;
    --card-btn-bg-hover: #353535; /* approximate 5% lighter than #2a2a2a */
    --card-header-bg: linear-gradient(to right, var(--main-bg-dark), var(--main-bg));
}