:root {
    --stone-950: #0c0a09;
    --stone-900: #1c1917;
    --stone-800: #292524;
    --stone-700: #44403c;
    --stone-600: #57534e;
    --stone-500: #78716c;
    --stone-400: #a8a29e;
    --stone-300: #d6d3d1;
    --stone-200: #e7e5e4;
    --stone-100: #f5f5f4;
    --stone-50: #fafaf9;

    --light: #efe9f0;
    --black: #000;

    --brand: #005e24;
    --brand-dark: #004d1f;
    --brand-light: #d4e8d1;
    --brand-border: #919282;

    --amber-400: #fbbf24;

    --cyan-300: #67e8f9;
    --cyan-100: #cffafe;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

    font-size: 11px;
}

.light-theme {
    --btn-background-hover: var(--stone-100);
    --btn-background-active: var(--stone-300);

    --header-background: var(--stone-200);

    --main-svg-color: var(--black);
}

.dark-theme {
    --btn-background-hover: var(--stone-700);
    --btn-background-active: var(--stone-900);

    --header-background: var(--stone-800);

    --main-svg-color: var(--light);
}