/* ── Light Theme Override ──────────────────────────────────────── */
[data-theme="light"] {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #1a202c;
  --muted: #718096;
  --muted2: #a0aec0;
  --accent: #3b6ce7;
  --accent-hover: #2d5bd0;
  --card-bg: #ffffff;
  --card-hover-border: rgba(59,108,231,0.3);
  --section-alt: #edf2f7;
  --gradient-hero: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);

  /* Surfaces */
  --surface2: #eef1f8;
  --surface3: #e4e8f2;

  /* Borders */
  --border2: rgba(0, 0, 0, 0.12);
  --border3: rgba(0, 0, 0, 0.06);

  /* Text */
  --text2: #5a6376;

  /* Status backgrounds */
  --status-pass-bg: rgba(22, 163, 74, 0.10);
  --status-fail-bg: rgba(220, 38, 38, 0.10);
  --status-warn-bg: rgba(217, 119, 6, 0.10);
  --status-info-bg: rgba(37, 99, 235, 0.10);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.75);

  /* Accent */
  --accent2: #3b6de8;

  color-scheme: light;
}
[data-theme="light"] .site-header,
[data-theme="light"] .header {
  background: rgba(255,255,255,0.9);
  border-bottom-color: var(--border);
}
[data-theme="light"] .card,
[data-theme="light"] .tool-box {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] code,
[data-theme="light"] pre {
  background: #edf2f7;
  color: #2d3748;
}
[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: #fff;
}
[data-theme="light"] .btn-outline {
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .footer {
  background: #edf2f7;
  border-top-color: var(--border);
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
}