/* ═══════════════════════════════════════════════════════════════════════════
   TSWALENKI WMS — THEME SYSTEM
   Append this to main.css or load after it.
   Light theme activated by: html[data-theme="light"]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LIGHT THEME OVERRIDES ───────────────────────────────────────────────── */
html[data-theme="light"] {
  --void:       #f0ede8;
  --surface-0:  #ece8e1;
  --surface-1:  #ffffff;
  --surface-2:  #f5f2ec;
  --surface-3:  #ede9e0;
  --glass:      rgba(255,255,255,.7);
  --glass-2:    rgba(0,0,0,.05);
  --border:     rgba(0,0,0,.1);
  --border-lit: rgba(184,120,0,.5);
  --white:      #1a1410;
  --muted:      #6b6258;
  --muted-2:    #9a8e84;
  --gold:       #b87800;
  --gold-glow:  rgba(184,120,0,.25);
  --gold-dim:   rgba(184,120,0,.1);
  --success:    #1a8a52;
  --danger:     #cc2040;
  --warning:    #c87000;
  --info:       #2060cc;
  --cyan:       #0088bb;
  --cyan-glow:  rgba(0,136,187,.2);
}

html[data-theme="light"] body {
  background: var(--void);
  color: var(--white);
}

html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 60% 60% at 15% 20%, rgba(184,120,0,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(0,136,187,.05) 0%, transparent 50%);
}

html[data-theme="light"] .nav {
  background: rgba(240,237,232,.9);
  border-bottom-color: rgba(0,0,0,.1);
}

html[data-theme="light"] .sidebar {
  background: rgba(255,255,255,.95);
  border-right-color: rgba(0,0,0,.08);
}

html[data-theme="light"] .card {
  background: rgba(255,255,255,.8);
  border-color: rgba(0,0,0,.09);
}

html[data-theme="light"] .card:hover {
  border-color: rgba(184,120,0,.25);
  box-shadow: 0 20px 50px rgba(0,0,0,.12), 0 0 0 1px rgba(184,120,0,.12);
}

html[data-theme="light"] .stat-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.09);
}

html[data-theme="light"] .data-table th {
  background: rgba(0,0,0,.03);
  color: var(--muted);
}

html[data-theme="light"] .data-table td {
  border-bottom-color: rgba(0,0,0,.06);
}

html[data-theme="light"] .data-table tbody tr:hover td {
  background: rgba(184,120,0,.04);
}

html[data-theme="light"] .form-control {
  border-bottom-color: rgba(0,0,0,.2);
  color: var(--white);
  background: transparent;
}

html[data-theme="light"] .form-control:focus {
  border-bottom-color: var(--gold);
  box-shadow: 0 2px 0 rgba(184,120,0,.3);
}

html[data-theme="light"] .form-control::placeholder { color: var(--muted-2); }

html[data-theme="light"] select.form-control option { background: #fff; color: #1a1410; }

html[data-theme="light"] .sidebar-link .link-icon {
  background: rgba(0,0,0,.05);
}
html[data-theme="light"] .sidebar-link:hover .link-icon,
html[data-theme="light"] .sidebar-link.active .link-icon {
  background: rgba(184,120,0,.12);
}

html[data-theme="light"] .tab-btn {
  color: var(--muted);
}

html[data-theme="light"] .modal {
  background: var(--surface-1);
  border-color: rgba(0,0,0,.1);
}

html[data-theme="light"] .pricing-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
}

html[data-theme="light"] .pricing-card.featured {
  background: linear-gradient(145deg, rgba(184,120,0,.05), #ffffff);
}

html[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
}

html[data-theme="light"] .stats-strip {
  background: var(--surface-0);
  border-color: rgba(0,0,0,.1);
}

html[data-theme="light"] .contract-box {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.1);
}

html[data-theme="light"] footer {
  background: var(--surface-0);
  border-top-color: rgba(0,0,0,.1);
}

html[data-theme="light"] .btn-ghost {
  background: rgba(0,0,0,.06);
  color: var(--muted);
  border-color: rgba(0,0,0,.12);
}
html[data-theme="light"] .btn-ghost:hover {
  background: rgba(0,0,0,.1);
  color: var(--white);
}

html[data-theme="light"] .alert-errors  { background: rgba(204,32,64,.06);   border-color: rgba(204,32,64,.25);  }
html[data-theme="light"] .alert-success { background: rgba(26,138,82,.06);   border-color: rgba(26,138,82,.25);  }
html[data-theme="light"] .alert-info    { background: rgba(32,96,204,.06);   border-color: rgba(32,96,204,.25);  }

html[data-theme="light"] .toast-success { background: rgba(26,138,82,.15);   border-color: rgba(26,138,82,.4);   }
html[data-theme="light"] .toast-error   { background: rgba(204,32,64,.15);   border-color: rgba(204,32,64,.4);   }
html[data-theme="light"] .toast-info    { background: rgba(32,96,204,.15);   border-color: rgba(32,96,204,.4);   }
html[data-theme="light"] .toast-warning { background: rgba(200,112,0,.15);   border-color: rgba(200,112,0,.4);   }

html[data-theme="light"] .sidebar-section-title { color: var(--muted-2); }
html[data-theme="light"] .card-title { color: var(--white); }

html[data-theme="light"] p { color: var(--muted); }

/* ── THEME TOGGLE BUTTON ─────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--glass-2);
  border: 1px solid var(--border);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  transition: all 160ms ease;
  color: var(--muted);
  font-size: .9rem;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--gold-dim);
  color: var(--gold);
  border-color: rgba(232,160,32,.3);
}

/* ── PARTICLES ───────────────────────────────────────────────────────────────
   Canvas is 100% controlled by particles.js — no CSS rules here.
   All positioning, z-index, and opacity are set via JS style.setProperty().
   ──────────────────────────────────────────────────────────────────────── */