/*

	This file is part of OpenWebRX,
	an open-source SDR receiver software with a web UI.
	Copyright (c) 2013-2015 by Andras Retzler <randras@sdr.hu>
	Copyright (c) 2019-2021 by Jakob Ketterl <dd5jfk@darc.de>
	Copyright (c) 2022-2023 by Marat Fayzullin <luarvique@gmail.com>

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

    This program 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 Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

/* Theme: brown */
body.theme-brown {
    --theme-color1: #270700;
    --theme-color2: #472700;
    --theme-gradient-color1: #270700;
    --theme-gradient-color2: #3F1F00;
    --theme-surface: #1f1006;
    --theme-accent: #ffb454;
}

/* Theme: red */
body.theme-red {
    --theme-color1: #270000;
    --theme-color2: #470000;
    --theme-gradient-color1: #270000;
    --theme-gradient-color2: #3F0000;
    --theme-surface: #1f0808;
    --theme-accent: #ff6b6b;
}

/* Theme: green */
body.theme-green {
    --theme-color1: #001700;
    --theme-color2: #003700;
    --theme-gradient-color1: #001700;
    --theme-gradient-color2: #002F00;
    --theme-surface: #08170c;
    --theme-accent: #5dff8a;
}

/* Theme: khaki */
body.theme-khaki {
    --theme-color1: #171F07;
    --theme-color2: #373F17;
    --theme-gradient-color1: #171F07;
    --theme-gradient-color2: #272F17;
    --theme-surface: #14170a;
    --theme-accent: #d6e06a;
}

/* Theme: blue */
body.theme-blue {
    --theme-color1: #000027;
    --theme-color2: #000047;
    --theme-gradient-color1: #000027;
    --theme-gradient-color2: #00003F;
    --theme-surface: #0a0d24;
    --theme-accent: #6aa7ff;
}

/* Theme: navy */
body.theme-navy {
    --theme-color1: #001727;
    --theme-color2: #003747;
    --theme-gradient-color1: #001727;
    --theme-gradient-color2: #002F3F;
    --theme-surface: #08161f;
    --theme-accent: #3ddcff;
}

/* Theme: black */
body.theme-black {
    --theme-color1: #000000;
    --theme-color2: #282828;
    --theme-gradient-color1: #000000;
    --theme-gradient-color2: #404040;
    --theme-surface: #0b0b0d;
    --theme-accent: #7df9ff;
}

/* Theme: night */
body.theme-night {
    --theme-color1: #6c2ceb;
    --theme-color2: #1a1f73;
    --theme-gradient-color1: #6c2ceb;
    --theme-gradient-color2: #3355e5;
    --theme-surface: #14123a;
    --theme-accent: #b794ff;
}


/* theme implementation follows */
body.has-theme {
    --accent: var(--theme-accent);
    --bg-panel: var(--theme-surface);
    --bg-dialog: var(--theme-surface);
    --bg-control: var(--theme-color2);
    --bg-control-hover: var(--theme-color2);
    --text: #e6edf7;
    --text-dim: #8a96ab;
    --border-subtle: rgba(255, 255, 255, 0.1);
    accent-color: var(--theme-accent);
}

@supports (background: color-mix(in srgb, red, blue)) {
    body.has-theme {
        --bg-panel: color-mix(in srgb, var(--theme-surface) 74%, transparent);
        --bg-dialog: color-mix(in srgb, var(--theme-surface) 92%, transparent);
        --bg-control: color-mix(in srgb, var(--theme-color2) 82%, var(--theme-surface));
        --bg-control-hover: color-mix(in srgb, var(--theme-color2) 78%, var(--theme-accent));
    }
}

body.has-theme #openwebrx-frequency-container {
    background-color: var(--theme-color2);
    background-blend-mode: overlay;
}

body.has-theme .openwebrx-panel {
    background-color: var(--bg-panel);
    color: var(--text);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

body.has-theme #openwebrx-panel-status {
    background-color: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.has-theme .openwebrx-dialog,
body.has-theme .openwebrx-plugin-window {
    background-color: var(--bg-dialog);
    color: var(--text);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

body.has-theme .openwebrx-panel select option,
body.has-theme .openwebrx-dialog select option {
    background-color: var(--theme-surface);
    color: var(--text);
}

body.has-theme .openwebrx-panel select,
body.has-theme .openwebrx-panel input,
body.has-theme .openwebrx-dialog select,
body.has-theme .openwebrx-dialog input {
    background: var(--bg-control);
    color: var(--text);
    border: 1px solid var(--border-subtle);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.has-theme .openwebrx-panel select:focus-visible,
body.has-theme .openwebrx-panel input:focus-visible,
body.has-theme .openwebrx-dialog select:focus-visible,
body.has-theme .openwebrx-dialog input:focus-visible,
body.has-theme .openwebrx-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

body.has-theme .openwebrx-button {
    background: var(--bg-control);
    color: var(--text);
    border: 1px solid var(--border-subtle);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.has-theme .openwebrx-button:hover,
body.has-theme .openwebrx-demodulator-button.highlighted,
body.has-theme .openwebrx-button.highlighted {
    background: var(--bg-control-hover);
    color: var(--accent);
    border-color: var(--accent);
    filter: none;
}

body.has-theme .openwebrx-button:active {
    background: var(--theme-color1);
    color: var(--accent);
}

body.has-theme .openwebrx-squelch-auto.openwebrx-button.highlighted {
    filter: none;
}

body.has-theme .webrx-actual-freq,
body.has-theme .webrx-actual-freq input {
    color: var(--accent);
}

body.has-theme .webrx-actual-freq .digit:hover {
    color: var(--text);
    background: var(--bg-control-hover);
}

body.has-theme .webrx-mouse-freq,
body.has-theme #openwebrx-clock-utc,
body.has-theme #openwebrx-smeter-db,
body.has-theme .openwebrx-section-divider {
    color: var(--text-dim);
}

body.has-theme .openwebrx-panel a {
    color: var(--accent);
}

body.has-theme #openwebrx-smeter,
body.has-theme .openwebrx-progressbar {
    background-color: var(--theme-color1);
}

body.has-theme .nano .nano-pane {
    background: var(--theme-color1);
}

body.has-theme .nano .nano-slider {
    background: var(--accent) !important;
}

body.has-theme .openwebrx-meta-slot:not(.active) {
    background-color: var(--theme-color2);
    filter: brightness(150%);
    color: white;
}

body.has-theme #openwebrx-digimode-canvas-container {
    background-color: var(--theme-color1);
}

body.has-theme #openwebrx-digimode-content-container .gradient {
    box-shadow: 0px 10px 10px inset var(--theme-surface);
    background: initial;
}

body.has-theme ::selection {
    background: var(--accent);
    color: var(--theme-surface);
}

@media (prefers-reduced-motion: reduce) {
    body.has-theme .openwebrx-button,
    body.has-theme .openwebrx-panel select,
    body.has-theme .openwebrx-panel input,
    body.has-theme .openwebrx-dialog select,
    body.has-theme .openwebrx-dialog input {
        transition: none;
    }
}