/* PATH: public_html/assets/css/theme.css */
/* assets/css/theme.css */

:root,
[data-theme="dark"] {
  --bg-primary:      #1A1F1C;
  --bg-secondary:    #222824;
  --bg-card:         #262E29;
  --bg-hover:        #2E3733;
  --border-color:    #333D37;
  --border-hover:    #445048;
  --text-primary:    #FCFDFC;
  --text-secondary:  #B7C4BC;
  --text-muted:      rgba(183,196,188,0.45);
  --shadow-elevation: 0 4px 24px rgba(0,0,0,0.55);
  --shadow-card:     0 2px 12px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.7);
  --overlay-bg:      rgba(0,0,0,0.8);
  --input-bg:        #262E29;
  --scrollbar-track: #222824;
  --scrollbar-thumb: #1F9D6B;
  --navbar-scrolled: rgba(26,31,28,0.95);
  --navbar-bg:       rgba(20,24,21,0.97);
  --navbar-mobile-bg: rgba(18,21,19,0.98);
  --white-faint-theme: rgba(252,253,252,0.06);
  --skeleton-from:   #262E29;
  --skeleton-to:     #333D37;
  --toggle-bg:       #333D37;
}

[data-theme="light"] {
  --bg-primary:      #FFFFFF;
  --bg-secondary:    #F3FAF6;
  --bg-card:         #FFFFFF;
  --bg-hover:        #EAF7F0;
  --border-color:    #E1EFE7;
  --border-hover:    #B9E4CE;
  --text-primary:    #16201B;
  --text-secondary:  #4B5B52;
  --text-muted:      rgba(75,91,82,0.5);
  --shadow-elevation: 0 4px 24px rgba(31,157,107,0.1);
  --shadow-card:     0 2px 12px rgba(31,157,107,0.07), 0 1px 3px rgba(31,157,107,0.05);
  --overlay-bg:      rgba(255,255,255,0.92);
  --input-bg:        #FFFFFF;
  --scrollbar-track: #F3FAF6;
  --scrollbar-thumb: #D4A017;
  --navbar-scrolled: rgba(255,255,255,0.96);
  --navbar-bg:       rgba(255,255,255,0.97);
  --navbar-mobile-bg: rgba(255,255,255,0.98);
  --white-faint-theme: rgba(22,32,27,0.04);
  --skeleton-from:   #F3FAF6;
  --skeleton-to:     #E1EFE7;
  --toggle-bg:       #E1EFE7;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.35s ease, color 0.35s ease;
}

[data-theme="light"] body {
  --black:        var(--bg-primary);
  --black-soft:   var(--bg-secondary);
  --black-card:   var(--bg-card);
  --black-border: var(--border-color);
  --white:        #1A1208;
  --white-dim:    #5C4A38;
  --white-faint:  var(--white-faint-theme);
}

[data-theme="light"] .hero {
  background: linear-gradient(135deg, #FAFAF8 0%, #F5F0EB 100%);
}

[data-theme="light"] .hero__bg {
  opacity: 0.5;
}

[data-theme="light"] .product-card {
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .form-control {
  background: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .form-control:focus {
  border-color: var(--gold);
}

[data-theme="light"] ::selection {
  background: var(--gold);
  color: #fff;
}

[data-theme="light"] ::-webkit-scrollbar-track  { background: var(--scrollbar-track); }
[data-theme="light"] ::-webkit-scrollbar-thumb  { background: var(--scrollbar-thumb); }

[data-theme="light"] .footer {
  background: var(--bg-secondary);
  border-top-color: var(--border-color);
}

[data-theme="light"] .admin-sidebar,
[data-theme="light"] .admin-topbar {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="light"] .admin-table th {
  background: var(--bg-secondary);
}

[data-theme="light"] .cart-drawer,
[data-theme="light"] .modal {
  background: var(--bg-secondary);
}

[data-theme="light"] .toast {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-to) 50%, var(--skeleton-from) 75%);
  background-size: 200% 100%;
}

.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  background: var(--toggle-bg);
  border-radius: 14px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
  flex-shrink: 0;
}

.theme-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}

[data-theme="light"] .theme-toggle__knob {
  transform: translateX(24px);
}

.theme-toggle:hover {
  border-color: var(--gold);
}

.theme-toggle:active {
  transform: scale(0.92);
}