/* =========================================
   GS THEMES
========================================= */

:root {
    --gs-bg: #050914;
    --gs-bg-secondary: #080e1b;
    --gs-card: #080e1b;
    --gs-card-strong: #0d1420;

    --gs-primary: #1683ff;
    --gs-primary-hover: #3475f5;
    --gs-primary-soft: rgba(22, 131, 255, .12);
    --gs-primary-glow: rgba(22, 131, 255, .45);

    --gs-text: #ffffff;
    --gs-text-secondary: #cbd5e1;
    --gs-text-muted: #8994a7;

    --gs-border: rgba(255,255,255,.10);
    --gs-input: #080d16;

    --gs-success: #22c55e;
    --gs-danger: #ef4444;
}


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

body.theme-purple {

    --gs-bg: #08050f;
    --gs-bg-secondary: #0d0818;
    --gs-card: #100b1c;
    --gs-card-strong: #160d25;

    --gs-primary: #8b5cf6;
    --gs-primary-hover: #9d6cff;

    --gs-primary-soft: rgba(139, 92, 246, .13);
    --gs-primary-glow: rgba(139, 92, 246, .42);

    --gs-text: #ffffff;
    --gs-text-secondary: #ddd6fe;
    --gs-text-muted: #9f94b8;

    --gs-border: rgba(167, 139, 250, .14);
    --gs-input: #0b0713;
}


/* =========================================
   GLOBAL THEME
========================================= */

body {
    background: var(--gs-bg);
    color: var(--gs-text);
    transition:
        background-color .35s ease,
        color .35s ease;
}


.gs-theme-bg {
    background: var(--gs-bg);
}

.gs-theme-card {
    background: var(--gs-card);
    border-color: var(--gs-border);
}

.gs-theme-primary {
    color: var(--gs-primary);
}

.gs-theme-button {
    background: var(--gs-primary);
    color: #fff;
}

.gs-theme-button:hover {
    background: var(--gs-primary-hover);
}

.gs-theme-input {
    background: var(--gs-input);
    color: var(--gs-text);
    border-color: var(--gs-border);
}

.gs-theme-input:focus {
    border-color: var(--gs-primary);
    box-shadow: 0 0 0 3px var(--gs-primary-soft);
}

.gs-theme-glow {
    box-shadow:
        0 0 30px var(--gs-primary-glow);
}

body.theme-green {
    --gs-bg: #040d09;
    --gs-bg-secondary: #07130d;
    --gs-card: #091811;
    --gs-card-strong: #0d2116;

    --gs-primary: #22c55e;
    --gs-primary-hover: #34d16f;

    --gs-primary-soft: rgba(34, 197, 94, .13);
    --gs-primary-glow: rgba(34, 197, 94, .42);

    --gs-text: #ffffff;
    --gs-text-secondary: #d1fae5;
    --gs-text-muted: #8fa99a;

    --gs-border: rgba(74, 222, 128, .14);
    --gs-input: #06100a;
}