/* Deeney Digital brand tokens (deeneydigital.com) */
:root {
  --brand-blue: #182a56;
  --brand-purple: #816abf;
  --brand-accent: #b1a3f8;
  --etsy-orange: #f1641e;
}

/* Dark — matches website default */
html[data-theme="dark"] {
  --dd-bg: #05050a;
  --dd-bg-gradient: radial-gradient(circle at 12% 8%, rgba(129, 106, 191, 0.24), transparent 34%),
    radial-gradient(circle at 84% 14%, rgba(24, 42, 86, 0.46), transparent 32%),
    linear-gradient(180deg, #090911 0%, #05050a 100%);
  --dd-orb-a: rgba(129, 106, 191, 0.18);
  --dd-orb-b: rgba(24, 42, 86, 0.42);
  --dd-panel: rgba(15, 15, 25, 0.78);
  --dd-panel-solid: rgba(10, 10, 18, 0.92);
  --dd-panel-soft: rgba(255, 255, 255, 0.055);
  --dd-border: rgba(255, 255, 255, 0.1);
  --dd-text: #ffffff;
  --dd-text-soft: #d7d5e8;
  --dd-muted: #a8a8ba;
  --dd-input-bg: rgba(255, 255, 255, 0.06);
  --dd-shadow: 0 30px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --dd-btn-primary: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
  --dd-btn-primary-shadow: 0 16px 34px rgba(129, 106, 191, 0.32);
  --dd-btn-secondary-bg: rgba(255, 255, 255, 0.055);
  --dd-chip-bg: rgba(177, 163, 248, 0.14);
  --dd-chip-active: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
  --dd-workspace-bg: rgba(5, 5, 12, 0.5);
  --dd-canvas-bg: rgba(5, 5, 12, 0.5);
  --dd-canvas-dots: rgba(177, 163, 248, 0.38);
  --dd-preview-dots: rgba(129, 106, 191, 0.28);
  --dd-title-gradient: linear-gradient(110deg, #fff 0%, var(--brand-accent) 58%, #77ddff 100%);
  --dd-scrollbar-track: rgba(24, 42, 86, 0.35);
  --dd-scrollbar-thumb: rgba(129, 106, 191, 0.65);
}

/* Light — soft studio palette */
html[data-theme="light"] {
  --dd-bg: #f3effa;
  --dd-bg-gradient: radial-gradient(circle at 10% 6%, rgba(129, 106, 191, 0.16), transparent 38%),
    radial-gradient(circle at 88% 12%, rgba(24, 42, 86, 0.08), transparent 34%),
    linear-gradient(180deg, #faf8ff 0%, #f3effa 100%);
  --dd-orb-a: rgba(129, 106, 191, 0.12);
  --dd-orb-b: rgba(24, 42, 86, 0.08);
  --dd-panel: rgba(255, 255, 255, 0.88);
  --dd-panel-solid: #ffffff;
  --dd-panel-soft: rgba(129, 106, 191, 0.08);
  --dd-border: rgba(24, 42, 86, 0.12);
  --dd-text: #182a56;
  --dd-text-soft: #3d4a6e;
  --dd-muted: #6b728e;
  --dd-input-bg: #ffffff;
  --dd-shadow: 0 18px 40px rgba(24, 42, 86, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --dd-btn-primary: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
  --dd-btn-primary-shadow: 0 12px 28px rgba(129, 106, 191, 0.28);
  --dd-btn-secondary-bg: #ffffff;
  --dd-chip-bg: rgba(129, 106, 191, 0.12);
  --dd-chip-active: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
  --dd-workspace-bg: rgba(255, 255, 255, 0.65);
  --dd-canvas-bg: rgba(255, 255, 255, 0.65);
  --dd-canvas-dots: rgba(129, 106, 191, 0.32);
  --dd-preview-dots: rgba(129, 106, 191, 0.25);
  --dd-title-gradient: linear-gradient(110deg, var(--brand-blue) 0%, var(--brand-purple) 55%, #5a8fd4 100%);
  --dd-scrollbar-track: rgba(129, 106, 191, 0.12);
  --dd-scrollbar-thumb: rgba(129, 106, 191, 0.45);
}

/* Theme toggle — SVG icons (no emoji), matches brand strokes */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 11px;
}

.theme-toggle-btn .theme-icon {
  display: none;
  flex-shrink: 0;
}

html[data-theme="dark"] .theme-toggle-btn .theme-icon-sun {
  display: block;
  color: var(--brand-accent);
}

html[data-theme="light"] .theme-toggle-btn .theme-icon-moon {
  display: block;
  color: var(--brand-purple);
}

.theme-toggle-btn:hover .theme-icon {
  color: var(--dd-text);
}

html[data-theme="dark"] .theme-toggle-btn:hover {
  border-color: rgba(177, 163, 248, 0.45);
  background: rgba(129, 106, 191, 0.14);
}

html[data-theme="light"] .theme-toggle-btn:hover {
  border-color: rgba(129, 106, 191, 0.35);
  background: rgba(129, 106, 191, 0.1);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--brand-purple);
  outline-offset: 2px;
}

/* Visible scrollbars when panels overflow */
.dd-scroll-y {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--dd-scrollbar-thumb) var(--dd-scrollbar-track);
}

.dd-scroll-y::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.dd-scroll-y::-webkit-scrollbar-track {
  background: var(--dd-scrollbar-track);
  border-radius: 8px;
}

.dd-scroll-y::-webkit-scrollbar-thumb {
  background: var(--dd-scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.dd-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--dd-scrollbar-thumb) var(--dd-scrollbar-track);
}

.dd-scroll-x::-webkit-scrollbar {
  height: 8px;
}