:root,
:root.light {
    --background-color: #f9fafb;
    --background-color-rgb: 249, 250, 251;

    --secondary-background-color: #FFFFFF;
    --secondary-background-color-rgb: 255, 255, 255;

    --text-color: #000000;
    --text-color-rgb: 0, 0, 0;

    --secondary-text-color: #4C4E4E;
    --secondary-text-color-rgb: 76, 78, 78;

    --tertiary-text-color: #FFFFFF;
    --tertiary-text-color-rgb: 255, 255, 255;

    --primary-color: #2ad89e;
    --primary-color-rgb: 42, 216, 158;

    --primary-contrast-color: #97DEC0;
    --primary-contrast-color-rgb: 151, 222, 192;

    --border-color: #E5E7EB;
    --border-color-rgb: 229, 231, 235;

    --button-border-color: #3B3B3B;
    --button-border-color-rgb: 59, 59, 59;

    --white-color: #FFFFFF;
    --white-color-rgb: 255, 255, 255;

    --red: #ff5252;
    --red-rgb: 255, 82, 82;

    --light-blue: #61DAFB;
    --light-blue-rgb: 97, 218, 251;

    --sea-blue: #38BDF8;
    --sea-blue-rgb: 56, 189, 248;

    --ink-blue: #3880FF;
    --ink-blue-rgb: 56, 128, 255;

    --blue: #0080FF;
    --blue-rgb: 0, 128, 255;

    --light-green: #4FB38D;
    --light-green-rgb: 79, 179, 141;

    --leaf-green: #689F38;
    --leaf-green-rgb: 104, 159, 56;

}

:root.dark {
    --background-color: #1E1E1E;
    --background-color-rgb: 30, 30, 30;

    --secondary-background-color: #1A1A1A;
    --secondary-background-color-rgb: 26, 26, 26;

    --text-color: #E5E7EB;
    --text-color-rgb: 229, 231, 235;

    --secondary-text-color: #E5E7EB;
    --secondary-text-color-rgb: 229, 231, 235;

    --tertiary-text-color: #e7e5e4;
    --tertiary-text-color-rgb: 231, 229, 228;

    --primary-color: #2ad89e;
    --primary-color-rgb: 42, 216, 158;

    --primary-contrast-color: #97DEC0;
    --primary-contrast-color-rgb: 151, 222, 192;

    --border-color: #E5E7EB;
    --border-color-rgb: 229, 231, 235;

    --button-border-color: #3B3B3B;
    --button-border-color-rgb: 59, 59, 59;

    --white-color: #FFFFFF;
    --white-color-rgb: 255, 255, 255;

    --red: #ff5252;
    --red-rgb: 255, 82, 82;

    --light-blue: #61DAFB;
    --light-blue-rgb: 97, 218, 251;

    --sea-blue: #38BDF8;
    --sea-blue-rgb: 56, 189, 248;

    --ink-blue: #3880FF;
    --ink-blue-rgb: 56, 128, 255;

    --blue: #0080FF;
    --blue-rgb: 0, 128, 255;

    --light-green: #4FB38D;
    --light-green-rgb: 79, 179, 141;

    --leaf-green: #689F38;
    --leaf-green-rgb: 104, 159, 56;

}

*,
*::before,
*::after {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
button,
a,
li {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text-color);
}

div {
    font-family: Arial, Helvetica, sans-serif;
}

p {
    margin: 0;
}

img {
    border-radius: inherit;
}

body {
    background-color: var(--background-color);
    margin: 0;
}

button:hover,
a:hover {
    transition: transform 300ms ease-in-out;
    transform: scale(1.02);
    /* subtle hover */
    box-shadow: 0 4px 12px rgba(var(--background-color-rgb), 0.15);
}

button:active,
a:active {
    transform: scale(0.97);
    /* small press animation */
    box-shadow: 0 2px 6px rgba(var(--background-color-rgb), 0.2);
}