/* ==========================================================================
   SYNTHVERSE
   Theme System
   ==========================================================================

   File:
       /assets/styles/themes.css

   Purpose:
       Defines the visual identity of SynthVerse themes.

   Architecture:
       default.css
           ↓
       themes.css
           ↓
       components.css
           ↓
       navigation.css
           ↓
       page-specific CSS

   IMPORTANT:
       This file controls visual theme values only.

       Components should consume variables such as:

           var(--sv-bg)
           var(--sv-surface)
           var(--sv-theme-accent)
           var(--sv-theme-glow)
           var(--sv-gradient-primary)

       Components should NOT hard-code theme colours.

   Available Main Themes:
       theme-nebula
       theme-pulse
       theme-horizon
       theme-aurora
       theme-eclipse

   Product Themes:
       product-radio
       product-studio
       product-forge
       product-admin
   ========================================================================== */


/* ==========================================================================
   1. THEME BASE CONTRACT
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Core background system
       ---------------------------------------------------------------------- */

    --sv-bg: #07080d;
    --sv-bg-elevated: #0c0e15;

    --sv-surface: #11141c;
    --sv-surface-1: #151923;
    --sv-surface-2: #1a1f2b;
    --sv-surface-3: #222835;

    --sv-surface-glass: rgba(17, 20, 28, 0.72);


    /* ----------------------------------------------------------------------
       Text
       ---------------------------------------------------------------------- */

    --sv-text-primary: #f5f7fb;
    --sv-text-secondary: #b5bdca;
    --sv-text-muted: #7d8796;
    --sv-text-disabled: #555e6c;

    --sv-text-inverse: #08090d;


    /* ----------------------------------------------------------------------
       Borders
       ---------------------------------------------------------------------- */

    --sv-border: rgba(255, 255, 255, 0.09);
    --sv-border-light: rgba(255, 255, 255, 0.14);
    --sv-border-strong: rgba(255, 255, 255, 0.20);


    /* ----------------------------------------------------------------------
       Theme accents
       ---------------------------------------------------------------------- */

    --sv-theme-accent: #8b5cf6;
    --sv-theme-accent-secondary: #22d3ee;

    --sv-theme-accent-soft: rgba(139, 92, 246, 0.12);
    --sv-theme-accent-secondary-soft: rgba(34, 211, 238, 0.10);

    --sv-theme-glow: rgba(139, 92, 246, 0.30);
    --sv-theme-glow-secondary: rgba(34, 211, 238, 0.22);


    /* ----------------------------------------------------------------------
       Gradients
       ---------------------------------------------------------------------- */

    --sv-gradient-primary:
        linear-gradient(
            135deg,
            var(--sv-theme-accent),
            var(--sv-theme-accent-secondary)
        );

    --sv-gradient-soft:
        linear-gradient(
            135deg,
            var(--sv-theme-accent-soft),
            var(--sv-theme-accent-secondary-soft)
        );

    --sv-gradient-hero:
        radial-gradient(
            circle at 20% 20%,
            var(--sv-theme-glow),
            transparent 45%
        ),
        radial-gradient(
            circle at 80% 70%,
            var(--sv-theme-glow-secondary),
            transparent 45%
        );

    --sv-gradient-artwork:
        linear-gradient(
            135deg,
            var(--sv-theme-accent),
            var(--sv-theme-accent-secondary)
        );


    /* ----------------------------------------------------------------------
       Interactive states
       ---------------------------------------------------------------------- */

    --sv-hover-overlay: rgba(255, 255, 255, 0.045);
    --sv-active-overlay: rgba(255, 255, 255, 0.075);

    --sv-focus-ring:
        0 0 0 3px var(--sv-theme-accent-soft);

    --sv-focus-border:
        var(--sv-theme-accent);


    /* ----------------------------------------------------------------------
       Component-specific visual treatment
       ---------------------------------------------------------------------- */

    --sv-header-bg:
        rgba(7, 8, 13, 0.84);

    --sv-header-border:
        var(--sv-border);

    --sv-card-glow:
        0 16px 45px var(--sv-theme-glow);

    --sv-artwork-glow:
        0 18px 55px var(--sv-theme-glow);

    --sv-player-glow:
        0 0 45px var(--sv-theme-glow);

    --sv-button-glow:
        0 8px 28px var(--sv-theme-glow);


    /* ----------------------------------------------------------------------
       Theme atmosphere
       ---------------------------------------------------------------------- */

    --sv-atmosphere-primary:
        radial-gradient(
            circle at 15% 15%,
            var(--sv-theme-glow),
            transparent 38%
        );

    --sv-atmosphere-secondary:
        radial-gradient(
            circle at 85% 80%,
            var(--sv-theme-glow-secondary),
            transparent 40%
        );


    /* ----------------------------------------------------------------------
       Artwork overlay
       ---------------------------------------------------------------------- */

    --sv-artwork-overlay:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(0, 0, 0, 0.78) 100%
        );


    /* ----------------------------------------------------------------------
       Navigation
       ---------------------------------------------------------------------- */

    --sv-nav-active-bg:
        var(--sv-theme-accent-soft);

    --sv-nav-active-border:
        var(--sv-theme-accent);

    --sv-nav-active-glow:
        0 0 22px var(--sv-theme-glow);


    /* ----------------------------------------------------------------------
       Player
       ---------------------------------------------------------------------- */

    --sv-player-progress:
        var(--sv-gradient-primary);

    --sv-player-progress-bg:
        rgba(255, 255, 255, 0.10);

    --sv-player-button-bg:
        var(--sv-surface-2);

    --sv-player-button-hover:
        var(--sv-theme-accent-soft);


    /* ----------------------------------------------------------------------
       Status colours
       ---------------------------------------------------------------------- */

    --sv-success: #34d399;
    --sv-success-soft: rgba(52, 211, 153, 0.12);

    --sv-warning: #fbbf24;
    --sv-warning-soft: rgba(251, 191, 36, 0.12);

    --sv-danger: #f87171;
    --sv-danger-soft: rgba(248, 113, 113, 0.12);

    --sv-info: #60a5fa;
    --sv-info-soft: rgba(96, 165, 250, 0.12);
}


