[data-theme="light"] {
  --bg: #f8fafc;
  --bg-soft: #ffffff;
  --fg: #0f172a;
  --fg-muted: #64748b;
  
  --primary: #0ea5e9;       /* Tech Blue for Light Mode */
  --primary-glow: rgba(14, 165, 233, 0.3);
  --primary-dim: rgba(14, 165, 233, 0.1);
  --accent: #38bdf8;
  
  --border: #e2e8f0;
  --border-hover: #0ea5e9;
  
  --glass: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.06);
  
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-glow: 0 0 15px var(--primary-dim);
}

/* Light mode background adjustment */
[data-theme="light"] body {
  background-image: 
    radial-gradient(circle at 50% 0%, var(--primary-dim) 0%, transparent 40%),
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}
[data-theme="light"] .features article,
[data-theme="light"] .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
[data-theme="light"] .features h2,
[data-theme="light"] .card h3 {
  color: var(--primary);
}
[data-theme="light"] .features p,
[data-theme="light"] .card p {
  color: var(--fg-muted);
}
[data-theme="light"] .badge {
  color: var(--primary);
  background: rgba(14,165,233,0.12);
  border-color: var(--border);
}
[data-theme="light"] .section-title {
  color: var(--fg);
}
[data-theme="light"] .hex-deco {
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
}
[data-theme="light"] .hero h1 {
  background: linear-gradient(to right, var(--fg), var(--fg-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .site-header {
  background: rgba(255,255,255,0.7);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .nav a:hover {
  color: var(--fg);
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .btn {
  border-color: var(--border);
  background: rgba(255,255,255,0.8);
  color: var(--fg);
}
[data-theme="light"] .btn.primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
[data-theme="light"] .stat {
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--border);
}