[data-theme="light"] {
  --text-primary: #111111;
  --text-secondary: #555555;
  --highlight: #007acc;
}

[data-theme="light"] body {
  background: linear-gradient(to bottom right, #f2f4f8, #ffffff, #f2f4f8);
  color: var(--text-primary);
}

[data-theme="light"] .sidebar {
  background: linear-gradient(to bottom right, rgba(255,255,255,0.85), rgba(245,245,245,0.9));
  border-right: 1px solid rgba(0,0,0,0.05);
}

[data-theme="light"] .sidebar h2,
[data-theme="light"] .sidebar a,
[data-theme="light"] .sidebar a.active {
  color: var(--text-primary);
}

[data-theme="light"] .sidebar a:hover {
  background-color: rgba(0, 122, 204, 0.1);
}

[data-theme="light"] .main-panel {
  background: linear-gradient(to bottom right, #ffffff, #f9fafb);
}

[data-theme="light"] .card,
[data-theme="light"] .welcome {
  background: linear-gradient(to bottom right, rgba(255,255,255,0.85), rgba(245,245,245,0.9));
  border: 1px solid rgba(0,0,0,0.05);
  color: var(--text-primary);
}

[data-theme="light"] .card p,
[data-theme="light"] .welcome p {
  color: var(--text-secondary);
}

[data-theme="light"] .card button,
[data-theme="light"] .welcome button,
[data-theme="light"] .logout {
  background: linear-gradient(to bottom right, rgba(230,240,255,0.75), rgba(200,220,255,0.7));
  border: 1px solid rgba(0,0,0,0.08);
  color: #000;
}

[data-theme="light"] .card button:hover,
[data-theme="light"] .welcome button:hover,
[data-theme="light"] .logout:hover {
  background: linear-gradient(to bottom right, rgba(180,210,255,0.9), rgba(160,190,240,0.85));
  box-shadow: 0 0 10px rgba(0,122,204,0.3);
}

[data-theme="light"] .theme-toggle-container i {
  color: var(--highlight);
}