/* ============================================================
   ZIPPLYST – Dark Mode v2
   ============================================================ */

body.dark-mode {
  --color-bg:            #0d0f17;
  --color-surface:       #13161f;
  --color-surface-raised:#1a1d28;
  --color-border:        #252838;
  --color-border-strong: #2e3246;

  --color-text:          #e8eaf0;
  --color-text-muted:    #7b7fa0;
  --color-text-subtle:   #4e5270;

  --color-brand-light:   rgba(99, 102, 241, 0.12);
  --color-brand-border:  rgba(129, 140, 248, 0.3);

  --color-success-bg:    rgba(16, 185, 129, 0.10);
  --color-success-border: rgba(52, 211, 153, 0.3);

  --color-danger-bg:     rgba(239, 68, 68, 0.10);
  --color-danger-border: rgba(239, 68, 68, 0.3);
}

/* Nav */
body.dark-mode .site-nav {
  background: rgba(13, 15, 23, 0.88);
  border-color: var(--color-border);
}

body.dark-mode .nav-logo__name { color: var(--color-text); }

body.dark-mode .nav-links a:hover {
  background: rgba(255,255,255,0.06);
  color: var(--color-text);
}

body.dark-mode .btn-theme {
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}
body.dark-mode .btn-theme:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

/* Inputs */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
  background: #0a0c14;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: var(--color-text-subtle); }
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  background: #0d0f17;
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
}
body.dark-mode select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234e5270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Cards */
body.dark-mode .card { background: var(--color-surface); border-color: var(--color-border); }
body.dark-mode .auth-card { background: var(--color-surface); border-color: var(--color-border); }
body.dark-mode .dash-card { background: var(--color-surface); border-color: var(--color-border); }
body.dark-mode .dash-card:hover { border-color: var(--indigo-700); }
body.dark-mode .dash-stats { background: var(--color-surface); border-color: var(--color-border); }
body.dark-mode .dash-card-icon { background: var(--color-brand-light); }
body.dark-mode .note-card { background: var(--color-surface); border-color: var(--color-border); }
body.dark-mode .note-card:hover { border-color: var(--indigo-700); }
body.dark-mode .empty-state { background: var(--color-surface); border-color: var(--color-border-strong); }

/* Hero chips */
body.dark-mode .hero-chip {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

body.dark-mode .hero-badge {
  background: var(--color-brand-light);
  border-color: var(--color-brand-border);
  color: var(--indigo-300);
}

/* Buttons */
body.dark-mode .btn-secondary {
  background: rgba(255,255,255,0.05);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
body.dark-mode .btn-secondary:hover {
  background: rgba(255,255,255,0.09);
}

/* Footer */
body.dark-mode .site-footer {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Tab bar */
body.dark-mode .tab-bar { border-color: var(--color-border); }
body.dark-mode .tab-btn:hover { background: rgba(255,255,255,0.04); color: var(--color-text); }

/* Premium block */
body.dark-mode fieldset.premium-block {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.25);
}