:root {
    /* Color Palette */
    --color-1: rgba(209, 209, 209, 1.0);
    --color-2: rgba(219, 219, 219, 1.0);
    --color-3: rgba(133, 199, 242, 1.0);
    --color-4: rgba(99, 99, 99, 1.0);
    --color-5: rgba(76, 76, 76, 1.0);

    /* Other other colors */
    --gif-blue: #e8faf7;

    /* Other Colors */
    --color-link-blue: rgba(0, 213, 255, 0.75);
    --color-red: rgba(255, 59, 48,0.75);
    --color-cursor: rgba(236, 127, 255, 1.0);
    --color-eggplant-purple: rgba(125,84,137,1.0);
    --color-alert-yellow: rgba(255,236,181,1.0);

    /* Color Transition Settings */
    --color-transition: 500ms;
}

/* Color Schemes */
/* Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#color-scheme */
/* Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color */
[data-color-scheme] { color-scheme: light dark; } /* color schemes should support light and dark modes */
[data-color-scheme='light'] {
    --background-color: light-dark(rgba(255,255,255,1.0), rgba(0,0,0,1.0));
    --accent-color: light-dark(rgba(133, 199, 242, 1.0), #85c7f2);
    --accent-tint: rgba(255,255,255,0.25);
    --accent-shade: rgba(0,0,0,0.15);
    --outline-color: rgba(0, 0, 0, 0.25);
    --heading-color: light-dark(rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.9));
    --subheading-color: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6));
    --text-color: light-dark(rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0.9));
    --text-color-alt: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.7));
    --link-underline-color: var(--color-3);
    --form-input-background-color: rgba(0, 0, 0, 0.05);
    --form-input-border-color: rgba(0, 0, 0, 0.25);
    --form-input-text-color: rgba(0, 0, 0, 0.9);
    --button-background-color: var(--color-3);
    --button-background-color-hover: var(--color-1);
    --button-text-color: rgba(255, 255, 255, 0.9);
    --button-text-color-hover: rgba(0, 0, 0, 0.9);
}

[data-color-scheme='dark'] {
    --background-color: rgba(0, 0, 0, 1.0);
    --accent-color: var(--color-3);
    --accent-tint: rgba(255,255,255,0.25);
    --accent-shade: rgba(0,0,0,0.15);
    --outline-color: rgba(255, 255, 255, 0.50);
    --heading-color: rgba(255, 255, 255, 0.75);
    --subheading-color: rgba(255, 255, 255, 0.50);
    --text-color: rgba(255, 255, 255, 0.75);
    --link-underline-color: var(--color-3);
    --form-input-background-color: var(--color-2);
    --form-input-border-color: var(--color-2);
    --form-input-text-color: rgba(0, 0, 0, 0.9);
    --button-background-color: var(--color-1);
    --button-background-color-hover: var(--color-3);
    --button-text-color: rgba(0, 0, 0, 0.9);
    --button-text-color-hover: rgba(255, 255, 255, 0.9);
}

[data-color-scheme='primary'] {
    --background-color: var(--color-3);
    --accent-color: var(--color-3);
    --accent-tint: rgba(255,255,255,0.25);
    --accent-shade: rgba(0,0,0,0.15);
    --outline-color: rgba(255,255,255,0.75);
    --heading-color: rgba(0, 0, 0, 0.9);
    --subheading-color: rgba(0, 0, 0, 0.7);
    --text-color: rgba(0, 0, 0, 0.7);
    --link-underline-color: rgba(0, 0, 0, 0.0);
    --form-input-background-color: rgba(255, 255, 255, 0.50);
    --form-input-border-color: rgba(255, 255, 255, 0.50);
    --form-input-text-color: rgba(0, 0, 0, 0.5);
    --button-background-color: var(--color-1);
    --button-background-color-hover: var(--color-4);
    --button-text-color: rgba(0, 0, 0, 0.9);
    --button-text-color-hover: rgba(255, 255, 255, 0.9);
}

