:root {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
  --imperial-gold: #9d7414;
  --royal-gold: #b58b21;
  --dark-gold: #76580f;
  --royal-navy: #f7fbff;
  --deep-navy: #eaf2fb;
  --sapphire: #095a9f;
  --crystal-blue: #007fb8;
  --ice-white: #172033;
  --mountain-white: #26364f;
  --pure-white: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(13, 53, 91, 0.16);
  --gold: #9d7414;
  --gold-light: #6f5314;
  --gold-dark: #76580f;
  --navy: #f7fbff;
  --navy-light: #ffffff;
  --navy-lighter: #e8f1fb;
  --text: #172033;
  --text-muted: #586a81;
  --bg-primary: #f5f8fc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #eef4fa;
  --border-color: rgba(14, 49, 85, 0.16);
  --text-primary: #172033;
  --text-secondary: #4c5f76;
}

:root[data-theme="light"] body {
  background: linear-gradient(135deg, #f7fbff 0%, #eef6fd 55%, #e6f0fa 100%) !important;
  color: #172033 !important;
}

:root[data-theme="light"] body::before {
  opacity: 0.55;
}

:root[data-theme="light"] .loader,
:root[data-theme="light"] .login-overlay {
  background: #f7fbff !important;
}

:root[data-theme="light"] .navbar,
:root[data-theme="light"] .trust-bar,
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .cart-sidebar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(13, 53, 91, 0.14) !important;
  box-shadow: 0 12px 34px rgba(13, 45, 76, 0.08);
}

:root[data-theme="light"] .hero-bg,
:root[data-theme="light"] .payment-section {
  background: linear-gradient(180deg, #f8fcff 0%, #eaf4fc 100%) !important;
}

:root[data-theme="light"] .auth-container,
:root[data-theme="light"] .login-card,
:root[data-theme="light"] .payment-card,
:root[data-theme="light"] .payment-container,
:root[data-theme="light"] .product-card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .review-card,
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .section-card,
:root[data-theme="light"] .dashboard-card,
:root[data-theme="light"] .admin-modal,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .profile-card,
:root[data-theme="light"] .main-content,
:root[data-theme="light"] .cart-item,
:root[data-theme="light"] .payment-summary,
:root[data-theme="light"] .summary-card,
:root[data-theme="light"] .policy-card,
:root[data-theme="light"] .terms-container {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(13, 53, 91, 0.14) !important;
  color: #172033 !important;
  box-shadow: 0 18px 42px rgba(13, 45, 76, 0.08);
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] p,
:root[data-theme="light"] li,
:root[data-theme="light"] label,
:root[data-theme="light"] span,
:root[data-theme="light"] td,
:root[data-theme="light"] th,
:root[data-theme="light"] .nav-link,
:root[data-theme="light"] .nav-back,
:root[data-theme="light"] .review-text,
:root[data-theme="light"] .detail-row span:last-child,
:root[data-theme="light"] .item-info h4,
:root[data-theme="light"] .cart-item-name,
:root[data-theme="light"] .page-title p,
:root[data-theme="light"] .security-note,
:root[data-theme="light"] .manual-instruction,
:root[data-theme="light"] .mpesa-instruction {
  color: #172033 !important;
}

:root[data-theme="light"] .text-muted,
:root[data-theme="light"] .reviewer-badge,
:root[data-theme="light"] .payment-header p,
:root[data-theme="light"] .detail-row span:first-child,
:root[data-theme="light"] .input-group label,
:root[data-theme="light"] .form-group input::placeholder,
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
  color: #5d7088 !important;
}

:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select,
:root[data-theme="light"] .input-wrapper input,
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .admin-field input,
:root[data-theme="light"] .admin-field select,
:root[data-theme="light"] .search-box input {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: rgba(13, 53, 91, 0.18) !important;
}

:root[data-theme="light"] .btn-google,
:root[data-theme="light"] .btn-auth.secondary,
:root[data-theme="light"] .nav-signup-btn,
:root[data-theme="light"] .btn-review,
:root[data-theme="light"] .btn-manual,
:root[data-theme="light"] .tab-btn {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: rgba(157, 116, 20, 0.45) !important;
}

:root[data-theme="light"] .logo-text,
:root[data-theme="light"] .hero-title .line1 {
  -webkit-text-fill-color: initial !important;
  background: none !important;
  color: #9d7414 !important;
}

:root[data-theme="light"] .theme-toggle-button {
  background: #0a1628;
  color: #ffffff;
  border-color: rgba(10, 22, 40, 0.2);
}

.theme-toggle-button {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  min-width: 68px;
  min-height: 42px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  background: #ffffff;
  color: #0a1628;
  font: 700 12px/1.1 Arial, sans-serif;
  letter-spacing: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.theme-toggle-button:hover,
.theme-toggle-button:focus-visible {
  transform: translateY(-1px);
  outline: 2px solid rgba(212, 175, 55, 0.45);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .theme-toggle-button {
    right: 12px;
    bottom: 12px;
    min-width: 60px;
    min-height: 38px;
  }
}