/* ==========================================================================
   2. NEBULA
   ==========================================================================

   Character:
       Cosmic
       Immersive
       Deep
       Futuristic
       Atmospheric

   Default SynthVerse public experience.
   ========================================================================== */

[data-theme="theme-nebula"] {

    --sv-bg: #070812;
    --sv-bg-elevated: #0b0d19;

    --sv-surface: #101222;
    --sv-surface-1: #14172a;
    --sv-surface-2: #1a1d32;
    --sv-surface-3: #232740;

    --sv-surface-glass:
        rgba(16, 18, 34, 0.74);


    --sv-theme-accent: #8b5cf6;
    --sv-theme-accent-secondary: #22d3ee;

    --sv-theme-accent-soft:
        rgba(139, 92, 246, 0.13);

    --sv-theme-accent-secondary-soft:
        rgba(34, 211, 238, 0.11);

    --sv-theme-glow:
        rgba(139, 92, 246, 0.34);

    --sv-theme-glow-secondary:
        rgba(34, 211, 238, 0.25);


    --sv-gradient-primary:
        linear-gradient(
            135deg,
            #8b5cf6 0%,
            #6366f1 45%,
            #22d3ee 100%
        );

    --sv-gradient-hero:
        radial-gradient(
            circle at 15% 20%,
            rgba(139, 92, 246, 0.30),
            transparent 40%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(34, 211, 238, 0.20),
            transparent 42%
        );


    --sv-header-bg:
        rgba(7, 8, 18, 0.86);
}


/* ==========================================================================
   3. PULSE
   ==========================================================================

   Character:
       Energetic
       Rhythmic
       Vibrant
       Music-driven
       High-impact
   ========================================================================== */

[data-theme="theme-pulse"] {

    --sv-bg: #09070e;
    --sv-bg-elevated: #100b17;

    --sv-surface: #15101d;
    --sv-surface-1: #1b1425;
    --sv-surface-2: #251a31;
    --sv-surface-3: #30203e;

    --sv-surface-glass:
        rgba(21, 16, 29, 0.75);


    --sv-theme-accent: #ec4899;
    --sv-theme-accent-secondary: #06b6d4;

    --sv-theme-accent-soft:
        rgba(236, 72, 153, 0.13);

    --sv-theme-accent-secondary-soft:
        rgba(6, 182, 212, 0.11);

    --sv-theme-glow:
        rgba(236, 72, 153, 0.34);

    --sv-theme-glow-secondary:
        rgba(6, 182, 212, 0.25);


    --sv-gradient-primary:
        linear-gradient(
            135deg,
            #ec4899 0%,
            #d946ef 45%,
            #06b6d4 100%
        );

    --sv-gradient-hero:
        radial-gradient(
            circle at 18% 22%,
            rgba(236, 72, 153, 0.30),
            transparent 40%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(6, 182, 212, 0.20),
            transparent 42%
        );


    --sv-header-bg:
        rgba(9, 7, 14, 0.86);
}