[data-color-scheme='secondary'] {
    --background-color: light-dark(var(--gif-blue), rgba(0,0,0,1.0));
    --accent-color: rgba(133, 199, 242, 1.0);
    --accent-tint: rgba(255,255,255,0.25);
    --accent-shade: rgba(0,0,0,0.15);
    --outline-color: rgba(0, 0, 0, 0.25);
    --heading-color: rgba(0, 0, 0, 0.9);
    --subheading-color: rgba(0, 0, 0, 0.6);
    --text-color: light-dark(rgba(0, 0, 0, 0.9), rgba(255,255,255, 0.9));
    --text-color-alt: rgba(0, 0, 0, 0.7);
    --link-underline-color: var(--color-3);
    --form-input-background-color: rgba(255, 255, 255, 1.0);
    --form-input-border-color: rgba(255, 255, 255, 1.0);
    --form-input-text-color: rgba(0, 0, 0, 0.9);
    --button-background-color: var(--color-3);
    --button-background-color-hover: var(--color-1);
    --button-text-color: rgba(255, 255, 255, 0.9);
    --button-text-color-hover: rgba(0, 0, 0, 0.9);
}

[data-color-scheme='gray'] {
    --background-color: var(--color-2);
    --accent-color: var(--color-3);
    --accent-tint: rgba(255,255,255,0.25);
    --accent-shade: rgba(0,0,0,0.15);
    --outline-color: var(--color-3);
    --heading-color: rgba(0, 0, 0, 0.9);
    --subheading-color: rgba(0, 0, 0, 0.7);
    --text-color: rgba(0, 0, 0, 0.7);
    --link-underline-color: var(--color-3);
    --form-input-background-color: rgba(0, 0, 0, 1.0);
    --form-input-border-color: rgba(0, 0, 0, 1.0);
    --form-input-text-color: rgba(255, 255, 255, 0.7);
    --button-background-color: var(--color-1);
    --button-background-color-hover: var(--color-3);
    --button-text-color: rgba(0, 0, 0, 0.9);
    --button-text-color-hover: rgba(255, 255, 255, 0.9);
}

[data-color-scheme='blur'] {
    --background-color: rgba(0, 0, 0, 0.50);
    --accent-color: var(--color-3);
    --accent-tint: rgba(255,255,255,0.25);
    --accent-shade: rgba(0,0,0,0.15);
    --outline-color: rgba(255,255,255,0.5);
    --heading-color: rgba(255, 255, 255, 0.75);
    --subheading-color: rgba(255, 255, 255, 0.50);
    --text-color: rgba(255, 255, 255, 0.75);
    --link-underline-color: none;
    --form-input-background-color: var(--color-2);
    --form-input-border-color: var(--color-2);
    --form-input-text-color: rgba(0, 0, 0, 0.9);
    --button-background-color: rgba(255, 255, 255, 0.25);
    --button-background-color-hover: rgba(255, 255, 255, 0.25);
    --button-text-color: rgba(0, 0, 0, 0.9);
    --button-text-color-hover: rgba(255, 255, 255, 0.9);

    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Applied colors */
[data-color-scheme] {
    background-color: var(--background-color);
    color: var(--text-color);
}

[data-color-scheme] :where(h1, h2, h3, h4, h5, h6) {
    color: var(--heading-color);
}

[data-color-scheme] :where(p, a, a:hover, code, svg, time, li) {
    color: inherit;
}

[data-color-scheme] form form-group input {
    background-color: var(--form-input-background-color);
    color: var(--form-input-text-color);
}

[data-color-scheme] button {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    transition: 
        color var(--color-transition), 
        background-color var(--color-transition);
}
[data-color-scheme] button:hover {
    background-color: var(--button-background-color-hover);
    color: var(--button-text-color-hover);
    transition: 
        color var(--color-transition), 
        background-color var(--color-transition);
}

/* Defaults & non-themed styles */
.draft {
    color: var(--color-red);
}

.grayscale[data-opacity='50'] {
    filter: grayscale(0.5);
}
.grayscale[data-opacity='100'] {
    filter: grayscale(1.0);
}

@media (prefers-color-scheme: light) {
    [prefers-color-scheme=light] { display: inherit; }
    [prefers-color-scheme=dark] { display: none; }
}

@media (prefers-color-scheme: dark) {
    [prefers-color-scheme=light] { display: none; }
    [prefers-color-scheme=dark] { display: inherit; }
}