/* =======================================================
   darkmode.css
   Theme token overrides only
   ======================================================= */

body.dark-mode,
html.dark-mode body {
  --bg-page: #080808;
  --bg-surface: #131313;
  --bg-soft: #191919;

  --text-strong: #f5f6f8;
  --text-muted: #c4c6cb;

  --border-soft: #323232;
  --shadow-soft: 0 18px 38px rgba(0, 0, 0, 0.5);

  --accent-primary: #f08c32;
  --accent-primary-strong: #ffc181;
  --accent-warm: #ff9c47;

  color-scheme: dark;
}

body.dark-mode,
html.dark-mode body {
  background:
    radial-gradient(circle at 12% -10%, rgba(103, 184, 243, 0.2), transparent 42%),
    radial-gradient(circle at 94% 6%, rgba(255, 184, 112, 0.12), transparent 36%),
    radial-gradient(circle at 50% 126%, rgba(103, 184, 243, 0.08), transparent 44%),
    var(--bg-page);
}

body.dark-mode #ambientAudioOrbs::before,
html.dark-mode body #ambientAudioOrbs::before {
  background:
    radial-gradient(circle at 14% 16%, rgba(36, 87, 160, 0.32), transparent 48%),
    radial-gradient(circle at 84% 22%, rgba(21, 138, 126, 0.28), transparent 44%),
    radial-gradient(circle at 48% 88%, rgba(20, 73, 137, 0.24), transparent 50%);
  opacity: 0.92;
}

body.dark-mode #ambientAudioOrbs::after,
html.dark-mode body #ambientAudioOrbs::after {
  background: radial-gradient(circle at 52% 44%, transparent 26%, rgba(2, 9, 18, 0.28) 100%);
  opacity: 0.95;
}

body.dark-mode .ambient-audio-orb,
html.dark-mode body .ambient-audio-orb {
  filter: blur(24px) saturate(138%);
  background:
    radial-gradient(
      circle at 34% 30%,
      hsla(calc(var(--orb-hue, 194) + 12), 92%, 70%, 0.56) 0%,
      hsla(var(--orb-hue, 194), 90%, 48%, 0.38) 34%,
      hsla(calc(var(--orb-hue, 194) - 34), 88%, 28%, 0.28) 62%,
      transparent 76%
    );
  box-shadow:
    0 0 88px hsla(var(--orb-hue, 194), 96%, 52%, 0.34),
    0 0 154px hsla(calc(var(--orb-hue, 194) - 18), 94%, 38%, 0.2);
}

body.dark-mode .navbar,
html.dark-mode .navbar {
  border-bottom-color: rgba(181, 208, 227, 0.2);
}

body.dark-mode .site-footer,
html.dark-mode .site-footer {
  background:
    linear-gradient(180deg, rgba(19, 19, 19, 0.98), rgba(12, 12, 12, 0.98)),
    #0f0f0f;
  border-top-color: rgba(119, 192, 244, 0.2);
}

body.dark-mode .site-footer p,
html.dark-mode .site-footer p {
  color: var(--text-muted);
}

body.dark-mode .modal-content,
html.dark-mode .modal-content {
  background: linear-gradient(180deg, rgba(14, 30, 46, 0.72), rgba(9, 24, 38, 0.64));
  border-color: rgba(168, 208, 236, 0.38);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px) saturate(138%);
  -webkit-backdrop-filter: blur(18px) saturate(138%);
}

body.dark-mode .close-button,
html.dark-mode .close-button {
  background: linear-gradient(145deg, rgba(34, 64, 90, 0.7), rgba(20, 42, 65, 0.62));
  border-color: rgba(167, 206, 235, 0.4);
  color: #dff1ff;
}

body.dark-mode .upload-droparea,
html.dark-mode .upload-droparea {
  background: var(--bg-soft);
  border-color: var(--border-soft);
}

body.dark-mode .upload-droparea.highlight,
html.dark-mode .upload-droparea.highlight {
  background: #15263b;
}

body.dark-mode .sidebar,
html.dark-mode .sidebar {
  background:
    radial-gradient(circle at 86% -16%, rgba(123, 198, 255, 0.22), transparent 46%),
    linear-gradient(160deg, rgba(7, 19, 32, 0.72) 0%, rgba(8, 24, 38, 0.62) 54%, rgba(7, 18, 30, 0.58) 100%);
  border-color: rgba(170, 212, 241, 0.38);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

body.dark-mode .sidebar-header,
html.dark-mode .sidebar-header,
body.dark-mode .sidebar-actions,
html.dark-mode .sidebar-actions {
  background: linear-gradient(180deg, rgba(123, 198, 255, 0.16), rgba(123, 198, 255, 0.04));
}

body.dark-mode .sidebar-header #noteTitle,
html.dark-mode .sidebar-header #noteTitle,
body.dark-mode .sidebar-content #userInput,
html.dark-mode .sidebar-content #userInput {
  background: rgba(123, 198, 255, 0.14);
  border-color: rgba(168, 208, 236, 0.34);
  color: #e7f4ff;
}

body.dark-mode input,
html.dark-mode body input,
body.dark-mode select,
html.dark-mode body select,
body.dark-mode textarea,
html.dark-mode body textarea {
  background: rgba(13, 26, 40, 0.76);
  border-color: rgba(111, 157, 192, 0.38);
  color: #f1f7ff;
}

body.dark-mode input::placeholder,
html.dark-mode body input::placeholder,
body.dark-mode textarea::placeholder,
html.dark-mode body textarea::placeholder {
  color: rgba(189, 211, 231, 0.78);
}

body.dark-mode,
html.dark-mode body,
body.dark-mode .main-content,
html.dark-mode .main-content {
  color: var(--text-strong);
}