/* Shared application palette; photo/video surfaces intentionally retain dark ink. */
:root {
  color-scheme: dark;
  --page-bg: #101113;
  --page-text: #f4f3ef;
  --surface: #1c1d20;
  --surface-2: #272930;
  --line: #41434b;
  --muted: #b4b5bc;
  --legal-link: #a5e5e1;
  --music-accent: #f5a6ca;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --ease-smooth-out: cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-color-scheme: light) {
html {
  color-scheme: light;
  --page-bg: #f6f7f9;
  --page-text: #202631;
  --surface: #ffffff;
  --surface-2: #e9edf2;
  --line: #ccd3dd;
  --muted: #526074;
  --legal-link: #086b72;
  --music-accent: #a52b62;
}
}
@media (prefers-color-scheme: light) {
html body {
  --bg: var(--page-bg);
  --bg-elevated: var(--surface);
  --bg-elevated-2: var(--surface-2);
  --card: var(--surface);
  --text: var(--page-text);
  --text-muted: var(--muted);
  --border: var(--line);
  --accent: #086b72;
  --accent-ink: #ffffff;
  --danger: #b72d3b;
  --success: #17633e;
  --muted: #526074;
}
}
@media (prefers-color-scheme: light) {
html :is(body.music, .release) { --accent: #a52b62 !important; }
}
:focus-visible { outline: 2px solid var(--legal-link); outline-offset: 4px; }
@media (prefers-color-scheme: light) {
html :is(.hero__tagline, .hero__tagline strong, .section__head h2) { color: var(--text); }
}
@media (prefers-color-scheme: light) {
html .hero--has-bg .hero__overlay { background: linear-gradient(180deg, #f6f7f9b3, #f6f7f9f5 75%); }
}
@media (prefers-color-scheme: light) {
html :is(.hero h1, .hero__tagline) { text-shadow: none; }
}
@media (prefers-color-scheme: light) {
html .hero__followers-text { background: var(--surface); border-color: var(--line); }
}
@media (prefers-color-scheme: light) {
html :is(.card, .social-card, .hero--has-bg, .modal-card, .modal-form, .qr-card) { box-shadow: 0 4px 18px #2026310a; }
}
@media (prefers-color-scheme: light) {
html .card:not(.card--banner):hover { background: var(--surface-2); }
}
@media (prefers-color-scheme: light) {
html :is(.card--banner .card__qr-btn, .video-caption, .video-play) { color: #fff; }
}
@media (prefers-color-scheme: light) {
html .card--banner .card__btn { background: #b4edf0; color: #103e43; }
}
@media (prefers-color-scheme: light) {
html .card--banner .card__badge:not([style]) { background: #b4edf0; color: #103e43; }
}
@media (prefers-color-scheme: light) {
html .card--banner .card__title { color: #fff; }
}
@media (prefers-color-scheme: light) {
html .card--banner .card__desc { color: #e1e8ef; }
}
@media (prefers-color-scheme: light) {
html .stories-empty { border-color: var(--line); }
}
@media (prefers-color-scheme: light) {
html .form-group label { color: var(--text); }
}
@media (prefers-color-scheme: light) {
html :is(#revealedEmailText, #copyEmailBtn) { color: var(--text) !important; }
}
@media (prefers-color-scheme: light) {
html .hero-actions .primary-action,
html .audio-player .player-play { color: #fff; }
}
@media (prefers-color-scheme: light) {
html .service-mark { background: #202126; }
}
@media (prefers-color-scheme: light) {
html :is(.artist-name, .video-title, .extras-section a) { color: var(--muted); }
}
@media (prefers-color-scheme: light) {
html .audio-player .player-error { color: #b72d3b; }
}
@media (prefers-color-scheme: light) {
html .btn-secondary { background: var(--surface-2); }
}
@media (prefers-color-scheme: light) {
html .btn-primary:hover,
html .btn-home:hover { background: #075960; }
}
@media (prefers-color-scheme: light) {
html .baddie-preview__controls { background: var(--surface); color: var(--text); }
}
@media (prefers-color-scheme: light) {
html .baddie-preview__toolbar button { background: var(--surface-2); color: var(--text); border-color: var(--line); }
}
/* Stable card geometry for mouse, touch and keyboard. */
:is(.card, .social-card, .socials a, .socials button, .hero__avatar, .story, .card__qr-btn, .topbar__official, .card__btn, .card__go, .social-card__icon, .social-card__arrow, .btn-home):is(:hover, :active),
.card:hover :is(.card__bg-layer, .card__thumb img, .card__platform-icon, .card__btn, .card__go),
.social-card:hover :is(.social-card__icon, .social-card__arrow) { transform: none !important; }
:is(.card, .social-card, .socials a, .card__qr-btn, .hero-actions a, .hero-actions button, .service-link) {
  transition: border-color var(--duration-quick) ease-out, background-color var(--duration-quick) ease-out, color var(--duration-quick) ease-out;
}
@media (hover: hover) and (pointer: fine) {
  :is(.hero-actions button, .hero-actions a, .service-link):hover { border-color: var(--legal-link); background-color: var(--surface-2); }
  .hero-actions .primary-action:hover { background-color: var(--accent); filter: brightness(.92); }
}
:is(button, .card, .social-card, .service-link, .hero-actions a):active { filter: brightness(.94); }
.hero__avatar, .hero__avatar:hover { box-shadow: none; }
@media (min-width: 1000px) {
  body:has(.wrap:not(.error-wrap)) { --maxw: 960px; }
  .topbar { padding-top: 28px; padding-bottom: 24px; }
  .hero { padding: 44px 32px 36px; }
  .hero__tagline { max-width: 530px; }
  .home-music .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .home-music .card:not(.card--banner) { grid-column: 1 / -1; }
  .social-grid { gap: 16px; }
}
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; }
  .topbar__actions { flex-wrap: wrap; }
  .music-nav { flex-wrap: wrap; gap: 16px; }
  .music-nav nav { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html, *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
:is(.btn-submit, .btn-trigger-modal, .qr-action-btn, .btn):is(:hover, :active) { transform: none !important; }
@media (prefers-color-scheme: light) {
html :is(.flash-banner--success, #emailRevealedArea > div:first-child) { color: #17633e !important; }
}
@media (prefers-color-scheme: light) {
html .flash-banner--danger { color: #b72d3b; }
}
@media (prefers-color-scheme: light) {
html .footer__disclaimer { color: var(--text-muted); }
}
@media (prefers-color-scheme: light) {
html .footer__logo { background: none; -webkit-text-fill-color: var(--text); }
}