:root,
html[data-theme="blue"] {
  --theme-accent: #5FC7FF;
  --theme-secondary: #3A8DFF;
  --theme-glow: #D8F3FF;
  --theme-accent-rgb: 95, 199, 255;
  --theme-secondary-rgb: 58, 141, 255;
  --theme-glow-rgb: 216, 243, 255;
  --theme-gradient: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-secondary) 55%, var(--theme-glow) 100%);
  --bg: #08090B;
  --void: var(--bg);
  --panel: #111318;
  --panel-2: #171A20;
  --cyan: var(--theme-accent);
  --violet: var(--theme-secondary);
  --magenta: var(--theme-glow);
  --accent: var(--theme-accent);
  --glow: var(--theme-glow);
  --line: rgba(var(--theme-accent-rgb), .14);
}

html[data-theme="green"] {
  --theme-accent: #63E6A8;
  --theme-secondary: #22B573;
  --theme-glow: #D6FFE9;
  --theme-accent-rgb: 99, 230, 168;
  --theme-secondary-rgb: 34, 181, 115;
  --theme-glow-rgb: 214, 255, 233;
  --cyan: var(--theme-accent);
  --violet: var(--theme-secondary);
  --magenta: var(--theme-glow);
  --accent: var(--theme-accent);
  --glow: var(--theme-glow);
  --line: rgba(var(--theme-accent-rgb), .14);
}

html[data-theme="purple"] {
  --theme-accent: #B68CFF;
  --theme-secondary: #7C4DFF;
  --theme-glow: #E8DCFF;
  --theme-accent-rgb: 182, 140, 255;
  --theme-secondary-rgb: 124, 77, 255;
  --theme-glow-rgb: 232, 220, 255;
  --cyan: var(--theme-accent);
  --violet: var(--theme-secondary);
  --magenta: var(--theme-glow);
  --accent: var(--theme-accent);
  --glow: var(--theme-glow);
  --line: rgba(var(--theme-accent-rgb), .14);
}

html[data-theme] body,
html[data-theme] body.reelspark-main {
  --rs-accent: var(--theme-accent);
  --rs-glow: var(--theme-glow);
  --rs-line: rgba(var(--theme-accent-rgb), .14);
  --rs-bg: #08090B;
  --rs-surface: #111318;
}

html[data-theme] .rs-highlight,
html[data-theme] .rs-reveal-word.rs-highlight,
html[data-theme] .rs-contact-heading em,
html[data-theme] .highlight,
html[data-theme] .grad-text,
html[data-theme] .hero__logo-num {
  background: var(--theme-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

html[data-theme] .hero__logo-num {
  filter: drop-shadow(0 0 14px rgba(var(--theme-secondary-rgb), .55)) drop-shadow(0 0 26px rgba(var(--theme-accent-rgb), .28));
}

.theme-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.theme-button {
  min-height: 32px;
  padding: .42rem .7rem;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: var(--rs-muted, var(--muted, #8A93B8));
  background: rgba(255, 255, 255, .035);
  font: 500 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}

.theme-button::before {
  content: "";
  width: .62rem;
  height: .62rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 10px var(--swatch);
}

.theme-button[data-theme-value="blue"] { --swatch: #5FC7FF; }
.theme-button[data-theme-value="green"] { --swatch: #63E6A8; }
.theme-button[data-theme-value="purple"] { --swatch: #B68CFF; }

.theme-button:hover,
.theme-button:focus-visible {
  color: #fff;
  border-color: rgba(var(--theme-accent-rgb), .45);
  background: rgba(var(--theme-accent-rgb), .1);
  transform: translateY(-1px);
  outline: none;
}

.theme-button[aria-pressed="true"] {
  color: #fff;
  border-color: rgba(var(--theme-accent-rgb), .7);
  background: rgba(var(--theme-accent-rgb), .14);
  box-shadow: 0 0 18px rgba(var(--theme-accent-rgb), .1);
}