/* ==========================================================================
   4. HORIZON
   ==========================================================================

   Character:
       Cinematic
       Clean
       Expansive
       Modern
       Premium
   ========================================================================== */

[data-theme="theme-horizon"] {

    --sv-bg: #050a12;
    --sv-bg-elevated: #09111d;

    --sv-surface: #101925;
    --sv-surface-1: #141f2d;
    --sv-surface-2: #192738;
    --sv-surface-3: #203146;

    --sv-surface-glass:
        rgba(16, 25, 37, 0.76);


    --sv-theme-accent: #38bdf8;
    --sv-theme-accent-secondary: #818cf8;

    --sv-theme-accent-soft:
        rgba(56, 189, 248, 0.12);

    --sv-theme-accent-secondary-soft:
        rgba(129, 140, 248, 0.10);

    --sv-theme-glow:
        rgba(56, 189, 248, 0.28);

    --sv-theme-glow-secondary:
        rgba(129, 140, 248, 0.21);


    --sv-gradient-primary:
        linear-gradient(
            135deg,
            #38bdf8 0%,
            #60a5fa 45%,
            #818cf8 100%
        );

    --sv-gradient-hero:
        radial-gradient(
            circle at 20% 18%,
            rgba(56, 189, 248, 0.25),
            transparent 42%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(129, 140, 248, 0.18),
            transparent 44%
        );


    --sv-header-bg:
        rgba(5, 10, 18, 0.88);
}


/* ==========================================================================
   5. AURORA
   ==========================================================================

   Character:
       Organic
       Flowing
       Atmospheric
       Experimental
       Futuristic
   ========================================================================== */

[data-theme="theme-aurora"] {

    --sv-bg: #050b0b;
    --sv-bg-elevated: #091413;

    --sv-surface: #0e1a18;
    --sv-surface-1: #12221f;
    --sv-surface-2: #172b27;
    --sv-surface-3: #1e3731;

    --sv-surface-glass:
        rgba(14, 26, 24, 0.75);


    --sv-theme-accent: #2dd4bf;
    --sv-theme-accent-secondary: #a78bfa;

    --sv-theme-accent-soft:
        rgba(45, 212, 191, 0.12);

    --sv-theme-accent-secondary-soft:
        rgba(167, 139, 250, 0.10);

    --sv-theme-glow:
        rgba(45, 212, 191, 0.28);

    --sv-theme-glow-secondary:
        rgba(167, 139, 250, 0.23);


    --sv-gradient-primary:
        linear-gradient(
            135deg,
            #2dd4bf 0%,
            #34d399 42%,
            #a78bfa 100%
        );

    --sv-gradient-hero:
        radial-gradient(
            circle at 18% 22%,
            rgba(45, 212, 191, 0.25),
            transparent 40%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(167, 139, 250, 0.20),
            transparent 44%
        );


    --sv-header-bg:
        rgba(5, 11, 11, 0.87);
}


/* ==========================================================================
   6. ECLIPSE
   ==========================================================================

   Character:
       Minimal
       Sophisticated
       Dark
       Refined
       Studio-inspired
   ========================================================================== */

[data-theme="theme-eclipse"] {

    --sv-bg: #030405;
    --sv-bg-elevated: #08090b;

    --sv-surface: #0d0f12;
    --sv-surface-1: #121519;
    --sv-surface-2: #181c21;
    --sv-surface-3: #20252b;

    --sv-surface-glass:
        rgba(13, 15, 18, 0.80);


    --sv-theme-accent: #c4b5fd;
    --sv-theme-accent-secondary: #94a3b8;

    --sv-theme-accent-soft:
        rgba(196, 181, 253, 0.09);

    --sv-theme-accent-secondary-soft:
        rgba(148, 163, 184, 0.08);

    --sv-theme-glow:
        rgba(196, 181, 253, 0.18);

    --sv-theme-glow-secondary:
        rgba(148, 163, 184, 0.13);


    --sv-gradient-primary:
        linear-gradient(
            135deg,
            #c4b5fd 0%,
            #a5b4fc 45%,
            #94a3b8 100%
        );

    --sv-gradient-hero:
        radial-gradient(
            circle at 18% 20%,
            rgba(196, 181, 253, 0.15),
            transparent 42%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(148, 163, 184, 0.10),
            transparent 44%
        );


    --sv-header-bg:
        rgba(3, 4, 5, 0.91);
}


