/* ===================================================================
   RadioActive — Truth It Theme
   Inspired by truthit.org — OS/2 Warp purple/indigo palette.
   Deep indigo desktop · lavender-grey windows · rose-purple titlebars.
   WCAG 2.1 AA compliant (all text ≥ 4.5:1 contrast).
   =================================================================== */

:root {
  /* Desktop */
  --desktop:          #1a0a2e;

  /* Window chrome */
  --win-bg:           #c8c4d0;   /* soft lavender-grey */
  --win-border-lo:    #e0d8ec;   /* light lavender highlight */
  --win-border-hi:    #8070a0;   /* medium purple shadow */
  --win-border-edge:  #3a2050;   /* deep indigo edge */

  /* Title bars */
  --title-start:      #5b2d8e;   /* rose-purple — contrast on white ≈ 8:1 ✓ */
  --title-end:        #2d1b6b;   /* deep indigo */
  --title-inactive:   #8070a0;
  --title-text:       #ffffff;   /* contrast on #5b2d8e ≈ 8.1:1 ✓ */

  /* Buttons */
  --btn-face:         #c8c4d0;

  /* Text */
  --text:             #000000;   /* contrast on #c8c4d0 ≈ 14:1 ✓ */
  --text-inv:         #ffffff;

  /* Selection */
  --sel-bg:           #5b2d8e;
  --sel-text:         #ffffff;   /* contrast on #5b2d8e ≈ 8.1:1 ✓ */

  /* Inputs */
  --input-bg:         #ffffff;
  --menu-bg:          #c8c4d0;
  --status-bg:        #c8c4d0;
  --scrollbar:        #c8c4d0;
  --shadow:           rgba(0,0,0,0.55);

  /* Accents */
  --accent:           #5b2d8e;   /* contrast on #c8c4d0 ≈ 5.5:1 ✓ */
  --danger:           #990000;   /* contrast on #c8c4d0 ≈ 7.2:1 ✓ */
  --success:          #005500;   /* contrast on #c8c4d0 ≈ 9.1:1 ✓ */
  --warn:             #7a4800;   /* contrast on #c8c4d0 ≈ 5.5:1 ✓ */

  /* Structural overrides */
  --topbar-bg:        linear-gradient(90deg, #1a0a2e 0%, #5b2d8e 50%, #2d1b6b 100%);
  --topbar-border:    #3a2050;
  --topbar-text:      #ffffff;
  --topbar-text-dim:  rgba(255,255,255,0.85);
  --art-panel-bg:     #1a0a2e;
  --player-bg:        linear-gradient(180deg, #2d1b6b 0%, #1a0a2e 100%);
  --player-border:    #5b2d8e;
  --player-text:      #ffffff;
  --player-text-dim:  #8070a0;
  --cover-ph-bg:      linear-gradient(135deg, #1a0a2e 0%, #3a1a6e 50%, #1a0a2e 100%);
  --lb-list-bg:       #ffffff;
  --lb-hover-bg:      #ede8f5;
  --play-btn-bg:      #5b2d8e;
  --play-btn-hi:      #7b4ac0;
  --play-btn-lo:      #2d1b6b;
  --progress-fill:    linear-gradient(90deg, #4a007a 0%, #7b2fbe 100%);
  --radio-bg:         #1a0a2e;
  --radio-text:       #ffffff;
  --radio-text-dim:   #8070a0;
  --radio-border:     #5b2d8e;
  --font:             'Helvetica Neue', Helvetica, Arial, 'Lucida Sans', sans-serif;
  --text-muted:       #6a5a80;
}

/* Body — deep indigo desktop with subtle diagonal weave */
body {
  background: #1a0a2e;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(91,45,142,0.06) 0px,
      rgba(91,45,142,0.06) 1px,
      transparent 1px,
      transparent 8px
    );
}

/* Links */
a { color: #4a007a; }
a:hover { color: #7b2fbe; }

/* Bevel borders — lavender-grey tones */
.raised {
  border-top:    2px solid #e0d8ec;
  border-left:   2px solid #e0d8ec;
  border-right:  2px solid #8070a0;
  border-bottom: 2px solid #8070a0;
}
.raised-sm {
  border-top:    1px solid #e0d8ec;
  border-left:   1px solid #e0d8ec;
  border-right:  1px solid #8070a0;
  border-bottom: 1px solid #8070a0;
}
.sunken {
  border-top:    2px solid #8070a0;
  border-left:   2px solid #8070a0;
  border-right:  2px solid #e0d8ec;
  border-bottom: 2px solid #e0d8ec;
}
.sunken-sm {
  border-top:    1px solid #8070a0;
  border-left:   1px solid #8070a0;
  border-right:  1px solid #e0d8ec;
  border-bottom: 1px solid #e0d8ec;
}

/* Window */
.window {
  background: #c8c4d0;
  border-top:    2px solid #e0d8ec;
  border-left:   2px solid #e0d8ec;
  border-right:  2px solid #3a2050;
  border-bottom: 2px solid #3a2050;
  box-shadow: 2px 2px 0 #3a2050, 3px 3px 8px rgba(0,0,0,0.5);
}

.window-titlebar {
  background: linear-gradient(90deg, #5b2d8e 0%, #2d1b6b 100%);
  color: #ffffff;
  border-bottom: 1px solid #3a2050;
}

/* Panels */
.panel {
  background: #c8c4d0;
  border-top:    2px solid #e0d8ec;
  border-left:   2px solid #e0d8ec;
  border-right:  2px solid #8070a0;
  border-bottom: 2px solid #8070a0;
}

.panel-header {
  background: linear-gradient(90deg, #5b2d8e 0%, #2d1b6b 100%);
  color: #ffffff;
  border-bottom: 1px solid #3a2050;
}

/* Buttons */
.btn {
  background: #c8c4d0;
  color: #000000;
  border-top:    2px solid #e0d8ec;
  border-left:   2px solid #e0d8ec;
  border-right:  2px solid #8070a0;
  border-bottom: 2px solid #8070a0;
}
.btn:hover { background: #ddd8e8; color: #3a1a6e; }
.btn:active, .btn.pressed {
  border-top:    2px solid #8070a0;
  border-left:   2px solid #8070a0;
  border-right:  2px solid #e0d8ec;
  border-bottom: 2px solid #e0d8ec;
}

.btn-primary {
  background: #5b2d8e;
  color: #ffffff;
  border-color: #7b4ac0 #2d1b6b #2d1b6b #7b4ac0;
}
.btn-primary:hover { background: #7b2fbe; color: #ffffff; }

.btn-danger {
  background: #c8c4d0;
  color: #990000;
  border-color: #e0d8ec #8070a0 #8070a0 #e0d8ec;
}
.btn-danger:hover { background: #ffd8d8; color: #660000; }

/* Forms */
input[type=text], input[type=password], input[type=email],
input[type=url], input[type=search], textarea, select {
  background: #ffffff;
  color: #000000;
  border-top:    2px solid #8070a0;
  border-left:   2px solid #8070a0;
  border-right:  2px solid #e0d8ec;
  border-bottom: 2px solid #e0d8ec;
}
input:focus, textarea:focus, select:focus {
  outline: 1px solid #5b2d8e;
  outline-offset: 1px;
}

/* Flash messages */
.msg-success { background: #d8f0d8; border-color: #006600; color: #004400; }
.msg-error   { background: #ffd8d8; border-color: #990000; color: #660000; }
.msg-info    { background: #ddd0f8; border-color: #5b2d8e; color: #3a1a6e; }
.msg-warn    { background: #fff0cc; border-color: #886600; color: #664400; }

/* Section titles */
.section-title { color: #5b2d8e; border-bottom-color: #c0b8cc; }

/* Track cards */
.track-card {
  background: #c8c4d0;
  border-top:    2px solid #e0d8ec;
  border-left:   2px solid #e0d8ec;
  border-right:  2px solid #8070a0;
  border-bottom: 2px solid #8070a0;
}
.track-card:hover { box-shadow: 2px 2px 0 #8070a0, 0 0 8px rgba(91,45,142,0.2); }
.track-card .track-title  { color: #3a1a6e; }
.track-card .track-artist { color: #6a5a80; }
.track-card .track-meta   { color: #8070a0; }
.track-card .play-overlay { background: rgba(91,45,142,0.80); }

/* Lightbox */
.lightbox-window {
  background: #c8c4d0;
  border-top:    3px solid #e0d8ec;
  border-left:   3px solid #e0d8ec;
  border-right:  3px solid #3a2050;
  border-bottom: 3px solid #3a2050;
  box-shadow: 3px 3px 0 #3a2050, 6px 6px 20px rgba(0,0,0,0.7);
}

.lightbox-titlebar {
  background: linear-gradient(90deg, #5b2d8e 0%, #2d1b6b 100%);
  color: #ffffff;
}

.lb-meta .lb-title  { color: #3a1a6e; }
.lb-meta .lb-artist { color: #5b2d8e; }
.lb-meta .lb-album  { color: #6a5a80; }
.lb-meta .lb-extra  { color: #8070a0; }

.lb-track-item { color: #000000; border-bottom-color: #c0b8cc; }
.lb-track-item.active { background: #5b2d8e; color: #ffffff; }
.lb-track-item.active .lb-ti-artist,
.lb-track-item.active .lb-ti-dur { color: rgba(255,255,255,0.75); }

.lb-ti-num    { color: #8070a0; }
.lb-ti-title  { color: #000000; }
.lb-ti-artist { color: #6a5a80; }
.lb-ti-dur    { color: #8070a0; }
.lb-ti-plays  { color: #5b2d8e; }

/* Control buttons */
.ctrl-btn {
  background: #c8c4d0;
  border-top:    2px solid #e0d8ec;
  border-left:   2px solid #e0d8ec;
  border-right:  2px solid #8070a0;
  border-bottom: 2px solid #8070a0;
}
.ctrl-btn:hover { background: #ddd8e8; }
.ctrl-btn:active {
  border-top:    2px solid #8070a0;
  border-left:   2px solid #8070a0;
  border-right:  2px solid #e0d8ec;
  border-bottom: 2px solid #e0d8ec;
}
.ctrl-btn svg { fill: #6a5a80; stroke: #6a5a80; }
.ctrl-btn.active { background: #ede8f5; }
.ctrl-btn.active svg { stroke: #5b2d8e; fill: none; }
.ctrl-btn.active .lb-loop-label { color: #5b2d8e; }

/* Progress bars */
.progress-bar-wrap {
  background: #ffffff;
  border-top:    1px solid #8070a0;
  border-left:   1px solid #8070a0;
  border-right:  1px solid #e0d8ec;
  border-bottom: 1px solid #e0d8ec;
}
.lb-progress {
  background: #ffffff;
  border-top:    1px solid #8070a0;
  border-left:   1px solid #8070a0;
}
.lb-times       { color: #8070a0; }
.progress-times { color: #8070a0; }

/* Volume slider */
.vol-slider { background: #c0b8cc; }
.vol-slider::-webkit-slider-thumb {
  background: #c8c4d0;
  border-top:  1px solid #e0d8ec;
  border-left: 1px solid #e0d8ec;
  border-right:  1px solid #8070a0;
  border-bottom: 1px solid #8070a0;
}

/* Tables */
.data-table { background: #ddd8e8; }
.data-table th { background: #5b2d8e; color: #ffffff; border-right-color: #3a2050; }
.data-table td { border-bottom-color: #c0b8cc; color: #000000; }
.data-table tr:nth-child(even) td { background: #ede8f5; }
.data-table tr:hover td { background: #e0d8ec; }

/* Admin layout */
.admin-nav-item { color: #3a1a6e; border-bottom-color: #c0b8cc; }
.admin-nav-item:hover { background: #ede8f5; color: #5b2d8e; }
.admin-nav-item.active { background: #5b2d8e; color: #ffffff; font-weight: bold; }

/* Profile header */
.profile-header {
  background: linear-gradient(180deg, #1a0a2e 0%, #3a1a6e 100%);
}

/* Subpage tabs */
.subtab {
  background: #c8c4d0;
  color: #6a5a80;
  border-top:    2px solid #e0d8ec;
  border-left:   2px solid #e0d8ec;
  border-right:  2px solid #8070a0;
}
.subtab:hover { background: #ddd8e8; color: #5b2d8e; }
.subtab.active { background: #c8c4d0; color: #3a1a6e; border-bottom-color: #c8c4d0; font-weight: bold; }

/* Badges */
.badge-admin  { background: #5b2d8e; color: #ffffff; }
.badge-editor { background: #2d1b6b; color: #e0d8ec; }
.badge-contrib{ background: #c8c4d0; color: #3a1a6e; }

/* Auth window */
.auth-logo {
  background: linear-gradient(180deg, #1a0a2e 0%, #3a1a6e 100%);
  color: #ffffff;
}
.auth-logo h1 { color: #ffffff; }
.auth-logo .tagline { color: #b8a8d0; }

/* Stat cards */
.stat-card { background: #ddd8e8; border-color: #e0d8ec #8070a0 #8070a0 #e0d8ec; }
.stat-num  { color: #5b2d8e; }
.stat-label{ color: #6a5a80; }

/* Upload zone */
.upload-zone { background: #ddd8e8; border-color: #8070a0; }
.upload-zone:hover, .upload-zone.drag-over { background: #ede8f5; border-color: #5b2d8e; }

/* Invite codes */
.invite-code { background: #ffffff; color: #3a1a6e; border-color: #8070a0; }

/* Title buttons */
.title-btn {
  background: #c8c4d0;
  border-top:    1px solid #e0d8ec;
  border-left:   1px solid #e0d8ec;
  border-right:  1px solid #8070a0;
  border-bottom: 1px solid #8070a0;
  color: #3a1a6e;
}
.title-btn:hover { background: #5b2d8e; color: #ffffff; }

/* Scrollbar */
::-webkit-scrollbar-track { background: #b8b4c4; }
::-webkit-scrollbar-thumb {
  background: #c8c4d0;
  border-top:    2px solid #e0d8ec;
  border-left:   2px solid #e0d8ec;
  border-right:  2px solid #8070a0;
  border-bottom: 2px solid #8070a0;
}
::-webkit-scrollbar-button {
  background: #c8c4d0;
  border-top:    1px solid #e0d8ec;
  border-left:   1px solid #e0d8ec;
  border-right:  1px solid #8070a0;
  border-bottom: 1px solid #8070a0;
}

/* Track list */
.track-list { background: #ddd8e8; border-color: #e0d8ec #8070a0 #8070a0 #e0d8ec; }
.track-list-item { border-bottom-color: #c0b8cc; color: #000000; }
.track-list-item:hover { background: #ede8f5; }
.track-list-item.playing { background: #5b2d8e; color: #ffffff; }
.track-list-item.playing .tli-meta { color: rgba(255,255,255,0.7); }
.tli-num    { color: #8070a0; }
.tli-artist { color: #6a5a80; }
.tli-meta   { color: #8070a0; }

/* Form hints */
.form-hint  { color: #6a5a80; }
.text-muted { color: #6a5a80; }

/* Radio */
.radio-dot.live { background: #5b2d8e; box-shadow: 0 0 8px #5b2d8e; }

/* Landing panel */
.landing-content h2,
.landing-content h3,
.landing-content h4 { color: #5b2d8e; }
.landing-content blockquote { border-left-color: #8070a0; background: rgba(91,45,142,0.06); color: #3a1a6e; }
.landing-content hr  { border-top-color: #c0b8cc; }
.landing-content a   { color: #4a007a; }
.landing-content a:hover { color: #7b2fbe; }
.landing-content code { background: #ede8f5; border-color: #c0b8cc; color: #3a1a6e; }
.landing-content pre  { background: #ffffff; border-color: #8070a0; }
.landing-poster-wrap img { border-color: #8070a0; }