/* ---- Font-face Declarations ---- */ @font-face { font-family: 'IBM Plex Mono'; src: url('../assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'), url('../assets/fonts/IBMPlexMono-Regular.woff') format('woff'), url('../assets/fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('../assets/fonts/IBMPlexMono-Medium.woff2') format('woff2'), url('../assets/fonts/IBMPlexMono-Medium.woff') format('woff'), url('../assets/fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('../assets/fonts/IBMPlexMono-Bold.woff2') format('woff2'), url('../assets/fonts/IBMPlexMono-Bold.woff') format('woff'), url('../assets/fonts/IBMPlexMono-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; } /* ---- Design Tokens ---- */ :root { --drafting-paper: #f4f1ea; --blueprint: #1d2b53; --machinist: #4a4a4a; --ink-black: #1a1a1a; --grid-line: #e0dccc; --font-mono: 'IBM Plex Mono', 'Courier New', Courier, monospace; } [data-theme="dark"] { --drafting-paper: #0d0d0d; --blueprint: #33ff33; --machinist: #a0a0a0; --ink-black: #e0e0e0; --grid-line: #33ff3331; } /* ============================================================ GRID BACKGROUNDS ============================================================ */ /* Orthogonal grid — add .grid-bg to or any container */ .grid-bg { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; }