/* CircuitSimFree — Light theme for guide/learning pages */
/* Loaded as an alternative to the dark theme */
:root {
  --bg: #f8fafc;
  --bg2: #ffffff;
  --bg3: #f1f5f9;
  --border: #e2e8f0;
  --accent: #0891b2;
  --accent2: #059669;
  --accent3: #ea580c;
  --text: #1e293b;
  --text-dim: #64748b;
  --text-bright: #0f172a;
  --mono: 'Share Tech Mono', monospace;
  --sans: 'Barlow', sans-serif;
  --cond: 'Barlow Condensed', sans-serif;
}

body { background: var(--bg); color: var(--text); }
body::before { display: none; }

nav {
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.nav-logo { color: var(--accent); }
.nav-links a { color: var(--text-dim); }
.nav-links a:hover { color: var(--accent); }

.lead { border-color: var(--accent); color: var(--text-dim); }

.sim-btn { background: var(--accent); box-shadow: 0 2px 8px rgba(8,145,178,0.2); }
.sim-btn:hover { background: var(--accent2); }
.sim-btn.outline { background: transparent; color: var(--accent); border-color: var(--accent); }

.formula-box { background: #f0f9ff; border-color: #bae6fd; }
.formula { color: var(--accent); }

.tip { background: #f0fdf4; border-color: #86efac; }
.tip strong { color: var(--accent2); }
.warning { background: #fff7ed; border-color: #fed7aa; }
.warning strong { color: var(--accent3); }

table th { color: var(--text-dim); border-color: var(--border); }
table td { border-color: var(--border); }
table tr:hover td { background: var(--bg3); }

.faq-item { border-color: var(--border); }
.faq-q { color: var(--text-bright); }
.faq-q::after { color: var(--accent); }
.faq-a { color: var(--text-dim); }

.related-card { background: var(--bg2); border-color: var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.related-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(8,145,178,0.1); }

.mobile-nav { background: #ffffff; border-color: var(--border); }
.mobile-nav-links a { color: var(--text); }
.mobile-nav-links a:hover { background: var(--bg3); color: var(--accent); }
.hamburger span { background: var(--text-dim); }

footer { background: var(--bg3); border-color: var(--border); color: var(--text-dim); }
footer a { color: var(--accent); }