/* Isaac H. López Díaz — portfolio design tokens Extracted from index.html (landing) and resume-manpage.html. Two themes share one variable set: • night — default, dark "terminal" aesthetic (green accent) • day — light "man-page / paper" aesthetic (terracotta accent) Activate a theme by setting data-theme="night" | "day" on (or any wrapper element). The site persists the choice in localStorage under the key "isaac-theme". Variable names match the existing site CSS so the blog stays visually identical to the landing page and resume. */ :root { /* ---- Typography (stable across themes) ---- */ --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; /* ---- Brand accents (stable reference values) ---- */ --brand-green: #3ddc7e; /* night accent — terminal green */ --brand-terracotta: #b04a2e; /* day accent — man-page rust */ } /* ============================================================ NIGHT — default / dark terminal ============================================================ */ :root, [data-theme="night"] { --bg: #05070a; --panel: #0a0f0b; --panel-dark: #070c08; --green: #3ddc7e; /* accent */ --text: #eafff0; --muted: #93b0a0; --faint: #4f6658; --dim: #5c7566; --border: #16351f; --border-bright: #1f5c33; --dot-red: #c5564b; --dot-gold: #c99a3a; /* document surfaces (resume man-page) */ --sheet-bg: #0a0f0b; /* the "page" */ --desk-bg: #05070a; /* behind page */ --rule: #16351f; /* hairline */ } /* ============================================================ DAY — paper / light man-page ============================================================ */ [data-theme="day"] { --bg: #f6f1e4; --panel: #efe8d5; --panel-dark: #e8dfc8; --green: #b04a2e; /* accent (rust) */ --text: #26221b; --muted: #5f584c; --faint: #9a917f; --dim: #877c66; --border: #ddd5bf; --border-bright: #c8bb9c; --dot-red: #c5564b; --dot-gold: #a5762a; /* document surfaces (resume man-page) */ --sheet-bg: #ffffff; --desk-bg: #ece8dd; --rule: #ddd6c3; }