/* ==========================================================================
   7. PRODUCT THEME — RADIO
   ==========================================================================

   Radio should feel like a broadcast environment rather than another
   generic SynthVerse page.

   Character:
       Broadcast
       Live
       Dynamic
       Audio-focused
   ========================================================================== */

[data-product="radio"] {

    --sv-bg: #07090c;
    --sv-bg-elevated: #0c1015;

    --sv-surface: #11171e;
    --sv-surface-1: #151d26;
    --sv-surface-2: #1b2631;
    --sv-surface-3: #24323e;

    --sv-surface-glass:
        rgba(17, 23, 30, 0.78);


    --sv-theme-accent: #22d3ee;
    --sv-theme-accent-secondary: #34d399;

    --sv-theme-accent-soft:
        rgba(34, 211, 238, 0.12);

    --sv-theme-accent-secondary-soft:
        rgba(52, 211, 153, 0.10);

    --sv-theme-glow:
        rgba(34, 211, 238, 0.30);

    --sv-theme-glow-secondary:
        rgba(52, 211, 153, 0.20);


    --sv-gradient-primary:
        linear-gradient(
            135deg,
            #22d3ee,
            #34d399
        );

    --sv-gradient-hero:
        radial-gradient(
            circle at 20% 20%,
            rgba(34, 211, 238, 0.25),
            transparent 42%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(52, 211, 153, 0.18),
            transparent 44%
        );


    --sv-header-bg:
        rgba(7, 9, 12, 0.90);
}


/* ==========================================================================
   8. PRODUCT THEME — STUDIO
   ==========================================================================

   Studio should feel professional and focused.

   Character:
       Professional
       Precise
       Clean
       Production-oriented
   ========================================================================== */

[data-product="studio"] {

    --sv-bg: #080a0d;
    --sv-bg-elevated: #0d1116;

    --sv-surface: #12171d;
    --sv-surface-1: #171d24;
    --sv-surface-2: #1d252e;
    --sv-surface-3: #26313b;

    --sv-surface-glass:
        rgba(18, 23, 29, 0.82);


    --sv-theme-accent: #60a5fa;
    --sv-theme-accent-secondary: #a78bfa;

    --sv-theme-accent-soft:
        rgba(96, 165, 250, 0.11);

    --sv-theme-accent-secondary-soft:
        rgba(167, 139, 250, 0.09);

    --sv-theme-glow:
        rgba(96, 165, 250, 0.23);

    --sv-theme-glow-secondary:
        rgba(167, 139, 250, 0.17);


    --sv-gradient-primary:
        linear-gradient(
            135deg,
            #60a5fa,
            #a78bfa
        );

    --sv-gradient-hero:
        radial-gradient(
            circle at 20% 20%,
            rgba(96, 165, 250, 0.18),
            transparent 44%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(167, 139, 250, 0.14),
            transparent 44%
        );


    --sv-header-bg:
        rgba(8, 10, 13, 0.93);
}


/* ==========================================================================
   9. PRODUCT THEME — FORGE
   ==========================================================================

   Forge should feel like a creative workstation.

   Character:
       Creative
       Experimental
       Powerful
       Tool-oriented
   ========================================================================== */

[data-product="forge"] {

    --sv-bg: #09070d;
    --sv-bg-elevated: #100b17;

    --sv-surface: #15101d;
    --sv-surface-1: #1b1424;
    --sv-surface-2: #241a30;
    --sv-surface-3: #30223e;

    --sv-surface-glass:
        rgba(21, 16, 29, 0.80);


    --sv-theme-accent: #f472b6;
    --sv-theme-accent-secondary: #8b5cf6;

    --sv-theme-accent-soft:
        rgba(244, 114, 182, 0.12);

    --sv-theme-accent-secondary-soft:
        rgba(139, 92, 246, 0.11);

    --sv-theme-glow:
        rgba(244, 114, 182, 0.25);

    --sv-theme-glow-secondary:
        rgba(139, 92, 246, 0.22);


    --sv-gradient-primary:
        linear-gradient(
            135deg,
            #f472b6,
            #c084fc,
            #8b5cf6
        );

    --sv-gradient-hero:
        radial-gradient(
            circle at 18% 20%,
            rgba(244, 114, 182, 0.22),
            transparent 42%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(139, 92, 246, 0.20),
            transparent 44%
        );


    --sv-header-bg:
        rgba(9, 7, 13, 0.91);
}


/* ==========================================================================
   10. PRODUCT THEME — ADMIN
   ==========================================================================

   Admin prioritises readability and operational clarity over atmosphere.

   Character:
       Functional
       Precise
       Controlled
       Information-dense
   ========================================================================== */

