body[data-light-mode="on"] {
  --bg-0: #f8f9ff;
  --bg-1: #edf1ff;
  --bg-2: #e3e9ff;
  --text: #182039;
  --muted: #5b6789;
  --line: rgba(52, 72, 131, 0.2);
  --brand: #6f88f8;
  --brand-strong: #4867ef;
  --accent: #7a65e8;
  --danger: #d64f79;
  --shadow: 0 14px 36px rgba(67, 87, 148, 0.16);
}

body[data-light-mode="on"] {
  background:
    radial-gradient(circle at 16% 8%, rgba(124, 154, 255, 0.22), transparent 44%),
    radial-gradient(circle at 86% 72%, rgba(136, 119, 255, 0.2), transparent 40%),
    linear-gradient(160deg, var(--bg-0), var(--bg-1) 48%, var(--bg-2));
}

body[data-light-mode="on"] .glass-panel {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.88), rgba(247, 251, 255, 0.78));
}

body[data-light-mode="on"] .text-input,
body[data-light-mode="on"] .text-area,
body[data-light-mode="on"] select {
  background: rgba(255, 255, 255, 0.88);
}

body[data-light-mode="on"] .btn-primary {
  color: #f6f8ff;
  background: rgba(80, 107, 240, 0.84);
  border-color: rgba(62, 92, 236, 0.92);
}

body[data-light-mode="on"] .btn-ghost {
  background: rgba(255, 255, 255, 0.8);
}

body[data-light-mode="on"] .btn-ghost.danger {
  color: #bb315f;
  border-color: rgba(191, 67, 112, 0.45);
}

body[data-light-mode="on"] .changelog-content,
body[data-light-mode="on"] .top-bar,
body[data-light-mode="on"] .panel,
body[data-light-mode="on"] .import-loading-card,
body[data-light-mode="on"] .drawer-section {
  background: rgba(255, 255, 255, 0.8);
}

body[data-light-mode="on"] .role-card {
  border-color: rgba(106, 128, 230, 0.45);
  background:
    radial-gradient(circle at 70% 0%, rgba(140, 164, 255, 0.24), transparent 42%),
    rgba(255, 255, 255, 0.86);
}

body[data-light-mode="on"] .role-card-floating {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.92), transparent 54%),
    radial-gradient(circle at 70% 0%, rgba(140, 164, 255, 0.2), transparent 48%),
    rgba(255, 255, 255, 0.86);
}

body[data-light-mode="on"] .collection-full-card,
body[data-light-mode="on"] .media-picker-modal,
body[data-light-mode="on"] .gallery-item,
body[data-light-mode="on"] .media-inline-box {
  background: rgba(255, 255, 255, 0.9);
}

body[data-light-mode="on"] .chip {
  color: #3d4b77;
  border-color: rgba(86, 103, 170, 0.3);
}

body[data-light-mode="on"] .settings-drawer {
  background: rgba(245, 249, 255, 0.94);
}

body[data-light-mode="on"] .icon-btn,
body[data-light-mode="on"] .feature-btn {
  background: rgba(255, 255, 255, 0.82);
}

body[data-light-mode="on"] .splash-progress-text {
  color: #485b8f;
}

body[data-light-mode="on"] .shadow-orb {
  opacity: 0.26;
}