/* * Marcus Henry — Theme Tokens * Two complete design directions, switched via [data-theme] on . * * hermes — dark forest-green canvas, cream serif type, hairline grid, * vintage technical-manual aesthetic. Inspired by Nous Research. * callum — light, airy, big bold sans, soft pastel gradient blob. * Inspired by Callum O'Connor's portfolio. */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&display=swap'); /* ─── HERMES — dark + serif ────────────────────────────── */ :root[data-theme="hermes"] { --bg: #0c1a17; --bg-elevated: #0f201c; --bg-deep: #081410; --surface: rgba(232, 220, 195, 0.03); --surface-hover: rgba(232, 220, 195, 0.06); --ink: #ece1c8; --ink-bright: #fbf3dc; --ink-muted: rgba(236, 225, 200, 0.62); --ink-faint: rgba(236, 225, 200, 0.38); --accent: #d4a85a; --accent-warm: #e8c97a; --accent-soft: rgba(212, 168, 90, 0.16); --hair: rgba(236, 225, 200, 0.16); --hair-strong: rgba(236, 225, 200, 0.28); --status-live: #7ec891; --font-display: 'DM Serif Display', 'Times New Roman', serif; --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --font-ui: 'EB Garamond', Georgia, serif; --lh-body: 1.55; --lh-tight: 1.1; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-pill: 999px; color-scheme: dark; } /* ─── CALLUM — light + sans ────────────────────────────── */ :root[data-theme="callum"] { --bg: #fafaf7; --bg-elevated: #ffffff; --bg-deep: #f1f1ed; --surface: rgba(10, 10, 10, 0.02); --surface-hover: rgba(10, 10, 10, 0.05); --ink: #0a0a0a; --ink-bright: #000000; --ink-muted: #6b6b6b; --ink-faint: #a3a3a3; --accent: #0a0a0a; --accent-warm: #4f46e5; --accent-soft: rgba(10, 10, 10, 0.05); --hair: rgba(10, 10, 10, 0.08); --hair-strong: rgba(10, 10, 10, 0.16); --status-live: #22c55e; --font-display: 'DM Sans', system-ui, -apple-system, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --font-ui: 'DM Sans', system-ui, -apple-system, sans-serif; --lh-body: 1.55; --lh-tight: 1.05; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; color-scheme: light; } /* Default to hermes if no theme set */ :root { color-scheme: dark; } /* ─── Reset + base ─────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background-color: var(--bg, #0c1a17); } body { font-family: var(--font-body); font-size: 16px; color: var(--ink); background-color: var(--bg); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* Focus */ :focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } /* Selection */ ::selection { background: var(--accent); color: var(--bg); } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } :root[data-theme="hermes"] ::-webkit-scrollbar-thumb { background: rgba(236,225,200,0.14); border-radius: 0; } :root[data-theme="callum"] ::-webkit-scrollbar-thumb { background: rgba(10,10,10,0.14); border-radius: 999px; }