/* =========================================================
   OSBEATS GLOBAL SITE THEME
   Exact Beats-page canvas background: #ececea
   Change this one file to change the site-wide page background.
   ========================================================= */

:root{
  --osbeats-site-background:#ececea;
}

html,
body{
  background:var(--osbeats-site-background) !important;
}

/* OSBeats approved brand red */
:root{
  --osbeats-red:#73070B;
  --osbeats-button-red:#73070B;
}


/* =========================================================
   OSBEATS APPROVED RED BLACK TAB SYSTEM
   Matches the user's Apply Filters reference.
   ========================================================= */
:root{
  --osbeats-red:#73070B;
  --osbeats-red-hover:#89090E;
  --osbeats-red-dark:#450408;
  --osbeats-black:#100F12;
  --osbeats-red-black-tab:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%);
  --osbeats-red-black-tab-hover:linear-gradient(105deg,#7B080D 0%,#920A10 34%,#520509 67%,#100F12 100%);
}

/* Site-wide active tabs / selected navigation */
.tab.active,
.tabs .active,
.tab-button.active,
.nav-tab.active,
.store-tab.active,
.music-tabs .tab.active,
.creator-tabs .active,
.dashboard-tabs .active,
.profile-tabs .active,
.admin-tabs .active,
.moderator-tabs .active,
.analytics-tabs .active,
.settings-tabs .active,
.library-tabs .active,
.filter-tabs .active,
.sidebar-nav a.active,
.sidebar a.active,
.side-nav a.active,
.browse-menu .active,
.browse-link.active,
.genre-filter.active,
.filter-chip.active,
.sort-tab.active,
[aria-selected="true"]{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  background-color:#73070B !important;
  border-color:#73070B !important;
  color:#fff !important;
}

/* Active/primary tab hover */
.tab.active:hover,
.tabs .active:hover,
.tab-button.active:hover,
.nav-tab.active:hover,
.store-tab.active:hover,
.music-tabs .tab.active:hover,
.creator-tabs .active:hover,
.dashboard-tabs .active:hover,
.profile-tabs .active:hover,
.admin-tabs .active:hover,
.moderator-tabs .active:hover,
.analytics-tabs .active:hover,
.settings-tabs .active:hover,
.library-tabs .active:hover,
.filter-tabs .active:hover,
.sidebar-nav a.active:hover,
.sidebar a.active:hover,
.side-nav a.active:hover,
.browse-menu .active:hover,
.genre-filter.active:hover,
.filter-chip.active:hover,
[aria-selected="true"]:hover{
  background:linear-gradient(105deg,#7B080D 0%,#920A10 34%,#520509 67%,#100F12 100%) !important;
  background-color:#89090E !important;
  border-color:#89090E !important;
  color:#fff !important;
}

/* Site-wide red CTA/button surfaces get the same red/black mixture */
.btn-primary,
.button.red,
button.primary,
button.red,
input[type="submit"],
button[type="submit"],
.follow-button,
.owner-button:not(.ghost),
.create-playlist button,
.upload-track-btn,
#uploadTrackButton,
.hero-search button,
.actions .danger,
.modal-actions .danger,
.side-upgrade a,
.bundle-card a,
.available-card button,
.join-now,
.join-button,
.view-profile,
.apply-filters,
.filter-submit,
.stat-icon,
.metric-icon,
.kpi-icon,
.notification-icon,
.sale-icon{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  background-color:#73070B !important;
  border-color:#73070B !important;
  color:#fff !important;
}

.btn-primary:hover,
.button.red:hover,
button.primary:hover,
button.red:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.follow-button:hover,
.owner-button:not(.ghost):hover,
.create-playlist button:hover,
.upload-track-btn:hover,
#uploadTrackButton:hover,
.hero-search button:hover,
.actions .danger:hover,
.modal-actions .danger:hover,
.side-upgrade a:hover,
.bundle-card a:hover,
.available-card button:hover,
.join-now:hover,
.join-button:hover,
.view-profile:hover,
.apply-filters:hover,
.filter-submit:hover{
  background:linear-gradient(105deg,#7B080D 0%,#920A10 34%,#520509 67%,#100F12 100%) !important;
  background-color:#89090E !important;
  border-color:#89090E !important;
}

/* Red text, icons and outlines use one matching visible red */
.red,
.accent-red,
.text-red,
.section-kicker,
.step-label,
.badge-red,
.icon-red,
a.active,
.nav-link.active{
  color:#73070B !important;
}

.red-border,
.accent-border,
.border-red{
  border-color:#73070B !important;
}