/* assets/css/theme.css
   path: frontend/assets/css/theme.css */

:root,
[data-theme="dark"] {
  --bg-primary:      #0a0a0a;
  --bg-secondary:    #111111;
  --bg-card:         #161616;
  --bg-hover:        #1e1e1e;
  --border-color:    #222222;
  --border-hover:    #333333;
  --text-primary:    #F5F0EB;
  --text-secondary:  #C8BFB5;
  --text-muted:      rgba(200,191,181,0.45);
  --shadow-elevation: 0 4px 24px rgba(0,0,0,0.7);
  --shadow-card:     0 2px 12px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.9);
  --overlay-bg:      rgba(0,0,0,0.85);
  --input-bg:        #161616;
  --scrollbar-track: #111111;
  --scrollbar-thumb: #6B3A2A;
  --navbar-scrolled: rgba(10,10,10,0.95);
  --white-faint-theme: rgba(245,240,235,0.06);
  --skeleton-from:   #161616;
  --skeleton-to:     #222222;
  --toggle-bg:       #222222;
}

[data-theme="light"] {
  --bg-primary:      #FAFAF8;
  --bg-secondary:    #F2EDE8;
  --bg-card:         #FFFFFF;
  --bg-hover:        #F5F0EB;
  --border-color:    #E0D9D2;
  --border-hover:    #C9B8AA;
  --text-primary:    #1A1208;
  --text-secondary:  #5C4A38;
  --text-muted:      rgba(92,74,56,0.5);
  --shadow-elevation: 0 4px 24px rgba(107,58,42,0.12);
  --shadow-card:     0 2px 12px rgba(107,58,42,0.08), 0 1px 3px rgba(107,58,42,0.05);
  --overlay-bg:      rgba(250,250,248,0.92);
  --input-bg:        #FFFFFF;
  --scrollbar-track: #F2EDE8;
  --scrollbar-thumb: #C9972C;
  --navbar-scrolled: rgba(250,250,248,0.96);
  --white-faint-theme: rgba(26,18,8,0.04);
  --skeleton-from:   #F2EDE8;
  --skeleton-to:     #E8E0D8;
  --toggle-bg:       #E0D9D2;
}

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"] .navbar.scrolled {
  background: var(--navbar-scrolled);
  border-bottom-color: var(--border-color);
}

[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);
}