:root,
:root[data-companion-theme="night"] {
  color-scheme: dark;
  --theme-name: "purple-moon-night";
  --theme-mode: night;
  --theme-font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  --theme-color-text: #f5f3ff;
  --theme-color-text-muted: rgba(245, 243, 255, .72);
  --theme-color-primary: #a78bfa;
  --theme-color-primary-strong: #8b5cf6;
  --theme-color-primary-bright: #c4b5fd;
  --theme-color-surface: #14141b;
  --theme-color-surface-soft: #181822;
  --theme-color-border: rgba(196, 181, 253, .12);
  --theme-color-focus: rgba(167, 139, 250, .38);
  --theme-color-danger: #e6a6b4;
  --theme-shadow: 0 22px 60px rgba(0, 0, 0, .38);
  --theme-background-image: none;
  --theme-background-position: center;
  --theme-background-size: cover;
  --theme-background-overlay: rgba(5, 5, 8, .7);
  --theme-background-blur: 0px;
  --theme-background:
    linear-gradient(var(--theme-background-overlay), var(--theme-background-overlay)),
    var(--theme-background-image),
    radial-gradient(circle at 12% 4%, rgba(139, 92, 246, .09) 0, transparent 26%),
    radial-gradient(circle at 92% 23%, rgba(167, 139, 250, .07) 0, transparent 24%),
    linear-gradient(180deg, #0d0d12, #09090d 72%);
}

:root[data-companion-theme="day"] {
  color-scheme: light;
  --theme-name: "purple-moon-day";
  --theme-mode: day;
  --theme-color-text: #34303a;
  --theme-color-text-muted: #817b88;
  --theme-color-primary: #765f9f;
  --theme-color-primary-strong: #594477;
  --theme-color-surface: rgba(255, 255, 255, .88);
  --theme-color-surface-soft: rgba(242, 235, 247, .78);
  --theme-color-border: rgba(103, 78, 119, .13);
  --theme-color-focus: rgba(146, 120, 165, .22);
  --theme-color-danger: #9b6470;
  --theme-shadow: 0 18px 50px rgba(71, 52, 84, .09);
  --theme-background-overlay: rgba(255, 252, 255, .3);
  --theme-background:
    linear-gradient(var(--theme-background-overlay), var(--theme-background-overlay)),
    var(--theme-background-image),
    radial-gradient(circle at 12% 3%, #ede4f4 0, transparent 30%),
    radial-gradient(circle at 92% 24%, #f2e9ef 0, transparent 25%),
    linear-gradient(180deg, #fcfafc, #f4f0f5);
}

.companion-themed-surface {
  color: var(--theme-color-text);
  background: var(--theme-color-surface);
  border: 1px solid var(--theme-color-border);
  box-shadow: var(--theme-shadow);
  font-family: var(--theme-font-family);
}

.companion-themed-page {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--theme-color-text);
  background-color: #09090d;
  background-image: var(--theme-background);
  background-position: var(--theme-background-position);
  background-size: var(--theme-background-size);
  background-attachment: fixed;
  font-family: var(--theme-font-family);
}

@media (prefers-reduced-motion: reduce) {
  .companion-themed-page *,
  .companion-themed-page *::before,
  .companion-themed-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}