/* ═══════════════════════════════════════════════════════════ assets/css/theme.css — AngelCode Labs Theme variables, light/dark, font preferences ═══════════════════════════════════════════════════════════ */ /* ── Dark (default) ── */ :root { --bg: #0b0d10; --surface: #111318; --card: #161920; --border: #1f2530; --border2: #2a3040; --text: #e2e8f0; --muted: #64748b; --dim: #374151; --html: #f97316; --css: #3b82f6; --php: #a855f7; --sql: #10b981; --js: #f0c040; --green: #4ade80; --red: #f87171; --blue: #60a5fa; --radius: 8px; --shadow: 0 4px 24px rgba(0,0,0,.4); --shadow-lg: 0 8px 40px rgba(0,0,0,.5); /* Font families */ --font-body: 'DM Sans', sans-serif; --font-display: 'Syne', sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* ── Light mode ── */ [data-theme="light"] { --bg: #f8f9fc; --surface: #ffffff; --card: #ffffff; --border: #e2e8f0; --border2: #cbd5e1; --text: #0f172a; --muted: #64748b; --dim: #94a3b8; --shadow: 0 4px 24px rgba(0,0,0,.08); --shadow-lg: 0 8px 40px rgba(0,0,0,.12); } [data-theme="light"] body { background: var(--bg); color: var(--text); } [data-theme="light"] .topnav { background: rgba(255,255,255,.95); border-bottom-color: var(--border); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border2); } /* ── Font: Default (DM Sans + Syne) — already loaded via layout ── */ [data-font="default"] { --font-body: 'DM Sans', sans-serif; --font-display: 'Syne', sans-serif; } /* ── Font: Mono (JetBrains Mono everywhere) ── */ [data-font="mono"] { --font-body: 'JetBrains Mono', monospace; --font-display: 'JetBrains Mono', monospace; } [data-font="mono"] body { font-size: 14px; letter-spacing: -.2px; } /* ── Font: Humanist (Lora + DM Sans — loaded on demand) ── */ [data-font="humanist"] { --font-body: 'DM Sans', sans-serif; --font-display: 'Lora', serif; } [data-font="humanist"] .topnav .nav-logo, [data-font="humanist"] h1, [data-font="humanist"] h2, [data-font="humanist"] h3 { font-family: 'Lora', serif; font-style: italic; letter-spacing: -.5px; } /* Apply variables */ body { font-family: var(--font-body); } .font-display, h1, h2, h3, h4, .section-title, .hero h1, .dash-wrap h1, .welcome h1 { font-family: var(--font-display); } /* ── Theme persistence script (inline in ) ── */ /* Applied via JS reading localStorage — see layout.php additions */