/*
Mining Tracker

Datei:
static/css/themes.css

Beschreibung:
Farbvariablen für dunkle, helle und systemabhängige Darstellung.

Lizenz:
Privat
*/


/*
 * Dunkle Darstellung ist der Standard.
 */

:root,
html[data-theme="dark"] {
    color-scheme: dark;

    --mt-background: #08111f;
    --mt-background-soft: #0d1929;
    --mt-surface: #111f31;
    --mt-surface-raised: #17283d;
    --mt-border: #233750;
    --mt-text: #f4f7fb;
    --mt-text-muted: #93a4b8;
    --mt-accent: #f7931a;
    --mt-accent-hover: #ffab3d;
    --mt-success: #35c98b;
    --mt-danger: #ef6461;

    --mt-header-background: rgba(8, 17, 31, 0.94);
    --mt-sidebar-background: rgba(13, 25, 41, 0.88);
    --mt-card-start: rgba(23, 40, 61, 0.92);
    --mt-card-end: rgba(17, 31, 49, 0.92);
    --mt-shadow: rgba(0, 0, 0, 0.25);
    --mt-accent-glow: rgba(247, 147, 26, 0.08);
}


/*
 * Helle Darstellung.
 */

html[data-theme="light"] {
    color-scheme: light;

    --mt-background: #f4f7fb;
    --mt-background-soft: #e9eef5;
    --mt-surface: #ffffff;
    --mt-surface-raised: #edf2f8;
    --mt-border: #cfdae7;
    --mt-text: #162235;
    --mt-text-muted: #607086;
    --mt-accent: #d97706;
    --mt-accent-hover: #b85f00;
    --mt-success: #15805f;
    --mt-danger: #c83e3b;

    --mt-header-background: rgba(255, 255, 255, 0.94);
    --mt-sidebar-background: rgba(244, 247, 251, 0.94);
    --mt-card-start: rgba(255, 255, 255, 0.98);
    --mt-card-end: rgba(241, 245, 250, 0.98);
    --mt-shadow: rgba(31, 45, 61, 0.12);
    --mt-accent-glow: rgba(217, 119, 6, 0.09);
}


/*
 * Systemeinstellung:
 * Standardmäßig dunkel, bei heller Betriebssystempräferenz hell.
 */

html[data-theme="system"] {
    color-scheme: dark;

    --mt-background: #08111f;
    --mt-background-soft: #0d1929;
    --mt-surface: #111f31;
    --mt-surface-raised: #17283d;
    --mt-border: #233750;
    --mt-text: #f4f7fb;
    --mt-text-muted: #93a4b8;
    --mt-accent: #f7931a;
    --mt-accent-hover: #ffab3d;
    --mt-success: #35c98b;
    --mt-danger: #ef6461;

    --mt-header-background: rgba(8, 17, 31, 0.94);
    --mt-sidebar-background: rgba(13, 25, 41, 0.88);
    --mt-card-start: rgba(23, 40, 61, 0.92);
    --mt-card-end: rgba(17, 31, 49, 0.92);
    --mt-shadow: rgba(0, 0, 0, 0.25);
    --mt-accent-glow: rgba(247, 147, 26, 0.08);
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        color-scheme: light;

        --mt-background: #f4f7fb;
        --mt-background-soft: #e9eef5;
        --mt-surface: #ffffff;
        --mt-surface-raised: #edf2f8;
        --mt-border: #cfdae7;
        --mt-text: #162235;
        --mt-text-muted: #607086;
        --mt-accent: #d97706;
        --mt-accent-hover: #b85f00;
        --mt-success: #15805f;
        --mt-danger: #c83e3b;

        --mt-header-background: rgba(255, 255, 255, 0.94);
        --mt-sidebar-background: rgba(244, 247, 251, 0.94);
        --mt-card-start: rgba(255, 255, 255, 0.98);
        --mt-card-end: rgba(241, 245, 250, 0.98);
        --mt-shadow: rgba(31, 45, 61, 0.12);
        --mt-accent-glow: rgba(217, 119, 6, 0.09);
    }
}


/*
 * Komponenten, deren Hintergrund bisher feste Dunkelwerte verwendete.
 */

body {
    background:
        radial-gradient(
            circle at top right,
            var(--mt-accent-glow),
            transparent 32rem
        ),
        var(--mt-background);
}

.app-header {
    background: var(--mt-header-background);
}

.app-sidebar {
    background: var(--mt-sidebar-background);
}

.metric-card,
.content-card,
.auth-card {
    background: linear-gradient(
        145deg,
        var(--mt-card-start),
        var(--mt-card-end)
    );

    box-shadow: 0 1rem 3rem var(--mt-shadow);
}

.onboarding-card {
    box-shadow: 0 1.5rem 4rem var(--mt-shadow);
}

.form-control,
.form-select {
    background-color: var(--mt-background-soft);
    color: var(--mt-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--mt-background-soft);
    color: var(--mt-text);
}

html[data-theme="light"] .btn-outline-light,
html[data-theme="system"] .btn-outline-light {
    border-color: var(--mt-border);
    color: var(--mt-text);
}

html[data-theme="light"] .btn-outline-light:hover {
    border-color: var(--mt-text);
    background: var(--mt-text);
    color: var(--mt-surface);
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] .btn-outline-light:hover {
        border-color: var(--mt-text);
        background: var(--mt-text);
        color: var(--mt-surface);
    }
}