/* ================================================================
   THEME: TyTunes
   Aesthetic: Apple/macOS Sequoia dark — true black, purple→blue
   gradient accent, glassmorphism. Background animation (the
   "aurora" liquid-bands canvas) lives in background.js.

   TyTunes diverges from the other two themes more than just color:
   pill-shaped buttons, backdrop-blur glass surfaces, gradient text-
   clipping on the logo/track-title/active-track-number, a bouncier
   play-button easing, and lowercase track titles (engine default is
   uppercase). Section 2 below carries those as explicit overrides on
   top of the engine's base rules — that's expected and fine; themes
   are allowed to do this, the engine itself never changes.
   ================================================================ */

/* ── 1. Color & token mapping ─────────────────────────────────── */
:root {
    /* Apple dark mode palette — exact system values */
    --bg:          #000000;
    --surface:     #1c1c1e;
    --surface2:    #2c2c2e;
    --surface3:    #3a3a3c;
    --border:      rgba(255, 255, 255, 0.08);   /* was --border-soft */
    --border-mid:  rgba(255, 255, 255, 0.12);

    /* Apple system purple → electric blue */
    --accent:       #bf5af2;
    --accent-dim:   rgba(191, 90, 242, 0.18);
    --accent-light: #d08bff;
    --accent-hover: #bf5af2; /* TyTunes uses filter+shadow on hover, not a color swap — see overrides */
    --accent-glow:      rgba(191, 90, 242, 0.45);
    --accent-glow-fade: rgba(191, 90, 242, 0);

    /* Typography */
    --text:        #ffffff;
    --text-soft:   rgba(255, 255, 255, 0.85);
    --muted:       rgba(255, 255, 255, 0.40);
    --muted-mid:   rgba(255, 255, 255, 0.55);
    --mono: 'SF Mono', ui-monospace, 'Fira Code', 'Consolas', monospace;
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;

    /* Apple purple → blue gradient (Music.app energy) */
    --grad:        linear-gradient(135deg, #bf5af2 0%, #6e6bfa 50%, #0a84ff 100%);
    --grad-mid:    #6e6bfa;
    --grad-dim:    rgba(191, 90, 242, 0.16);
    --shadow-soft: 0 32px 80px rgba(0, 0, 0, 0.60);
    --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.50);

    /* Glass morphism */
    --glass-bg:    rgba(28, 28, 30, 0.82);
    --glass-bg-2:  rgba(44, 44, 46, 0.72);

    --logo-icon-gradient: var(--grad);
    --logo-text-gradient: none;
    --logo-text-color: rgba(255,255,255,0.90);
    --logo-text-fill: rgba(255,255,255,0.90); /* must match --logo-text-color: see note on .logo-text below */
    --play-btn-icon: #ffffff;
    --play-btn-hover-filter: brightness(1.10) saturate(1.08);
    --track-fmt-border: var(--border);
    --lossless:        #7eb8a4;
    --lossless-border:  rgba(126,184,164,0.5);
    --lossless-bg:      rgba(126,184,164,0.1);
    --drawer-shadow: 0 -4px 32px rgba(0,0,0,0.5);

    /* Casing: TyTunes is uppercase everywhere EXCEPT song titles, which
       keep their natural case in both the now-playing panel and the
       track list. --case-track-title and --case-track-name are
       deliberately omitted here (engine default is already "none"). */
    --case-logo-text:       uppercase;
    --case-track-label:     uppercase;
    --case-playlist-context: uppercase;
    --case-action-btn:      uppercase;
    --case-switcher-label:  uppercase;
    --case-playlist-pill:   uppercase;
    --case-track-fmt:       uppercase;
    --case-drawer-label:    uppercase;
}

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 2. TyTunes-specific overrides ────────────────────────────────
   Things the shared --variable hooks can't express: gradient text-
   clipping, glass blur, pill shapes, bounce easing, lowercase titles.
   ================================================================ */

.now-playing { background: #000000; }

.logo-icon {
    filter: drop-shadow(0 4px 16px rgba(191,90,242,0.50));
}
.logo-text {
    /* color comes from --logo-text-color/--logo-text-fill above — see
       the .logo-text rule in the engine for why both are needed: WebKit
       honors -webkit-text-fill-color over color for clipped-background
       text, so a plain (non-gradient) theme has to set both to the same
       value or risk invisible text. */
    font-weight: 700;
}
.build-version { opacity: 0.5; }

.track-title {
    font-weight: 700;
    letter-spacing: -0.03em;
    text-wrap: balance;
    text-shadow: 0 2px 20px rgba(0,0,0,0.60);
}

.play-btn {
    width: 58px;
    height: 58px;
    background: var(--grad);
    font-size: 1.05rem;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s, box-shadow 0.2s;
    box-shadow: 0 8px 32px rgba(191,90,242,0.45), 0 2px 8px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.22);
}
.play-btn:hover {
    background: var(--grad);
    transform: scale(1.065);
    box-shadow: 0 12px 40px rgba(191,90,242,0.55), 0 2px 8px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.22);
}
.play-btn.is-playing { animation: tyPulse 2s ease-out infinite; }
@keyframes tyPulse {
    0%   { box-shadow: 0 8px 32px rgba(191,90,242,0.45), 0 0 0 0 rgba(191,90,242,0.35), inset 0 1px 0 rgba(255,255,255,0.22); }
    70%  { box-shadow: 0 10px 36px rgba(191,90,242,0.48), 0 0 0 18px rgba(191,90,242,0), inset 0 1px 0 rgba(255,255,255,0.22); }
    100% { box-shadow: 0 8px 32px rgba(191,90,242,0.45), 0 0 0 0 rgba(191,90,242,0), inset 0 1px 0 rgba(255,255,255,0.22); }
}

.track-action-btn {
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 7px 13px;
    color: var(--muted-mid);
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
    backdrop-filter: blur(12px);
}
.track-action-btn:hover {
    color: #ffffff;
    border-color: rgba(191,90,242,0.45);
    background: rgba(191,90,242,0.18);
    transform: translateY(-1px);
}

.playlist-pill { transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s; }
.playlist-pill:hover {
    color: #ffffff;
    border-color: var(--border-mid);
    background: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}
.playlist-pill.active {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(191,90,242,0.40);
}

.track-fmt {
    background: rgba(255,255,255,0.07);
    border-radius: 5px;
}

.track-item.active .track-num {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.track-item.active .track-name {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.drawer-handle { background: rgba(255,255,255,0.04); }

@media (prefers-reduced-motion: reduce) {
    .play-btn.is-playing { animation: none; }
}