html[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #f3f6fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e8edf5;
  --bg-card: rgba(255, 255, 255, 0.96);
  --bg-card-hover: #f8fafc;
  --bg-sidebar: rgba(255, 255, 255, 0.98);
  --bg-overlay: rgba(15, 23, 42, 0.4);

  --border: rgba(15, 23, 42, 0.12);
  --border-subtle: rgba(15, 23, 42, 0.07);
  --border-focus: rgba(180, 83, 9, 0.45);
  --border-gold: rgba(180, 83, 9, 0.28);
  --border-gold-strong: rgba(180, 83, 9, 0.48);

  --accent: #a85208;
  --accent-dark: #85400a;
  --accent-light: #92400e;
  --accent-glow: rgba(180, 83, 9, 0.12);
  --accent-glow-strong: rgba(180, 83, 9, 0.22);
  --accent-gradient: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  --accent-gradient-hover: linear-gradient(135deg, #b45309 0%, #92400e 100%);

  --text-primary: #172033;
  --text-secondary: #526078;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  --text-gold: #92400e;

  --success-bg: rgba(5, 150, 105, 0.1);
  --success-border: rgba(5, 150, 105, 0.3);
  --danger-bg: rgba(220, 38, 38, 0.09);
  --danger-border: rgba(220, 38, 38, 0.28);
  --warning-bg: rgba(180, 83, 9, 0.1);
  --warning-border: rgba(180, 83, 9, 0.28);
  --info-bg: rgba(37, 99, 235, 0.09);
  --info-border: rgba(37, 99, 235, 0.25);

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.14);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.18);
  --shadow-gold: 0 4px 24px rgba(180, 83, 9, 0.12);
  --shadow-gold-lg: 0 8px 32px rgba(180, 83, 9, 0.18);
  --inner-glow: inset 0 1px 1px rgba(255, 255, 255, 0.75);
  --text-main: #172033;
  --border-glass: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] body {
  color: var(--text-primary);
  background-color: var(--bg-primary);
  background-image: radial-gradient(circle at 95% 5%, rgba(245, 158, 11, 0.06), transparent 40%),
    radial-gradient(circle at 5% 95%, rgba(59, 130, 246, 0.045), transparent 40%);
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .top-bar,
html[data-theme="light"] .main-wrapper,
html[data-theme="light"] .dashboard-container {
  background-color: var(--bg-secondary);
}

html[data-theme="light"] .sidebar {
  border-color: var(--border);
}

html[data-theme="light"] .card-header,
html[data-theme="light"] .card-footer,
html[data-theme="light"] .table th,
html[data-theme="light"] .staff-stats-row {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

html[data-theme="light"] .table td {
  color: var(--text-primary);
  border-color: var(--border);
}

html[data-theme="light"] .table tbody tr:hover,
html[data-theme="light"] .form-control,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .member-meal-item {
  color: var(--text-primary);
  background-color: #ffffff;
}

html[data-theme="light"] .form-control:hover,
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  color: var(--text-primary);
  background-color: #ffffff;
  border-color: var(--border-focus);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: var(--text-muted);
}

html[data-theme="light"] select option {
  color: var(--text-primary);
  background-color: #ffffff;
}

html[data-theme="light"] .welcome-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.94));
}

html[data-theme="light"] .auth-page {
  background-color: var(--bg-primary);
}

html[data-theme="light"] .auth-card,
html[data-theme="light"] .auth-page .auth-card {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

html[data-theme="light"] .auth-title,
html[data-theme="light"] .auth-page h1,
html[data-theme="light"] .auth-page h2,
html[data-theme="light"] .auth-page h3,
html[data-theme="light"] .auth-page label,
html[data-theme="light"] .auth-page .form-label {
  color: var(--text-primary);
}

html[data-theme="light"] .auth-page .auth-subtitle,
html[data-theme="light"] .auth-page p,
html[data-theme="light"] .auth-page .text-muted {
  color: var(--text-secondary);
}

html[data-theme="light"] .scanner-top-bar,
html[data-theme="light"] .scanner-section,
html[data-theme="light"] .scanner-card,
html[data-theme="light"] .scanner-panel,
html[data-theme="light"] .meal-panel,
html[data-theme="light"] .scanner-page .card {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border-color: var(--border);
}

html[data-theme="light"] .scanner-page .table th,
html[data-theme="light"] .scanner-page .table td {
  color: var(--text-primary);
}

html[data-theme="light"] .theme-toggle {
  color: #7c3f0c;
  background: #fff7ed;
  border-color: rgba(180, 83, 9, 0.3);
}

.theme-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.1);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  background: rgba(245, 158, 11, 0.18);
}

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

.theme-toggle-floating {
  position: fixed;
  z-index: 1100;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  box-shadow: var(--shadow-md);
}

@media (max-width: 576px) {
  .theme-toggle {
    min-height: 36px;
    padding: 0.4rem 0.65rem;
  }
}