/* ========================================================================== DESIGN TOKENS Concept: "the editor is the identity" — dark ink workspace, amber for primary action/focus, teal for status/security signals. ========================================================================== */ :root{ /* --- Color: surfaces --- */ --ink-950:#0a0c11; --ink-900:#0e1117; --ink-800:#141922; --ink-700:#1b212c; --ink-600:#232a37; --line:#2a313f; --line-soft:#1e2430; /* --- Color: text --- */ --text-hi:#eef0f4; --text-md:#aab2c2; --text-lo:#6b7385; /* --- Color: accents --- */ --amber:#f0a939; --amber-hi:#ffc46b; --amber-dim:rgba(240,169,57,.14); --teal:#4fd1c5; --teal-dim:rgba(79,209,197,.14); --red:#e5674a; --green:#59d68a; --on-accent:#0a0c11; /* --- Type --- */ --font-display:"Plus Jakarta Sans", "Segoe UI", sans-serif; --font-mono:"JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; --fs-10:.625rem; --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-22:1.375rem; --fs-28:1.75rem; --fs-36:2.25rem; --fs-48:3rem; --fs-64:4rem; /* --- Layout --- */ --maxw:1180px; --gutter:clamp(20px,5vw,64px); --radius-s:6px; --radius-m:10px; --radius-l:16px; --chrome-h:38px; --statusbar-h:30px; --navbar-h:64px; /* --- Motion --- */ --ease:cubic-bezier(.2,.7,.2,1); --dur-fast:.18s; --dur-med:.4s; --dur-slow:.7s; } @media (prefers-color-scheme: light){ /* Portfolio is intentionally single-theme (dark editor identity). Reserved for potential future light-mode toggle. */ } /* ---- Light theme override, toggled via theme.js setting [data-theme="light"] on . Surfaces flip to a warm paper tone; accent colors are deepened a shade so amber/teal text keeps enough contrast against a light background; --on-accent stays fixed dark since every accent surface (amber/teal) is still mid-tone. -------- */ :root[data-theme="light"]{ --ink-950:#efece4; --ink-900:#fbfaf7; --ink-800:#f2f0ea; --ink-700:#e9e6dd; --ink-600:#ddd8cc; --line:#d8d3c6; --line-soft:#e4e0d5; --text-hi:#191c22; --text-md:#4c5264; --text-lo:#7b8294; --amber:#c9791b; --amber-hi:#a85f0e; --amber-dim:rgba(201,121,27,.14); --teal:#0f8a7e; --teal-dim:rgba(15,138,126,.14); --red:#c94a30; --green:#2f9e5e; }