:root {
  --theme-shadow: rgba(0, 0, 0, .22);
  --theme-focus: rgba(64, 224, 208, .34);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --black: #f6f8f8;
  --off-black: #ffffff;
  --white: #111615;
  --teal: #14b8aa;
  --teal-dim: rgba(20, 184, 170, .12);
  --teal-border: rgba(20, 184, 170, .28);
  --gold: #b8860b;
  --gold-dim: rgba(184, 134, 11, .12);
  --gold-border: rgba(184, 134, 11, .28);
  --gray-900: #f6f8f8;
  --gray-800: #ffffff;
  --gray-700: #eef3f3;
  --gray-600: #d8e1e1;
  --gray-500: #9aa6a6;
  --gray-400: #687474;
  --gray-300: #4d5a5a;
  --success: #15803d;
  --danger: #d64242;
  --warning: #b7791f;
  --theme-shadow: rgba(20, 37, 37, .12);
  --theme-focus: rgba(20, 184, 170, .34);
  color-scheme: light;
}

body {
  transition: background-color .2s ease, color .2s ease;
}

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

:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  color-scheme: light;
}

:root[data-theme="light"] img {
  color: var(--gray-400);
}

:root[data-theme="light"] .card,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .section-card,
:root[data-theme="light"] .info-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .metric-card,
:root[data-theme="light"] .dashboard-card,
:root[data-theme="light"] .profile-card,
:root[data-theme="light"] .form-card,
:root[data-theme="light"] .table-card,
:root[data-theme="light"] .content-card,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .order-card,
:root[data-theme="light"] .product-card,
:root[data-theme="light"] .store-card,
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .account-header,
:root[data-theme="light"] .countdown-unit {
  box-shadow: 0 14px 34px var(--theme-shadow);
}

:root[data-theme="light"] .nav,
:root[data-theme="light"] .navbar,
:root[data-theme="light"] .main-nav,
:root[data-theme="light"] .header,
:root[data-theme="light"] .page-header,
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .admin-header,
:root[data-theme="light"] footer,
:root[data-theme="light"] .footer,
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .drawer,
:root[data-theme="light"] .mobile-drawer {
  background-color: var(--off-black);
}
:root[data-theme="light"] table,
:root[data-theme="light"] .table-wrap,
:root[data-theme="light"] .orders-table,
:root[data-theme="light"] .data-table {
  background-color: var(--off-black);
  color: var(--white);
}
:root[data-theme="light"] th,
:root[data-theme="light"] td,
:root[data-theme="light"] .divider,
:root[data-theme="light"] .bordered,
:root[data-theme="light"] .form-input,
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  border-color: var(--gray-600);
}
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  background-color: var(--gray-800);
  color: var(--white);
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
  color: var(--gray-400);
}

:root[data-theme="light"] .btn-pay-now,
:root[data-theme="light"] .btn-notify,
:root[data-theme="light"] .btn-save,
:root[data-theme="light"] .btn-submit,
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .nav-cart,
:root[data-theme="light"] .drawer-cart,
:root[data-theme="light"] .drawer-cart-link,
:root[data-theme="light"] .proof-btn.primary {
  color: #001817;
}

:root[data-theme="light"] .booa-theme-toggle {
  background: var(--gray-800);
  border-color: var(--gray-600);
  color: var(--white);
  box-shadow: 0 12px 28px var(--theme-shadow);
}

.booa-theme-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 9px 13px;
  background: var(--gray-800, #181818);
  border: 1px solid var(--gray-600, #2e2e2e);
  border-radius: 999px;
  color: var(--white, #fff);
  font: 800 .78rem "Syne", "DM Sans", sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.booa-theme-toggle:hover {
  border-color: var(--teal-border, rgba(64, 224, 208, .2));
  transform: translateY(-1px);
}

.booa-theme-toggle:focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 2px;
}

.booa-theme-toggle i {
  color: var(--teal, #40e0d0);
}

@media (max-width: 520px) {
  .booa-theme-toggle {
    left: 14px;
    bottom: 14px;
    min-height: 36px;
    padding: 8px 11px;
  }
}