/* =========================================================
   ZYNDHUX THEME-DARK.CSS
   Dark Theme Layer / Visual Identity / Surfaces
   ========================================================= */


/* =========================
   BASE BACKGROUND OVERRIDES
========================= */
body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* =========================
   SURFACES
========================= */
.surface {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-soft);
}

.surface-alt {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
}

/* =========================
   TEXT HIERARCHY
========================= */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-accent {
  color: var(--color-red-500);
}

/* =========================
   LINKS (THEMED)
========================= */
a {
  color: var(--color-red-400);
  transition: all var(--transition-fast);
}

a:hover {
  color: var(--color-red-300);
  text-decoration: none;
}

/* =========================
   HEADER THEME
========================= */
.header {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-soft);
}

/* =========================
   FOOTER THEME
========================= */
.footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-soft);
}

/* =========================
   CARDS (DARK SURFACE ENHANCEMENT)
========================= */
.card {
  background: linear-gradient(
    145deg,
    var(--color-bg-secondary),
    var(--color-bg-tertiary)
  );

  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  border-color: var(--color-red-600);
  box-shadow: var(--shadow-md);
}

/* =========================
   INPUT THEME ENHANCEMENT
========================= */
input,
textarea,
select {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

/* Focus glow (brand red) */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-red-600);
  box-shadow: 0 0 0 3px rgba(149, 6, 6, 0.25);
}

/* =========================
   BUTTON ENHANCEMENTS
========================= */
.btn-primary {
  background: linear-gradient(
    135deg,
    var(--color-red-600),
    var(--color-red-700)
  );
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-secondary {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
}

/* =========================
   BADGES THEME
========================= */
.badge {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-soft);
}

.badge-success {
  background: rgba(22, 163, 74, 0.15);
  border: 1px solid rgba(22, 163, 74, 0.3);
}

.badge-error {
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

/* =========================
   MODAL THEME
========================= */
.modal {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
}

.modal-content {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-soft);
}

/* =========================
   TOAST THEME
========================= */
.toast {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-primary);
}

.toast-success {
  border-left: 4px solid var(--color-success);
}

.toast-error {
  border-left: 4px solid var(--color-error);
}

/* =========================
   STEP INDICATOR THEME
========================= */
.step-circle {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
}

.step.active .step-circle {
  background: var(--color-red-600);
  border-color: var(--color-red-600);
  box-shadow: 0 0 12px rgba(149, 6, 6, 0.4);
}

/* =========================
   FORM ENHANCEMENTS
========================= */
.form-success {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.4);
}

.form-error {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.4);
}

/* =========================
   SCROLLBAR THEME
========================= */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-red-600);
}

/* =========================
   SELECTION THEME
========================= */
::selection {
  background: var(--color-red-600);
  color: var(--color-white);
}

/* =========================
   DIVIDERS
========================= */
.divider {
  background: var(--color-border-soft);
  height: 1px;
}

/* =========================
   PANEL ENHANCEMENT
========================= */
.panel {
  background: linear-gradient(
    180deg,
    var(--color-bg-secondary),
    var(--color-bg-tertiary)
  );

  border: 1px solid var(--color-border-soft);
}

/* =========================
   GLOBAL FOCUS SYSTEM
========================= */
:focus-visible {
  outline: 2px solid var(--color-red-500);
  outline-offset: 2px;
}

/* =========================
   LOADER THEME
========================= */
.loader-spinner {
  border: 3px solid var(--color-border);
  border-top: 3px solid var(--color-red-600);
}

/* =========================
   HERO DARK OVERLAY FEEL
========================= */
.hero {
  background: radial-gradient(
    circle at top,
    rgba(149, 6, 6, 0.08),
    transparent 60%
  );
}

/* =========================
   NAV HOVER LUXURY FEEL
========================= */
.nav-item {
  position: relative;
}

.nav-item::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;

  width: 0%;
  height: 1px;

  background: var(--color-red-600);
  transition: width var(--transition-fast);
}

.nav-item:hover::after {
  width: 100%;
}