/**
 * Secronyx Theme System
 * CSS custom properties for consistent theming across all pages
 */

/* Light mode (default) */
:root {
  --bg-body: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-surface-secondary: #e2e8f0;
  --bg-surface-tertiary: #cbd5e1;
  --bg-hover: rgba(0, 0, 0, 0.08);
  --bg-input: #ffffff;
  --bg-message-user: #059669;
  --bg-message-assistant: #ffffff;
  --bg-code: rgba(0, 0, 0, 0.06);
  --bg-code-block: #1e293b;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  --border: #94a3b8;
  --border-subtle: #cbd5e1;
  --icon-default: #475569;
  --icon-hover: #0f172a;
}

/* Dark mode */
.dark {
  --bg-body: #0a0d14;
  --bg-surface: #0f1219;
  --bg-surface-secondary: rgba(30, 41, 59, 0.5);
  --bg-surface-tertiary: #1a1f2e;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-input: rgba(30, 41, 59, 0.5);
  --bg-message-user: #059669;
  --bg-message-assistant: rgba(30, 41, 59, 0.5);
  --bg-code: rgba(0, 0, 0, 0.2);
  --bg-code-block: rgba(0, 0, 0, 0.3);
  --text-primary: #f8fafc;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.4);
  --text-inverse: #0f172a;
  --border: rgba(255, 255, 255, 0.05);
  --border-subtle: rgba(255, 255, 255, 0.03);
  --icon-default: rgba(255, 255, 255, 0.5);
  --icon-hover: #ffffff;
}

/* Base styles using variables */
body {
  background: var(--bg-body);
  color: var(--text-primary);
}

/* Theme utility classes */
.theme-surface { background: var(--bg-surface); }
.theme-surface-secondary { background: var(--bg-surface-secondary); }
.theme-surface-tertiary { background: var(--bg-surface-tertiary); }
.theme-border { border-color: var(--border); }
.theme-border-subtle { border-color: var(--border-subtle); }
.theme-text { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-muted { color: var(--text-muted); }
.theme-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.theme-input::placeholder { color: var(--text-muted); }
.dark .theme-input { box-shadow: none; }
.theme-hover:hover { background: var(--bg-hover); }
.theme-icon { color: var(--icon-default); }
.theme-icon:hover { color: var(--icon-hover); }

/* Dropdown styles */
.theme-dropdown {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.theme-dropdown-item:hover { background: var(--bg-hover); }
.theme-dropdown-divider { border-color: var(--border); }

/* Message bubbles */
.theme-message-assistant {
  background: var(--bg-message-assistant);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.theme-message-user { background: var(--bg-message-user); }
.dark .theme-message-assistant {
  box-shadow: none;
  border-color: var(--border-subtle);
}

/* Card styles */
.theme-card {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.theme-card:hover {
  background: var(--bg-surface-secondary);
  border-color: rgba(16, 185, 129, 0.4);
}
.dark .theme-card {
  background: var(--bg-surface-secondary);
  border-color: var(--border-subtle);
  box-shadow: none;
}
.dark .theme-card:hover { background: var(--bg-surface-tertiary); }

/* Button styles */
.theme-btn-primary {
  background: #059669;
  color: white;
}
.theme-btn-primary:hover { background: #047857; }

.theme-btn-secondary {
  background: var(--bg-surface-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.theme-btn-secondary:hover {
  background: var(--bg-surface-tertiary);
  color: var(--text-primary);
}

/* Tab styles */
.theme-tab {
  color: var(--text-muted);
  border-color: transparent;
}
.theme-tab:hover {
  color: var(--text-secondary);
  border-color: var(--border);
}
.theme-tab.active {
  color: rgb(192, 132, 252);
  border-color: rgb(168, 85, 247);
}

/* Animation keyframes */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.animate-spin { animation: spin 1s linear infinite; }
.typing-dot { animation: typing 1.4s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }