/* Dark Mode */
[data-theme="dark"] {
  --ink: #F8FAFC;
  --slate: #CBD5E1;
  --surface: #1E293B;
}

[data-theme="dark"] body {
  background-color: #0F172A;
  color: var(--ink);
}

[data-theme="dark"] .nav {
  background: rgba(15, 23, 42, 0.95);
  border-bottom-color: rgba(248, 250, 252, 0.1);
}

[data-theme="dark"] .tr-card {
  background: var(--surface);
  border: 1px solid rgba(248, 250, 252, 0.1);
}

[data-theme="dark"] .tr-button-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: rgba(248, 250, 252, 0.2);
}

[data-theme="dark"] .tr-button-secondary:hover {
  background: rgba(248, 250, 252, 0.1);
  border-color: var(--primary);
}

[data-theme="dark"] .demo-bubble {
  background: rgba(248, 250, 252, 0.05);
}

[data-theme="dark"] .demo-bubble::before {
  border-top-color: rgba(248, 250, 252, 0.05);
}

[data-theme="dark"] .task-item:hover {
  background: rgba(248, 250, 252, 0.05);
}

[data-theme="dark"] .dashboard-mock {
  background: var(--surface);
  border: 1px solid rgba(248, 250, 252, 0.1);
}

[data-theme="dark"] .dashboard-sidebar,
[data-theme="dark"] .dashboard-sidebar-right {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(248, 250, 252, 0.1);
}

[data-theme="dark"] .sidebar-item:hover {
  background: rgba(248, 250, 252, 0.1);
}

[data-theme="dark"] .tr-task-item {
  background: rgba(248, 250, 252, 0.05);
}

[data-theme="dark"] .tr-task-item:hover {
  background: rgba(76, 111, 255, 0.1);
}

[data-theme="dark"] .progress-bar {
  background: rgba(248, 250, 252, 0.1);
}

[data-theme="dark"] .faq-item {
  border-bottom-color: rgba(248, 250, 252, 0.1);
}

[data-theme="dark"] .footer {
  background: #020617;
}

[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(248, 250, 252, 0.1);
}

/* Theme transition */
* {
  transition: background-color var(--transition-base), 
              border-color var(--transition-base),
              color var(--transition-base);
}