:root {
    --color-hunter: #37533a;
    --color-sea-green: #47864f;
    --color-mantis: #56b863;
    --color-emerald: #7ec887;
    --color-celadon: #bae0bd;
    --color-honeydew: #e7f2e6;

    --color-eerie-black: #1e201d;
    --color-black-olive: #2c312c;

    --color-background: var(--color-eerie-black); /* Deep charcoal sage */
    --color-surface: var(--color-black-olive); /* Dark moss green */
    --color-font: #e6e9de; /* Lighter pale sage for better contrast */
    --color-font-secondary: #a8b1a3; /* Desaturated sage-silver for secondary */
    --color-border: #4a534a; /* Earthy olive-grey */

    --color-accent-1: #bcae9e; /* Aged paper brown */
    --color-accent-2: #d4775c; /* Burnt red-orange */
    --color-accent-3: #708d91; /* Dusky teal */
    --color-accent-4: #b8b09d; /* Old parchment beige */

    --color-highlight: #6a7a59; /* Darker sage green */
    --color-highlight-2: #eee1a2;
    --color-muted-text: #8a998a;
}

[data-theme="light"] {
    --color-background: #f5f4f0; /* Cream white */
    --color-surface: #e2e8dc; /* Light sage */
    --color-font: #2f3b2f; /* Deep forest green */
    --color-font-secondary: #5f6d5f; /* Muted sage-gray for secondary text */
    --color-border: #c2c8b9; /* Muted olive */

    --color-accent-1: #a18f7d; /* Warm brown (woodblock tones) */
    --color-accent-2: #d99b84; /* Muted vermilion (sunset red) */
    --color-accent-3: #87a3a6; /* Smoky blue */
    --color-accent-4: #cfc5b3; /* Soft parchment beige */

    --color-highlight: #9ab28e; /* True sage green */
    --color-highlight-2: #b8d49c;
    --color-muted-text: #6e7d6e;
}

body {
    background-color: var(--color-background);
    color: var(--color-font);
    font-family: "Roboto", "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.container {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 16px;
    border-radius: 8px;
    max-width: 1240px;
    margin: 0 auto;
}

.main_item--ctr {
    max-width: 1240px;
    margin: 0 auto;
    overflow: hidden;
}

.main_item--ctr_v {
    max-width: 1240px;
    margin: 0 auto;
    overflow: visible;
}

button {
    color: unset;
}

p {
    margin-block: 0;
    margin-block-end: 0;
}

* {
    color: var(--color-font);
}

*:focus-visible {
    outline: 2px solid var(--color-accent-3);
}

:root {
    --scrollbar-width: 8px;
    --scrollbar-thumb: rgba(128, 128, 128, 0.6);
    --scrollbar-thumb-hover: rgba(128, 128, 128, 0.85);
    --scrollbar-track: transparent;
    --scrollbar-radius: 9999px;
    --scrollbar-transition: 0.2s;
}

/* Apply globally */
* {
    /* Firefox: thin overlay scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

    /* Chromium, Safari, Edge */
}

*::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
    background: transparent; /* overlay effect */
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-radius);
    border: 2px solid transparent; /* creates inset effect */
    background-clip: content-box;
    transition: background var(--scrollbar-transition) ease;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}