/* =====================================================
   SleepKnight8 Themes
   Global Theme System
   ===================================================== */

:root {
    --sk-bg: #14191f;
    --sk-bg-2: #202832;

    --sk-surface: #262f3b;
    --sk-surface-2: #1b2129;

    --sk-primary: #ffd54f;
    --sk-primary-hover: #ffca28;

    --sk-text: #ffd54f;
    --sk-muted: #9aa7b5;

    --sk-border: #ffd54f;

    --sk-shadow: rgba(0, 0, 0, .25);
}


/* =========================
   YELLOW
   ========================= */

body.sk-yellow {
    --sk-bg: #14191f;
    --sk-bg-2: #202832;

    --sk-surface: #262f3b;
    --sk-surface-2: #1b2129;

    --sk-primary: #ffd54f;
    --sk-primary-hover: #ffca28;

    --sk-text: #ffd54f;
    --sk-muted: #9aa7b5;

    --sk-border: #ffd54f;

    --sk-shadow: rgba(0, 0, 0, .25);
}


/* =========================
   PURPLE
   ========================= */

body.sk-purple {
    --sk-bg: #101010;
    --sk-bg-2: #18121f;

    --sk-surface: #211a2b;
    --sk-surface-2: #15111a;

    --sk-primary: #b58cff;
    --sk-primary-hover: #c7a7ff;

    --sk-text: #b58cff;
    --sk-muted: #b8a8d0;

    --sk-border: #b58cff;

    --sk-shadow: rgba(0, 0, 0, .35);
}


/* =========================
   BODY
   ========================= */

body {
    background:
        linear-gradient(
            135deg,
            var(--sk-bg),
            var(--sk-bg-2)
        );

    color: var(--sk-text);

    transition:
        background .3s ease,
        color .3s ease;
}


/* =========================
   TEXT
   ========================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
li,
pre {
    color: var(--sk-text);
}


/* =========================
   BUTTONS
   ========================= */

button {
    background: var(--sk-surface);
    color: var(--sk-text);

    border: 2px solid var(--sk-border);

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

button:hover {
    background: var(--sk-primary);
    color: var(--sk-bg);
    border-color: var(--sk-primary-hover);
}


/* =========================
   LINKS
   ========================= */

a {
    color: var(--sk-primary);
}

a:hover {
    color: var(--sk-primary-hover);
}


/* =========================
   COMMON SURFACES
   ========================= */

.steps,
.game,
.card,
.panel,
.output,
.box,
.result-box {
    background: var(--sk-surface);
    color: var(--sk-text);
    border-color: var(--sk-border);
}


/* =========================
   INPUTS
   ========================= */

input,
textarea,
select {
    background: var(--sk-surface-2);
    color: var(--sk-text);

    border: 1px solid var(--sk-border);
}

input::placeholder,
textarea::placeholder {
    color: var(--sk-muted);
}


/* =========================
   RANGE SLIDERS
   ========================= */

input[type="range"] {
    accent-color: var(--sk-primary);
}

input[type="range"]::-webkit-slider-runnable-track {
    background: var(--sk-primary);
    border-radius: 10px;
}

input[type="range"]::-moz-range-track {
    background: var(--sk-primary);
    border-radius: 10px;
}

input[type="range"]::-webkit-slider-thumb {
    background: var(--sk-surface);
    border: 3px solid var(--sk-primary);
}

input[type="range"]::-moz-range-thumb {
    background: var(--sk-surface);
    border: 3px solid var(--sk-primary);
}


/* =========================
   THEME SWITCH
   ========================= */

.theme-switch button {
    background: var(--sk-surface);
    color: var(--sk-text);

    border: 2px solid var(--sk-border);
}

.theme-switch button:hover {
    background: var(--sk-primary);
    color: var(--sk-bg);
}


/* =========================
   OPTIONAL THEME UTILITIES
   ========================= */

.theme-border {
    border-color: var(--sk-border);
}

.theme-shadow {
    box-shadow:
        0 5px 20px var(--sk-shadow);
}


/* =========================
   IMAGES
   ========================= */

img {
    transition: box-shadow .3s ease;
}

img:hover {
    box-shadow:
        0 0 20px var(--sk-primary);
}


/* =========================
   TEXT SELECTION
   ========================= */

::selection {
    background: var(--sk-primary);
    color: var(--sk-bg);
}