/* Dark theme overrides — matches Figma linear background: Orange/400 → Surface/Primary */

:root {
  /* Gradient stops (design spec) */
  --dark-bg-gradient-from: #fd7f3a;
  --dark-bg-gradient-to: #171412;
  --bg: #171412;
  --panel: #1b110e;
  --panel-2: #241714;
  --text: #fff5ed;
  --muted: #d9bfb2;
  --line: #4a2b22;
  --accent: var(--orange-500);
  --accent-2: var(--orange-600);
  --danger: #ff8e73;
  --success: #7dd3a4;
  --surface-elevated: #1b110e;
  --surface-muted: #2a1a16;
  --surface-soft-brand: #301a14;
  --text-inverted: #ffffff;
  --line-strong: #6d3a2b;
  --focus-ring: rgba(251, 84, 8, 0.45);
}

/* Full-page linear gradient: orange top (0%) → surface primary bottom (100%) */
body {
  background-image: linear-gradient(
    180deg,
    var(--dark-bg-gradient-from) 0%,
    var(--dark-bg-gradient-to) 100%
  );
  background-attachment: fixed;
  background-color: var(--dark-bg-gradient-to);
  background-repeat: no-repeat;
}

/* Base stylesheet forces buyer body/shells to flat --bg with !important. */
body[data-role-page="buyer"] {
  background-image: linear-gradient(
      180deg,
      var(--dark-bg-gradient-from) 0%,
      var(--dark-bg-gradient-to) 100%
    )
    !important;
  background-attachment: fixed !important;
  background-color: var(--dark-bg-gradient-to) !important;
  background-repeat: no-repeat !important;
}

body[data-role-page="buyer"] .buyer-shell,
body[data-role-page="buyer"] .app-shell {
  background: transparent !important;
  background-image: none !important;
}

.ambient-glow {
  opacity: 0.35;
}

.home-hero {
  background: linear-gradient(160deg, #3a1f16 0%, #2a1813 60%, #1f120f 100%);
}

.video-frame,
.live-main,
.auth-page {
  background: radial-gradient(circle at 25% 20%, #4a2a1e, #261712);
}

.video-overlay,
.prep-upload-remove {
  color: #fff5ed;
}

/* Match base `styles.css` mobile lock (flat --bg + !important). */
@media only screen and (max-device-width: 1024px) {
  html,
  body[data-role-page="buyer"] {
    background-image: linear-gradient(
      180deg,
      var(--dark-bg-gradient-from) 0%,
      var(--dark-bg-gradient-to) 100%
    ) !important;
    background-attachment: fixed !important;
    background-color: var(--dark-bg-gradient-to) !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
  }

  body[data-role-page="buyer"] .app-shell,
  body[data-role-page="buyer"] .buyer-shell {
    background: transparent !important;
    background-image: none !important;
  }
}