[data-product="admin"] {

    --sv-bg: #080a0d;
    --sv-bg-elevated: #0d1116;

    --sv-surface: #12171d;
    --sv-surface-1: #171d24;
    --sv-surface-2: #1d252e;
    --sv-surface-3: #26313b;

    --sv-surface-glass:
        rgba(18, 23, 29, 0.86);


    --sv-theme-accent: #60a5fa;
    --sv-theme-accent-secondary: #38bdf8;

    --sv-theme-accent-soft:
        rgba(96, 165, 250, 0.10);

    --sv-theme-accent-secondary-soft:
        rgba(56, 189, 248, 0.08);

    --sv-theme-glow:
        rgba(96, 165, 250, 0.17);

    --sv-theme-glow-secondary:
        rgba(56, 189, 248, 0.13);


    --sv-gradient-primary:
        linear-gradient(
            135deg,
            #60a5fa,
            #38bdf8
        );

    --sv-gradient-hero:
        radial-gradient(
            circle at 20% 20%,
            rgba(96, 165, 250, 0.12),
            transparent 42%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(56, 189, 248, 0.08),
            transparent 44%
        );


    --sv-header-bg:
        rgba(8, 10, 13, 0.95);
}


/* ==========================================================================
   11. THEME ATMOSPHERE
   ==========================================================================

   These effects are intentionally subtle.

   SynthVerse should feel atmospheric, not overloaded with glowing
   backgrounds.
   ========================================================================== */

.sv-body {

    background:
        var(--sv-atmosphere-primary),
        var(--sv-atmosphere-secondary),
        var(--sv-bg);

    color:
        var(--sv-text-primary);

    background-attachment: fixed;
}


/* ==========================================================================
   12. THEME-AWARE LINKS
   ========================================================================== */

a {

    color:
        inherit;

}

a:hover {

    color:
        var(--sv-theme-accent);

}


/* ==========================================================================
   13. THEME-AWARE SELECTION
   ========================================================================== */

::selection {

    background:
        var(--sv-theme-accent);

    color:
        var(--sv-text-inverse);

}


/* ==========================================================================
   14. THEME-AWARE FOCUS
   ========================================================================== */

:focus-visible {

    outline:
        2px solid var(--sv-theme-accent);

    outline-offset:
        3px;

}


/* ==========================================================================
   15. THEME-AWARE SCROLLBAR
   ========================================================================== */

* {

    scrollbar-color:
        var(--sv-theme-accent)
        var(--sv-bg);

}


/* ==========================================================================
   16. THEME UTILITY — ACCENT TEXT
   ========================================================================== */

.sv-theme-accent {

    color:
        var(--sv-theme-accent);

}


.sv-theme-accent-secondary {

    color:
        var(--sv-theme-accent-secondary);

}


/* ==========================================================================
   17. THEME UTILITY — GRADIENT TEXT
   ========================================================================== */

.sv-gradient-text {

    background:
        var(--sv-gradient-primary);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* ==========================================================================
   18. THEME UTILITY — GLOW
   ========================================================================== */

.sv-theme-glow {

    box-shadow:
        var(--sv-card-glow);

}


.sv-theme-glow-artwork {

    box-shadow:
        var(--sv-artwork-glow);

}


.sv-theme-glow-player {

    box-shadow:
        var(--sv-player-glow);

}


/* ==========================================================================
   19. THEME UTILITY — GRADIENT SURFACE
   ========================================================================== */

.sv-theme-gradient {

    background:
        var(--sv-gradient-primary);

}


.sv-theme-gradient-soft {

    background:
        var(--sv-gradient-soft);

}


/* ==========================================================================
   20. THEME UTILITY — GLASS
   ========================================================================== */

.sv-theme-glass {

    background:
        var(--sv-surface-glass);

    border:
        1px solid var(--sv-border);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

}


/* ==========================================================================
   21. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .sv-body {

        background-attachment:
            scroll;

    }

}


/* ==========================================================================
   22. HIGH CONTRAST SUPPORT
   ========================================================================== */

@media (prefers-contrast: more) {

    :root {

        --sv-border:
            rgba(255, 255, 255, 0.18);

        --sv-border-light:
            rgba(255, 255, 255, 0.25);

        --sv-border-strong:
            rgba(255, 255, 255, 0.35);

        --sv-text-secondary:
            #cbd2dc;

        --sv-text-muted:
            #9aa4b2;

    }

}


/* ==========================================================================
   END OF SYNTHVERSE THEME SYSTEM
   ========================================================================== */