/* Themes CSS - Custom properties per theme */

:root {
  --bg-page: #0b0f19;
  --card-bg: #1e293b;
  --card-border: #334155;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --btn-bg: #252f44;
  --btn-text: #ffffff;
  --btn-border: #334155;
  --btn-primary-bg: #6366f1;
  --btn-primary-text: #ffffff;
}

/* 1. Modern Dark (Default) */
[data-theme="modern-dark"] {
  --bg-page: #0b0f19;
  --card-bg: #1e293b;
  --card-border: #334155;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --btn-bg: #252f44;
  --btn-text: #ffffff;
  --btn-border: #334155;
  --btn-primary-bg: #6366f1;
  --btn-primary-text: #ffffff;
}

/* 2. Clean Light */
[data-theme="clean-light"] {
  --bg-page: #f8fafc;
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --btn-bg: #f1f5f9;
  --btn-text: #1e293b;
  --btn-border: #e2e8f0;
  --btn-primary-bg: #2563eb;
  --btn-primary-text: #ffffff;
}

/* 3. Ocean Blue */
[data-theme="ocean-blue"] {
  --bg-page: linear-gradient(135deg, #091726 0%, #032b4d 100%);
  --card-bg: rgba(14, 38, 64, 0.9);
  --card-border: rgba(6, 182, 212, 0.35);
  --text-main: #ffffff;
  --text-muted: #93c5fd;
  --accent: #06b6d4;
  --accent-hover: #0891b2;
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-text: #ffffff;
  --btn-border: rgba(6, 182, 212, 0.25);
  --btn-primary-bg: #06b6d4;
  --btn-primary-text: #082f49;
}

/* 4. Emerald Forest */
[data-theme="emerald-forest"] {
  --bg-page: linear-gradient(135deg, #051e15 0%, #0b3b2a 100%);
  --card-bg: rgba(11, 48, 35, 0.9);
  --card-border: rgba(16, 185, 129, 0.35);
  --text-main: #ecfdf5;
  --text-muted: #6ee7b7;
  --accent: #10b981;
  --accent-hover: #059669;
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-text: #ecfdf5;
  --btn-border: rgba(16, 185, 129, 0.25);
  --btn-primary-bg: #10b981;
  --btn-primary-text: #022c22;
}

/* 5. Sunset Amber */
[data-theme="sunset-amber"] {
  --bg-page: linear-gradient(135deg, #240d05 0%, #3e1605 100%);
  --card-bg: rgba(62, 22, 5, 0.9);
  --card-border: rgba(245, 158, 11, 0.35);
  --text-main: #fffbeb;
  --text-muted: #fde68a;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-text: #fffbeb;
  --btn-border: rgba(245, 158, 11, 0.25);
  --btn-primary-bg: #f59e0b;
  --btn-primary-text: #451a03;
}

/* 6. Midnight Purple */
[data-theme="midnight-purple"] {
  --bg-page: linear-gradient(135deg, #130720 0%, #240b49 100%);
  --card-bg: rgba(36, 11, 73, 0.9);
  --card-border: rgba(168, 85, 247, 0.35);
  --text-main: #faf5ff;
  --text-muted: #d8b4fe;
  --accent: #a855f7;
  --accent-hover: #9333ea;
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-text: #faf5ff;
  --btn-border: rgba(168, 85, 247, 0.25);
  --btn-primary-bg: #a855f7;
  --btn-primary-text: #ffffff;
}

/* 7. Cyber Neon */
[data-theme="cyber-neon"] {
  --bg-page: #000000;
  --card-bg: #0d0d0d;
  --card-border: #22c55e;
  --text-main: #f0fdf4;
  --text-muted: #86efac;
  --accent: #22c55e;
  --accent-hover: #16a34a;
  --btn-bg: #141414;
  --btn-text: #22c55e;
  --btn-border: #22c55e;
  --btn-primary-bg: #22c55e;
  --btn-primary-text: #000000;
}

/* 8. Rose Pastel */
[data-theme="rose-pastel"] {
  --bg-page: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  --card-bg: #ffffff;
  --card-border: #fecdd3;
  --text-main: #881337;
  --text-muted: #9f1239;
  --accent: #f43f5e;
  --accent-hover: #e11d48;
  --btn-bg: #fff1f2;
  --btn-text: #881337;
  --btn-border: #fecdd3;
  --btn-primary-bg: #f43f5e;
  --btn-primary-text: #ffffff;
}

/* Universal Theme Utility Classes */
.theme-bg-page {
  background: var(--bg-page);
  min-height: 100vh;
}

.theme-card {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: var(--text-main);
}

.theme-text-main {
  color: var(--text-main);
}

.theme-text-muted {
  color: var(--text-muted);
}

.theme-accent {
  color: var(--accent);
}

.theme-btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  transition: all 0.2s ease-in-out;
}

.theme-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.theme-btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  transition: all 0.2s ease-in-out;
}

.theme-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Markdown typography styling */
.markdown-content {
  color: var(--text-main);
  line-height: 1.6;
}

.markdown-content h1, .markdown-content h2, .markdown-content h3 {
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.markdown-content h1 { font-size: 1.25rem; }
.markdown-content h2 { font-size: 1.15rem; }
.markdown-content h3 { font-size: 1.05rem; }

.markdown-content p {
  margin-bottom: 0.75rem;
}

.markdown-content ul {
  list-style-type: disc;
  margin-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.markdown-content ol {
  list-style-type: decimal;
  margin-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.markdown-content a {
  color: var(--accent);
  text-decoration: underline;
}

.markdown-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 0.75rem;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.markdown-content code {
  background: rgba(0, 0, 0, 0.2);
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
  font-family: monospace;
}