/* ==========================================================================
   Perfect Match — Dark mode overrides
   Scoped under :root[data-theme="dark"] (set by public/js/theme.js).
   Redefines the exact custom properties declared in style.css's :root block
   — same names, dark-tuned values. Deep near-black violet backgrounds
   (never pure #000) with the brand violet/pink gradient brightened just
   enough to keep popping against the darker surfaces.

   Intentionally NOT overridden here: --radius-sm/md/lg/pill, --font,
   --header-h — these are structural/typographic tokens, not
   color/theme tokens, so light and dark share the same values.
   ========================================================================== */

:root[data-theme="dark"] {
  /* Brand accents — brightened slightly so they still glow on dark surfaces */
  --violet: #8577f5;
  --violet-dark: #b3a4ff;
  --pink: #ff8fc0;
  --pink-dark: #ff9fcb;

  --gradient: linear-gradient(135deg, #7a68f0 0%, #b07be0 50%, #ff8fc0 100%);
  --gradient-hover: linear-gradient(135deg, #8b7bff 0%, #c08eea 50%, #ffa3cf 100%);
  --gradient-soft: linear-gradient(135deg, rgba(133, 119, 245, 0.18), rgba(255, 143, 192, 0.16));

  /* Deep near-black violet backgrounds, not pure black */
  --bg: #100e1a;
  --bg-alt: #161320;
  --surface: rgba(38, 34, 58, 0.6);
  --surface-strong: rgba(46, 41, 68, 0.82);
  --surface-solid: #1c1929;
  --border-glass: rgba(255, 255, 255, 0.09);

  --text: #f2eefc;
  --text-muted: #b7b0d6;
  --text-faint: #8983a8;

  --success: #2ed9a3;
  --success-bg: rgba(46, 217, 163, 0.14);
  --danger: #ff6b5e;
  --danger-bg: rgba(255, 107, 94, 0.14);
  --warning: #f0b93d;
  --warning-bg: rgba(240, 185, 61, 0.16);

  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 34px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 8px 28px rgba(255, 143, 192, 0.3);
}

/* The shared ambient background blobs (body::before/::after in style.css)
   use hard-coded hex colors rather than the custom properties above, so we
   dim/retint them here to keep the glow subtle instead of blinding on a
   near-black page. Selectors/structure intentionally mirror style.css —
   only color + opacity change. */
:root[data-theme="dark"] body::before {
  background: radial-gradient(circle at 30% 30%, #5b4fa8, #b34e83 70%);
  opacity: 0.35;
}
:root[data-theme="dark"] body::after {
  background: radial-gradient(circle at 60% 60%, #4a3f8f, #7a4a68 75%);
  opacity: 0.28;
}

/* Form fields and other elements that hard-code a light background in
   style.css (rgba(255,255,255,...) literals rather than var(--surface))
   need a matching dark-mode pass so inputs don't stay bright white. */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

:root[data-theme="dark"] .site-header {
  background: rgba(16, 14, 26, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

:root[data-theme="dark"] .nav-user {
  background: rgba(133, 119, 245, 0.16);
}