/* ─────────────────────────────────────────────────────────── Theme layer for John Costello portfolio. Sits on top of tokens.css. Warm "paper" is the default voice; a cool/indigo alternative + accent overrides are toggled via data-attributes on by the Tweaks panel. Warm values are oklch-harmonised against the Slate/Indigo system. ─────────────────────────────────────────────────────────── */ @font-face { font-family: 'Bosch'; src: url('fonts/Bosch-Display.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Satoshi everywhere (Bosch is used only on the hero title) */ --family: 'Satoshi'; --font-display: 'Satoshi', system-ui, -apple-system, sans-serif; --font-sans: 'Satoshi', system-ui, -apple-system, sans-serif; --font-condensed: 'Satoshi', system-ui, -apple-system, sans-serif; --font-mono: 'Space Mono', ui-monospace, Menlo, Consolas, monospace; /* WARM — bone / wood (wakawaka-inspired light palette) */ --paper: #f1ece1; --paper-2: #e8e1d2; --paper-a: rgba(241, 236, 225, .82); --hair: #ddd5c4; --ink: #1b1712; --accent: #9c6536; --accent-7: #d8b487; --accent-11: #7d4f22; /* floating aura blobs (light/warm context) */ --aura-1: rgba(156, 101, 54, .20); --aura-2: rgba(120, 150, 200, .15); --aura-3: rgba(214, 168, 110, .20); } /* ── NIGHT — default: stone-cold black / white / grey ── */ html[data-theme="night"] { --paper: #000000; --paper-2: #0c0c0c; --paper-a: rgba(0, 0, 0, .82); --hair: rgba(255, 255, 255, .16); --ink: #000000; /* remap the slate text scale to a pure greyscale ramp */ --slate-12: #ffffff; /* primary white */ --slate-11: #b2b2b2; /* secondary */ --slate-10: #8c8c8c; --slate-9: #707070; /* labels */ --slate-8: #5c5c5c; /* muted */ --slate-7: #444444; --slate-6: rgba(255, 255, 255, .14); /* hairlines */ --slate-5: #2a2a2a; --slate-4: #1d1d1d; --slate-3: #161616; --slate-2: #101010; --slate-a-4: rgba(255, 255, 255, .06); --slate-a-8: rgba(255, 255, 255, .14); --accent: #ffffff; --accent-7: #ffffff; --accent-11: #cfcfcf; /* aura: barely-there cool grey haze, no color */ --aura-1: rgba(255, 255, 255, .05); --aura-2: rgba(255, 255, 255, .035); --aura-3: rgba(255, 255, 255, .04); } /* stone-cold kills the rainbow gradient — render those bits plain white */ html[data-theme="night"] .ai-gradient { background: none; -webkit-text-fill-color: #fff; color: #fff; } /* ── PAPER — antigravity-style: near-white bg, near-black ink, blue accent ── */ html[data-theme="paper"] { --paper: #edebe3; --paper-2: #e4e1d7; --paper-a: rgba(237, 235, 227, .80); --hair: rgba(35, 34, 30, .14); --ink: #2c2a25; --slate-12: #2c2a25; --slate-11: #4a4843; --slate-10: #6b6960; --slate-9: #8d8b82; --slate-8: #a9a79d; --slate-7: #c6c4ba; --slate-6: rgba(35, 34, 30, .14); --slate-5: #d8d5ca; --slate-4: #e1ded4; --slate-3: #e7e5db; --slate-2: #ebe9e1; --slate-a-4: rgba(35, 34, 30, .05); --slate-a-8: rgba(35, 34, 30, .12); --accent: #2c2a25; --accent-7: #a9a79d; --accent-11: #1a1814; --aura-1: rgba(150, 140, 120, .05); --aura-2: rgba(150, 130, 170, .045); --aura-3: rgba(120, 118, 110, .03); } html[data-accent="antigravity"] { --accent: #2c2a25; --accent-7: #a9a79d; --accent-11: #1a1814; } /* paper theme — render the rainbow gradient bits as the blue accent instead */ html[data-theme="paper"] .ai-gradient { background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); } /* Cool / original system */ html[data-theme="cool"] { --paper: #ffffff; --paper-2: var(--slate-2); --paper-a: rgba(255, 255, 255, .82); --hair: var(--slate-6); --ink: var(--slate-12); --accent: var(--indigo-9); --accent-7: var(--indigo-7); --accent-11: var(--indigo-11); } /* Accent-only overrides (apply on any background; declared last so they win) */ html[data-accent="indigo"] { --accent: var(--indigo-9); --accent-7: var(--indigo-7); --accent-11: var(--indigo-11); } html[data-accent="terracotta"] { --accent: #b07b46; --accent-7: #dcbc8e; --accent-11: #caa06b; } html[data-accent="amber"] { --accent: #d29435; --accent-7: #e7c585; --accent-11: #e0a445; } html[data-accent="forest"] { --accent: #4e9568; --accent-7: #9cc7a8; --accent-11: #67ad81; } /* on light backgrounds the accents want their deeper, less-luminous tones */ html[data-theme="warm"][data-accent="terracotta"], html[data-theme="cool"][data-accent="terracotta"] { --accent: #9c6536; --accent-11: #7d4f22; } html[data-theme="warm"][data-accent="amber"], html[data-theme="cool"][data-accent="amber"] { --accent: #c2872a; --accent-11: #8f6212; } html[data-theme="warm"][data-accent="forest"], html[data-theme="cool"][data-accent="forest"] { --accent: #3f7d54; --accent-11: #2f6440; } /* Typeface picker — one family drives display + body; mono stays for micro-labels */ html[data-typeface="bricolage"] { --family: 'Satoshi'; } html[data-typeface="space"] { --family: 'Satoshi'; } html[data-typeface="archivo"] { --family: 'Satoshi'; } /* doodles off */ html[data-doodles="off"] .scribble { display: none; }