/* ============================================================
   WoxomQuote Theme System
   Mirrors dashboard themes (sales-dashboard/src/index.css)
   5 themes: Tokyo Night (default), Vaporwave, Beach, Dark Vaporwave, Cyberpunk
   ============================================================ */

/* --- Tokyo Night (default) --- */
:root,
[data-theme="tokyo"] {
  --th-bg: #1a1b26;
  --th-bg-dark: #16161e;
  --th-bg-highlight: #292e42;
  --th-bg-menu: #1f2335;
  --th-terminal-black: #414868;
  --th-terminal-red: #f7768e;
  --th-terminal-green: #9ece6a;
  --th-terminal-yellow: #e0af68;
  --th-terminal-blue: #7aa2f7;
  --th-terminal-magenta: #bb9af7;
  --th-terminal-cyan: #7dcfff;
  --th-terminal-white: #c0caf5;
  --th-fg: #c0caf5;
  --th-fg-dark: #a9b1d6;
  --th-fg-gutter: #3b4261;
  --th-comment: #565f89;
  --th-dark3: #545c7e;
  --th-dark5: #737aa2;
  --th-blue0: #3d59a1;
  --th-blue1: #2ac3de;
  --th-blue5: #89ddff;
  --th-blue7: #394b70;
  --th-purple: #9d7cd8;
  --th-orange: #ff9e64;
  /* Semantic aliases */
  --th-primary: #7aa2f7;
  --th-primary-hover: #3d59a1;
  --th-success: #9ece6a;
  --th-error: #f7768e;
  --th-warning: #e0af68;
  --th-input-bg: #16161e;
  --th-input-border: #292e42;
  --th-card-bg: #1f2335;
  --th-border: #292e42;
  --th-overlay: rgba(0, 0, 0, 0.6);
  --th-shadow: rgba(0, 0, 0, 0.3);
  --th-focus-ring: rgba(122, 162, 247, 0.3);
  --th-success-bg: rgba(158, 206, 106, 0.15);
  --th-error-bg: rgba(247, 118, 142, 0.15);
  --th-warning-bg: rgba(224, 175, 104, 0.15);
  --th-info-bg: rgba(122, 162, 247, 0.15);
}

/* --- Vaporwave (light) --- */
[data-theme="vapor"] {
  --th-bg: #faf8ff;
  --th-bg-dark: #f0eaf8;
  --th-bg-highlight: #e8dff5;
  --th-bg-menu: #ffffff;
  --th-terminal-black: #8070a8;
  --th-terminal-red: #e03070;
  --th-terminal-green: #10a870;
  --th-terminal-yellow: #c89000;
  --th-terminal-blue: #5b2ee5;
  --th-terminal-magenta: #d830a0;
  --th-terminal-cyan: #0098c8;
  --th-terminal-white: #1a0a2e;
  --th-fg: #1a0a2e;
  --th-fg-dark: #352357;
  --th-fg-gutter: #d0c8e0;
  --th-comment: #6858a0;
  --th-dark3: #7a6aaa;
  --th-dark5: #9888c8;
  --th-blue0: #5b2ee5;
  --th-blue1: #5b2ee5;
  --th-blue5: #ede5ff;
  --th-blue7: #d8cef0;
  --th-purple: #5b2ee5;
  --th-orange: #e07820;
  --th-primary: #5b2ee5;
  --th-primary-hover: #4a22d0;
  --th-success: #10a870;
  --th-error: #e03070;
  --th-warning: #c89000;
  --th-input-bg: #ffffff;
  --th-input-border: #d8cef0;
  --th-card-bg: #ffffff;
  --th-border: #e8dff5;
  --th-overlay: rgba(26, 10, 46, 0.5);
  --th-shadow: rgba(91, 46, 229, 0.1);
  --th-focus-ring: rgba(91, 46, 229, 0.3);
  --th-success-bg: rgba(16, 168, 112, 0.1);
  --th-error-bg: rgba(224, 48, 112, 0.1);
  --th-warning-bg: rgba(200, 144, 0, 0.1);
  --th-info-bg: rgba(91, 46, 229, 0.1);
}

/* --- Beach (light) --- */
[data-theme="beach"] {
  --th-bg: #fff8e7;
  --th-bg-dark: #f5e6d3;
  --th-bg-highlight: #ffe4c4;
  --th-bg-menu: #faebd7;
  --th-terminal-black: #8b7355;
  --th-terminal-red: #ff6b6b;
  --th-terminal-green: #2ecc71;
  --th-terminal-yellow: #ffd93d;
  --th-terminal-blue: #0077b6;
  --th-terminal-magenta: #e056fd;
  --th-terminal-cyan: #00ced1;
  --th-terminal-white: #2c3e50;
  --th-fg: #2c3e50;
  --th-fg-dark: #34495e;
  --th-fg-gutter: #b8a088;
  --th-comment: #7f8c8d;
  --th-dark3: #5d6d7e;
  --th-dark5: #85929e;
  --th-blue0: #0077b6;
  --th-blue1: #00b4d8;
  --th-blue5: #90e0ef;
  --th-blue7: #023e8a;
  --th-purple: #9b59b6;
  --th-orange: #ff9f43;
  --th-primary: #0077b6;
  --th-primary-hover: #023e8a;
  --th-success: #2ecc71;
  --th-error: #ff6b6b;
  --th-warning: #ffd93d;
  --th-input-bg: #faebd7;
  --th-input-border: #ffe4c4;
  --th-card-bg: #faebd7;
  --th-border: #ffe4c4;
  --th-overlay: rgba(44, 62, 80, 0.5);
  --th-shadow: rgba(0, 119, 182, 0.1);
  --th-focus-ring: rgba(0, 119, 182, 0.3);
  --th-success-bg: rgba(46, 204, 113, 0.15);
  --th-error-bg: rgba(255, 107, 107, 0.15);
  --th-warning-bg: rgba(255, 217, 61, 0.15);
  --th-info-bg: rgba(0, 119, 182, 0.1);
}

