/*

This file is part of yk38spage.github.io.

yk38spage.github.io is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

yk38spage.github.io is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with yk38spage.github.io. If not, see <https://www.gnu.org/licenses/>.

*/

:root {
    --bg-dark: hsl(0, 0%, 90%);
    --bg-normal: hsl(0, 0%, 95%);
    --bg-light: hsl(0, 0%, 100%);
    --text: hsl(0, 0%, 5%);
    --text-muted: hsl(0, 0%, 30%);
    --border: hsl(0, 0%, 70%);
}

header,
footer {
    --background: hsl(200, 65%, 10%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-dark: hsl(0, 0%, 0%);
        --bg-normal: hsl(0, 0%, 5%);
        --bg-light: hsl(0, 0%, 10%);
        --text: hsl(0, 0%, 95%);
        --text-muted: hsl(0, 0%, 70%);
        --border: hsl(0, 0%, 30%);
    }
}

.notice-box {
    --notice-info: hsl(216, 98%, 50%);
    --notice-info-text: hsl(0, 0%, 95%);

    --notice-success: hsl(134, 61%, 40%);
    --notice-success-text: hsl(0, 0%, 95%);

    --notice-warning: hsl(27, 100%, 50%);
    --notice-warning-text: hsl(0, 0%, 95%);

    --notice-error: hsl(342, 86%, 40%);
    --notice-error-text: hsl(0, 0%, 95%);
}

@media (prefers-color-scheme: dark) {
    .notice-box {
        --notice-info: hsl(216, 80%, 40%);
        --notice-info-text: hsl(0, 0%, 90%);

        --notice-success: hsl(134, 61%, 30%);
        --notice-success-text: hsl(0, 0%, 95%);

        --notice-warning: hsl(27, 75%, 40%);
        --notice-warning-text: hsl(0, 0%, 95%);

        --notice-error: hsl(342, 86%, 40%);
        --notice-error-text: hsl(0, 0%, 95%);
    }
}

input,
select,
textarea,
.radio-box-container {
    --input-bg: hsl(0, 0%, 100%);
    --input-chkbox-bg: hsl(0, 0%, 70%);
    --input-chkbox-checked: hsl(216, 98%, 50%);
    --input-text: hsl(0, 0%, 10%);
    --input-highlight: hsl(0, 0%, 70%);
    --input-border: hsl(0, 0%, 70%);
    --input-border-highlight: hsl(216, 98%, 50%);
    --input-autofill: hsl(215, 100%, 90%);
}

@media (prefers-color-scheme: dark) {
    input,
    select,
    textarea,
    .radio-box-container {
        --input-bg: hsl(0, 0%, 20%);
        --input-chkbox-bg: hsl(0, 0%, 20%);
        --input-chkbox-checked: hsl(216, 90%, 45%);
        --input-text: hsl(0, 0%, 90%);
        --input-highlight: hsl(0, 0%, 30%);
        --input-border: hsl(0, 0%, 30%);
        --input-border-highlight: hsl(0, 0%, 40%);
        --input-autofill: hsl(200, 30%, 20%);
    }
}

button,
input[type="submit"],
a,
h4 {
    /* Default colors */
    --btn-default: hsl(0, 0%, 80%);
    --btn-default-text: hsl(0, 0%, 20%);
    --btn-default-border: 2px solid hsl(0, 0%, 80%);

    --btn-primary: hsl(211, 100%, 50%);
    --btn-primary-text: hsl(0, 0%, 100%);
    --btn-primary-border: 2px solid hsl(211, 100%, 50%);

    --btn-secondary: hsl(0, 0%, 90%);
    --btn-secondary-text: hsl(0, 0%, 15%);
    --btn-secondary-border: 2px solid hsl(0, 0%, 85%);

    /* Button hover or active colors */
    --btn-active-default: hsl(0, 0%, 80%);
    --btn-active-default-text: hsl(0, 0%, 20%);
    --btn-active-default-border: 2px solid hsl(0, 0%, 80%);

    --btn-active-primary: hsl(211, 100%, 40%);
    --btn-active-primary-text: hsl(0, 0%, 95%);
    --btn-active-primary-border: 2px solid hsl(211, 100%, 40%);

    --btn-active-secondary: hsl(0, 0%, 85%);
    --btn-active-secondary-text: hsl(0, 0%, 20%);
    --btn-active-secondary-border: 2px solid hsl(0, 0%, 85%);

    --btn-circle-not-active-border: 2px solid transparent;

    /* When button is disabled */
    --btn-disabled-opacity: 0.5;

    --link: hsl(211, 95%, 50%);
    --link-hover: hsl(211, 95%, 45%);
}

@media (prefers-color-scheme: dark) {
    button,
    input[type="submit"],
    a {
        --btn-default: hsl(0, 0%, 20%);
        --btn-default-text: hsl(0, 0%, 80%);
        --btn-default-border: 2px solid hsl(0, 0%, 20%);

        --btn-primary: hsl(210, 75%, 35%);
        --btn-primary-text: hsl(0, 0%, 90%);
        --btn-primary-border: 2px solid hsl(210, 80%, 40%);

        --btn-secondary: hsl(0, 0%, 15%);
        --btn-secondary-text: hsl(0, 0%, 80%);
        --btn-secondary-border: 2px solid hsl(0, 0%, 25%);

        --btn-active-default: hsl(0, 0%, 25%);
        --btn-active-default-text: hsl(0, 0%, 80%);
        --btn-active-default-border: 2px solid hsl(0, 0%, 30%);

        --btn-active-primary: hsl(210, 75%, 45%);
        --btn-active-primary-text: hsl(0, 0%, 90%);
        --btn-active-primary-border: 2px solid hsl(210, 80%, 40%);

        --btn-active-secondary: hsl(0, 0%, 25%);
        --btn-active-secondary-text: hsl(0, 0%, 80%);
        --btn-active-secondary-border: 2px solid hsl(0, 0%, 30%);

        --btn-circle-not-active-border: 2px solid transparent;

        --btn-disabled-opacity: 0.5;

        --link: hsl(211, 90%, 60%);
        --link-hover: hsl(211, 90%, 55%);
    }
}