/* ============================================
   LIGHT THEME OVERRIDES — Base44-inspired
   Clean, airy aesthetic with soft radial gradients
   ============================================ */

[data-theme="light"] {
  /* Core palette — Clean, light, airy */
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-elevated: #f1f5f9;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-glass-hover: rgba(241, 245, 249, 0.95);

  /* Text — High contrast for readability */
  --text: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;

  /* Accent — Deeper cyan for light bg contrast */
  --accent: #0891b2;
  --accent-light: #06b6d4;
  --accent-dim: rgba(8, 145, 178, 0.08);
  --accent-glow: rgba(8, 145, 178, 0.12);
  --accent-glow-soft: rgba(8, 145, 178, 0.05);

  /* Semantic — Deeper for light bg */
  --green: #059669;
  --amber: #d97706;
  --red: #dc2626;
  --purple: #7c3aed;
  --peach: #ea580c;

  /* Borders — Subtle, clean */
  --border: rgba(15, 23, 42, 0.06);
  --border-hover: rgba(8, 145, 178, 0.3);
  --border-active: rgba(8, 145, 178, 0.5);

  /* Gradients — Base44-inspired soft radial */
  --gradient-hero: linear-gradient(135deg, #0891b2 0%, #059669 50%, #7c3aed 100%);
  --gradient-card: linear-gradient(160deg, rgba(8,145,178,0.03) 0%, rgba(5,150,105,0.015) 100%);
  --gradient-btn: linear-gradient(135deg, #0891b2, #0e7490);
  --gradient-btn-hover: linear-gradient(135deg, #06b6d4, #0891b2);

  /* Shadows — Soft, layered */
  --shadow-card: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-glow: 0 0 48px rgba(8,145,178,0.06);
  --shadow-glow-strong: 0 0 64px rgba(8,145,178,0.1);
}

/* Light theme: Base44-style soft radial gradient background */
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(8,145,178,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 10%, rgba(124,58,237,0.04) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(234,88,12,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 60%, rgba(5,150,105,0.03) 0%, transparent 45%);
}

/* Inline code stays a light chip. Fenced blocks stay dark, or the chip
   paints each line and the uncolored tokens vanish into it. */
[data-theme="light"] .post-content :not(pre) > code {
  background: #f1f5f9;
  color: #0e7490;
}
[data-theme="light"] .post-content pre,
[data-theme="light"] .post-content pre code,
[data-theme="light"] .highlight,
[data-theme="light"] .highlight pre,
[data-theme="light"] .highlight code {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #1e293b;
}
[data-theme="light"] .post-content pre code,
[data-theme="light"] .highlight code {
  padding: 0;
  border-radius: 0;
}

/* Light theme: link hover color for contrast */
[data-theme="light"] a:hover { color: #0e7490; }

/* Light theme: selection color stays accent */
[data-theme="light"] ::selection { background: #0891b2; color: #fff; }

/* Light theme: scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #0891b2; }

/* Light theme: header glass effect */
[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.85);
}

/* Light theme: card backdrop */
[data-theme="light"] .post-card,
[data-theme="light"] .bento-card,
[data-theme="light"] .skill-category,
[data-theme="light"] .experience-card,
[data-theme="light"] .cert-card,
[data-theme="light"] .contact-card {
  backdrop-filter: blur(8px);
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-glass);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  font-size: 0.9rem;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--accent-light);
  border-color: var(--border-hover);
  background: var(--accent-glow-soft);
  transform: scale(1.05);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
}
/* Show sun in dark mode (click to go light) */
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* Show moon in light mode (click to go dark) */
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: inline; }

/* Prevent FOUC: hide toggle until JS loads */
.theme-toggle { opacity: 0; }
.theme-toggle.loaded { opacity: 1; transition: opacity 0.3s var(--ease-out); }

/* Note: no light-theme token-color overrides here on purpose. Code blocks stay
   dark navy (#0f172a) in both themes (see `.highlight` background rules above),
   so the base dark-background-appropriate token palette in main.css applies in
   both themes too. A previous "adapted for light bg" override block used to
   live here, but it recolored tokens for a *light* background while the
   background itself stayed forced dark — a mismatch that made code nearly
   unreadable in light mode (muted teal/green/purple on dark navy instead of
   the brighter palette main.css already uses correctly). */