/* ═══════════════════════════════════════════════════════════════
   RAMSI ALIANI — Dark / Light Mode
   Basis: CSS Custom Properties
   ═══════════════════════════════════════════════════════════════ */

/* ── Dark Mode (Standard) ── */
:root,
[data-theme="dark"] {
    --ra-bg:           #000000;
    --ra-bg2:          #0a0a0a;
    --ra-bg3:          #111111;
    --ra-bg4:          #161616;
    --ra-text:         #ffffff;
    --ra-text-mid:     #cccccc;
    --ra-text-muted:   #999999;
    --ra-text-dim:     #666666;
    --ra-cyan:         #00e5ff;
    --ra-cyan2:        #00bcd4;
    --ra-cyan-dim:     rgba(0, 229, 255, 0.08);
    --ra-cyan-border:  rgba(0, 229, 255, 0.20);
    --ra-border:       rgba(255, 255, 255, 0.07);
    --ra-glass:        rgba(255, 255, 255, 0.02);
    --ra-glass-border: rgba(255, 255, 255, 0.08);
    --ra-shadow:       rgba(0, 0, 0, 0.7);
}

/* ── Light Mode ── */
[data-theme="light"] {
    --ra-bg:           #f2f2f2;
    --ra-bg2:          #ebebeb;
    --ra-bg3:          #ffffff;
    --ra-bg4:          #e4e4e4;
    --ra-text:         #0d0d0d;
    --ra-text-mid:     #333333;
    --ra-text-muted:   #666666;
    --ra-text-dim:     #999999;
    /* Cyan angepasst für Barrierefreiheit / Lesbarkeit auf hellem Hintergrund */
    --ra-cyan:         #007a99;
    --ra-cyan2:        #006080;
    --ra-cyan-dim:     rgba(0, 122, 153, 0.10);
    --ra-cyan-border:  rgba(0, 122, 153, 0.28);
    --ra-border:       rgba(0, 0, 0, 0.10);
    --ra-glass:        rgba(0, 0, 0, 0.03);
    --ra-glass-border: rgba(0, 0, 0, 0.10);
    --ra-shadow:       rgba(0, 0, 0, 0.12);
}

/* ── Smooth Transition beim Wechsel ── */
body,
body * {
    transition:
        background-color 0.3s ease,
        border-color     0.3s ease,
        color            0.25s ease !important;
}

/* Kein Transition auf Bildern und Videos */
img, video, svg {
    transition: none !important;
}

/* ── Body Background ── */
body {
    background-color: var(--ra-bg) !important;
    color:            var(--ra-text) !important;
}

/* ── Navigation ── */
nav {
    background-color: transparent;
}

nav.solid {
    background-color: color-mix(in srgb, var(--ra-bg) 92%, transparent) !important;
    border-bottom-color: var(--ra-border) !important;
}

.nav-links a {
    color: var(--ra-text-muted) !important;
}

.nav-links a:hover {
    color: var(--ra-text) !important;
}

.nav-cta {
    border-color: var(--ra-cyan-border) !important;
    color: var(--ra-cyan) !important;
}

.nav-cta:hover {
    background-color: var(--ra-cyan-dim) !important;
    border-color: var(--ra-cyan) !important;
}

/* ── Sections ── */
#about,
#hero {
    background-color: var(--ra-bg) !important;
}

#musik {
    background-color: var(--ra-bg2) !important;
}

/* ── Cards / Glass-Elemente ── */
.glass {
    background-color: var(--ra-glass) !important;
    border-color: var(--ra-glass-border) !important;
}

.about-points {
    background-color: var(--ra-bg4) !important;
    border-color: var(--ra-border) !important;
}

/* ── Text ── */
.body-text,
.about-text p,
.hero-sub,
.musik-body {
    color: var(--ra-text-mid) !important;
}

.hero-eyebrow,
.chip,
.scan-text,
.ht-lbl {
    color: var(--ra-text-dim) !important;
}

.hero-name,
.sh,
.musik-statement,
.album-title {
    color: var(--ra-text) !important;
}

.about-points li {
    color: var(--ra-text-mid) !important;
}

.about-points h4 {
    color: var(--ra-text) !important;
}