/* --- Dark Vaporwave --- */
[data-theme="vapor-dark"] {
  --th-bg: #1a0a2e;
  --th-bg-dark: #120520;
  --th-bg-highlight: #2a1548;
  --th-bg-menu: #1f0d38;
  --th-terminal-black: #4a3a6e;
  --th-terminal-red: #ff6e9c;
  --th-terminal-green: #72f1b8;
  --th-terminal-yellow: #f3e877;
  --th-terminal-blue: #01cdfe;
  --th-terminal-magenta: #ff71ce;
  --th-terminal-cyan: #76e3ff;
  --th-terminal-white: #e0d0ff;
  --th-fg: #e0d0ff;
  --th-fg-dark: #c0b0e0;
  --th-fg-gutter: #3d2d5e;
  --th-comment: #8878b8;
  --th-dark3: #7a6aaa;
  --th-dark5: #9888c8;
  --th-blue0: #5b3e9e;
  --th-blue1: #01cdfe;
  --th-blue5: #76e3ff;
  --th-blue7: #3a2068;
  --th-purple: #b388ff;
  --th-orange: #ffa44f;
  --th-primary: #01cdfe;
  --th-primary-hover: #5b3e9e;
  --th-success: #72f1b8;
  --th-error: #ff6e9c;
  --th-warning: #f3e877;
  --th-input-bg: #120520;
  --th-input-border: #2a1548;
  --th-card-bg: #1f0d38;
  --th-border: #2a1548;
  --th-overlay: rgba(18, 5, 32, 0.7);
  --th-shadow: rgba(1, 205, 254, 0.1);
  --th-focus-ring: rgba(1, 205, 254, 0.3);
  --th-success-bg: rgba(114, 241, 184, 0.15);
  --th-error-bg: rgba(255, 110, 156, 0.15);
  --th-warning-bg: rgba(243, 232, 119, 0.15);
  --th-info-bg: rgba(1, 205, 254, 0.15);
}

/* --- Cyberpunk --- */
[data-theme="cyberpunk"] {
  --th-bg: #0a0a12;
  --th-bg-dark: #06060c;
  --th-bg-highlight: #1a1a2e;
  --th-bg-menu: #0f0f1a;
  --th-terminal-black: #3a3a5c;
  --th-terminal-red: #ff003c;
  --th-terminal-green: #00ff9f;
  --th-terminal-yellow: #fcee09;
  --th-terminal-blue: #00d4ff;
  --th-terminal-magenta: #ff2a6d;
  --th-terminal-cyan: #05d9e8;
  --th-terminal-white: #d1d1e0;
  --th-fg: #d1d1e0;
  --th-fg-dark: #a0a0b8;
  --th-fg-gutter: #2a2a44;
  --th-comment: #5a5a7a;
  --th-dark3: #6a6a8a;
  --th-dark5: #8a8aa0;
  --th-blue0: #fcee09;
  --th-blue1: #00d4ff;
  --th-blue5: #05d9e8;
  --th-blue7: #1a1a30;
  --th-purple: #bd00ff;
  --th-orange: #ff6b35;
  --th-primary: #fcee09;
  --th-primary-hover: #00d4ff;
  --th-success: #00ff9f;
  --th-error: #ff003c;
  --th-warning: #fcee09;
  --th-input-bg: #06060c;
  --th-input-border: #1a1a2e;
  --th-card-bg: #0f0f1a;
  --th-border: #1a1a2e;
  --th-overlay: rgba(6, 6, 12, 0.7);
  --th-shadow: rgba(252, 238, 9, 0.1);
  --th-focus-ring: rgba(0, 212, 255, 0.3);
  --th-success-bg: rgba(0, 255, 159, 0.15);
  --th-error-bg: rgba(255, 0, 60, 0.15);
  --th-warning-bg: rgba(252, 238, 9, 0.15);
  --th-info-bg: rgba(0, 212, 255, 0.15);
}

/* --- Global theme transition (respects reduced-motion preference) --- */
@media (prefers-reduced-motion: no-preference) {
  *,
  *::before,
  *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
}

/* Disable transitions during print */
@media print {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* Disable transitions for elements that shouldn't animate */
.spinner,
.spinner *,
.loading-spinner,
[class*="animate-"] {
  transition: none !important;
}

/* --- Theme toggle button --- */
#theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: var(--th-card-bg);
  color: var(--th-fg);
  border: 1px solid var(--th-border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--th-shadow);
  white-space: nowrap;
  line-height: 1;
}

#theme-toggle:hover {
  background: var(--th-bg-highlight);
  box-shadow: 0 4px 12px var(--th-shadow);
}

#theme-toggle:focus-visible {
  outline: 2px solid var(--th-primary);
  outline-offset: 2px;
}