html.dark {
  --color-primary: #6ee7b7;
  --color-primary-foreground: #0b1120;
  --color-secondary: #fbbf24;
  --color-secondary-foreground: #0f172a;
  --color-surface: rgba(15, 23, 42, 0.9);
  --color-surface-muted: rgba(15, 23, 42, 0.7);
  --color-border: rgba(148, 163, 184, 0.18);
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  background: radial-gradient(circle at top left, rgba(45, 212, 191, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
  color-scheme: dark;
}

html.dark body {
  background: transparent;
}

html.dark .card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.5);
}

html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark textarea,
html.dark select {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: var(--color-text);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgba(148, 163, 184, 0.6);
}

html.dark .page-footer {
  color: rgba(148, 163, 184, 0.8);
}

html.dark .theme-toggle {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(148, 163, 184, 0.3);
}

html.dark .social-btn {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(148, 163, 184, 0.24);
  color: var(--color-text);
}

html.dark .divider::before,
html.dark .divider::after {
  background: rgba(148, 163, 184, 0.28);
}

html.dark .auth-link {
  color: var(--color-primary);
}