/* ── Cyan Akzente ── */
.c,
.hero-eyebrow,
.chip,
.musik-kicker,
.ht-val,
.scan-line,
.hero-soc:hover {
    color: var(--ra-cyan) !important;
}

/* ── Buttons ── */
.btn-primary {
    background-color: var(--ra-cyan) !important;
    color: var(--ra-bg) !important;
}

.btn-ghost {
    border-color: var(--ra-border) !important;
    color: var(--ra-text-mid) !important;
}

.btn-ghost:hover {
    border-color: var(--ra-cyan) !important;
    color: var(--ra-cyan) !important;
    background-color: var(--ra-cyan-dim) !important;
}

/* ── Hero Platform Icons ── */
.hero-platform {
    border-color: var(--ra-border) !important;
    background-color: var(--ra-glass) !important;
    color: var(--ra-text-dim) !important;
}

.hero-platform:hover {
    border-color: var(--ra-cyan) !important;
    color: var(--ra-cyan) !important;
    background-color: var(--ra-cyan-dim) !important;
}

/* ── Album Card ── */
.album-sub {
    color: var(--ra-text-dim) !important;
}

/* ── Trust Bar ── */
.hero-trust {
    border-top-color: var(--ra-border) !important;
}

.ht-sep {
    background-color: var(--ra-border) !important;
}

/* ── Musik erste Song Box ── */
.musik-first-song {
    border-color: var(--ra-cyan-border) !important;
    background-color: var(--ra-cyan-dim) !important;
}

/* ── Light Mode: Radial Gradients anpassen ── */
[data-theme="light"] .hero-bg {
    background: radial-gradient(ellipse 80% 80% at 75% 50%, rgba(0,122,153,0.06) 0%, transparent 60%) !important;
}

[data-theme="light"] #about::before {
    background: radial-gradient(ellipse 70% 85% at 65% 40%, rgba(0,122,153,0.05) 0%, transparent 70%) !important;
}

/* ── Theme Toggle Button ── */
#ramsi-theme-toggle {
    display:         flex;
    align-items:     center;
    gap:             6px;
    background:      transparent;
    border:          1px solid var(--ra-border);
    border-radius:   20px;
    padding:         5px 12px;
    cursor:          pointer;
    color:           var(--ra-text-muted);
    font-size:       0.70rem;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    font-family:     'Space Grotesk', sans-serif;
    transition:      border-color 0.2s, color 0.2s !important;
}

#ramsi-theme-toggle:hover {
    border-color: var(--ra-cyan);
    color:        var(--ra-cyan);
}

/* ── Polylang Language Switcher ── */
#ramsi-lang-switcher {
    position:   fixed;
    top:        22px;
    right:      160px;
    z-index:    9998;
    display:    flex;
    gap:        2px;
}

#ramsi-lang-switcher a,
#ramsi-lang-switcher span {
    color:           var(--ra-text-dim);
    font-size:       0.70rem;
    font-weight:     600;
    letter-spacing:  0.10em;
    text-transform:  uppercase;
    text-decoration: none;
    padding:         5px 9px;
    border-radius:   3px;
    transition:      color 0.2s, background-color 0.2s;
}

#ramsi-lang-switcher a:hover {
    color: var(--ra-cyan);
}

#ramsi-lang-switcher .current-lang {
    color:            var(--ra-cyan);
    pointer-events:   none;
}

/* ── Barrierefreiheit: Fokus-Ringe ── */
a:focus-visible,
button:focus-visible {
    outline:        2px solid var(--ra-cyan);
    outline-offset: 3px;
    border-radius:  3px;
}

/* ── Light Mode: Kontrast-Verbesserungen für Farbenblinde ── */
[data-theme="light"] .nav-links a {
    color: #444 !important;
}

[data-theme="light"] .body-text,
[data-theme="light"] .about-text p,
[data-theme="light"] .hero-sub,
[data-theme="light"] .musik-body {
    color: #333 !important;
}

[data-theme="light"] .about-points li {
    color: #444 !important;
}

/* ── Scan Line im Light Mode ── */
[data-theme="light"] .scan-line {
    background-color: var(--ra-cyan) !important;
}

[data-theme="light"] .hero-eyebrow::before,
[data-theme="light"] .chip::before,
[data-theme="light"] .musik-kicker::before {
    background-color: var(--ra-cyan) !important;
}