/* ── Ziva Design Tokens ── Dark (default) & Light themes ── */

:root {
  --bg-primary: #0B0E11;
  --bg-secondary: #12161B;
  --bg-card: #181D24;
  --bg-card-hover: #1E242C;
  --bg-elevated: #222930;
  --border: #2A3240;
  --border-subtle: #1E2530;
  --text-primary: #E8ECF1;
  --text-secondary: #8A95A5;
  --text-muted: #586374;
  --accent: #3ECFA0;
  --accent-dim: rgba(62, 207, 160, 0.12);
  --accent-glow: rgba(62, 207, 160, 0.25);
  --warning: #F5A623;
  --warning-dim: rgba(245, 166, 35, 0.12);
  --danger: #E85D5D;
  --danger-dim: rgba(232, 93, 93, 0.12);
  --blue: #5B9CF5;
  --blue-dim: rgba(91, 156, 245, 0.12);
  --purple: #A87EF5;
  --purple-dim: rgba(168, 126, 245, 0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px var(--border-subtle);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.4);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --overlay-bg: rgba(0,0,0,0.6);
  --topbar-bg: rgba(11,14,17,0.82);
}

[data-theme="light"] {
  --bg-primary: #F5F6F8;
  --bg-secondary: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F0F1F3;
  --bg-elevated: #E8EAED;
  --border: #D1D5DB;
  --border-subtle: #E5E7EB;
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;
  --accent: #0D9668;
  --accent-dim: rgba(13, 150, 104, 0.10);
  --accent-glow: rgba(13, 150, 104, 0.15);
  --warning: #D97706;
  --warning-dim: rgba(217, 119, 6, 0.10);
  --danger: #DC2626;
  --danger-dim: rgba(220, 38, 38, 0.10);
  --blue: #2563EB;
  --blue-dim: rgba(37, 99, 235, 0.10);
  --purple: #7C3AED;
  --purple-dim: rgba(124, 58, 237, 0.10);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px var(--border-subtle);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.1);
  --overlay-bg: rgba(0,0,0,0.3);
  --topbar-bg: rgba(255,255,255,0.85);
}

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.theme-toggle:hover {
  border-color: var(--border);
  color: var(--text-primary);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
  width: 18px;
  height: 18px;
}

/* In dark mode show sun (to switch to light), in light mode show moon (to switch to dark) */
:root .theme-toggle .icon-sun { display: block; }
:root .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* Smooth transition for theme changes */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}