:root {
    /* COLORS VARIABLES */
    --black: #08102e; /* TODO: rename to --blackish */
    /*--black: #111;*/
    --white: #f5f9fd; /* TODO: rename to --whitish */
    --gold-light: #f0dea7;
    --gold-rich: #e3c362;
    --gold-red: #a0591c;
    --dark-brown: #391d0a;

    /* TODO: replace these */
    --gold-dark: #ac9b7b;
    --gold-faded: #4e4736;

    /* TODO: replace these */
    --text-color: #fefefe;


    --static-color: var(--white);
    --changeable-color: var(--gold-light);

    --error-red: #ff2727;
    --valid-green: #44c54f;

    --global-menu-background-color: var(--abs-black-o75);
    --global-menu-text-color: var(--gold-light);

    /* COLOR USAGE */
    --text-color-normal: var(--gold-light);
    --text-color-header: var(--white);
    --text-color-label: var(--white);
    --text-color-emphasis: var(--gold-rich);

    --body-background-color-web: var(--black);

    --primary-color: var(--gold-light);
    --secondary-color: #80a4ed;
    --background-color-primary: #111111;
    --background-color-secondary: #333333;
    --text-color-interactible: var(--primary-color);
    --text-color-interactible-hover: var(--secondary-color);
    --text-color-interactible-active: var(--text-color-interactible-hover);
    --text-color-primary: #eeeeee;
    --text-color-faded: #dedede;
    --text-color-weak: #cccccc;

    /* GRADIENTS */
    --gradient-gold-red-to-weak-dark-brown: linear-gradient(
        180deg,
        var(--gold-red) 0%,
        rgba(160, 89, 28, 0.5) 79.69%,
        rgba(52, 30, 15, 0.3) 100%
    );

    /* SETTINGS */
    --font-stack: "EB Garamond", "Garamond", serif;
}

body {
    color: var(--text-color);
    font-family: var(--font-stack);

    /* Want 1rem to be 16px as usual, but BG3's font is small, so default to 18px */
    font-size: 18px;
}

button,
select,
option,
input {
    background: var(--abs-black-o25);
    color: var(--gold-light);
    border-color: var(--gold-dark);
    border-radius: 0;
}

button:hover,
button:focus,
button:active,
select:hover,
select:focus,
select:active,
input:hover,
input:focus,
input:active {
    background: var(--abs-black-o50);
    border-color: var(--gold-light);
}

option {
    background: var(--black);
    color: var(--gold-light);
}

button:not(:disabled) {
    cursor: pointer;
}

button:disabled {
    border-color: var(--white);
    opacity: 0.5;
}

button {
    padding: 4px 20px 4px 20px;
}

button {
    background: radial-gradient(50% 1083.53% at 50% 50%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 84.9%, rgba(0, 0, 0, 0.5) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border: 1px solid transparent;
    border-image-slice: 1;
    border-image-source: radial-gradient(49.63% 1075.51% at 49.63% 51.72%, rgba(240, 222, 167, 0.75) 0%, rgba(160, 89, 28, 0.35) 100%);
}

button:hover,
button:focus {
    border-image-source: none;
    border-color: var(--gold-rich);
}

button:active {
    border-image-source: none;
    border-color: var(--gold-light);
}

button:has(.button-icon) {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

button .button-icon,
.icon-size {
    display: flex;
    width: var(--icon-width, var(--icon-size, 1.2rem));
    height: var(--icon-height, var(--icon-size, 1.2rem));

    /* Enable style:--nudge-top="-1px" and such */
    top: var(--nudge-top, initial);
}

/*************/
/* SCROLLBAR */
/*************/

::-webkit-scrollbar-thumb {
    background: radial-gradient(
        200% 100% at 50% 50%,
        var(--gold-rich) 0%,
        var(--gold-red) 15%,
        #a0591c50 70%,
        #a0591c01 100%
    );
    border-right: 2px solid #000000cc;
    opacity: 0.05;
    cursor: pointer;
    border-radius: 0;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-thumb:hover {
    background: radial-gradient(
        200% 100% at 50% 50%,
        var(--gold-rich) 0%,
        var(--gold-red) 30%,
        #a0591c50 70%,
        #a0591c01 100%
    );
}

::-webkit-scrollbar-track {
    background: transparent;
    border: none;
    border-radius: 0;
}