/* ========================================================================== PocketCorp Coder — design tokens Ported from pocketcorp.agency. Theme = .dark class on . Every themeable value lives here; components only consume variables. ========================================================================== */ :root { /* -- Brand core ------------------------------------------------------ */ --pc-surface: #FFFFFF; --pc-ink: #1A1A1A; --pc-surface-inverse: #1A1A1A; --pc-ink-inverse: #FFFFFF; /* -- Lines & fills (alpha-based so they work on any surface) --------- */ --pc-border: rgba(26, 26, 26, 0.15); --pc-border-hover: rgba(26, 26, 26, 0.30); --pc-border-strong: rgba(26, 26, 26, 0.35); --pc-border-muted: rgba(128, 128, 128, 0.15); --pc-bg-subtle: rgba(26, 26, 26, 0.02); --pc-bg-hover: rgba(26, 26, 26, 0.05); --pc-bg-raised: #FFFFFF; /* -- Functional colors (the only non-monochrome values on the site) -- */ --pc-danger: #B00020; --pc-ok: #34d399; /* -- Type ------------------------------------------------------------ */ --pc-font-display: 'Space Grotesk', sans-serif; --pc-font-body: 'JetBrains Mono', monospace; --pc-track-tight: 0.08em; --pc-track: 0.15em; --pc-track-wide: 0.18em; --pc-track-logo: 0.25em; /* -- Shape & rhythm --------------------------------------------------- */ --pc-radius: 0px; /* the brand is sharp; keep 0 unless retheming */ --pc-border-w: 1.5px; --pc-sidebar-w: 248px; --pc-content-max: 1400px; /* widened in steps below — see the note there */ --pc-gap: 24px; --pc-ease: cubic-bezier(0.22, 1, 0.36, 1); /* -- Muted text via opacity, like the brand site ---------------------- */ --pc-dim-1: 0.7; --pc-dim-2: 0.55; --pc-dim-3: 0.4; /* -- Code editor syntax tokens (deliberately desaturated) ------------- */ --pc-tok-comment: rgba(26, 26, 26, 0.45); --pc-tok-string: #4c7a53; --pc-tok-keyword: #7a5ea8; --pc-tok-number: #9a6a1f; --pc-tok-builtin: #2f6f88; } .dark { --pc-surface: #1A1A1A; --pc-ink: #FFFFFF; --pc-surface-inverse: #FFFFFF; --pc-ink-inverse: #1A1A1A; --pc-border: rgba(255, 255, 255, 0.15); --pc-border-hover: rgba(255, 255, 255, 0.30); --pc-border-strong: rgba(255, 255, 255, 0.35); --pc-border-muted: rgba(128, 128, 128, 0.15); --pc-bg-subtle: rgba(255, 255, 255, 0.02); --pc-bg-hover: rgba(255, 255, 255, 0.05); --pc-bg-raised: #252525; --pc-tok-comment: rgba(255, 255, 255, 0.4); --pc-tok-string: #90c098; --pc-tok-keyword: #bda6e6; --pc-tok-number: #d3ab6f; --pc-tok-builtin: #93c3da; } /* ========================================================================== Large displays The shell stopped growing at 1400px, so anything past roughly a 1500px viewport sat as a fixed column in the middle of the screen with dead margin either side — most obvious above 1920, which is where this was reported. These widen it in steps rather than letting it run to 100vw. What gains the room is the chrome and the card grids, which are `auto-fill` and genuinely use it; the reading measures (chat messages, prose) stay near their comfortable width, because a line of text that keeps growing stops being readable. The sidebar grows a little alongside so it stays in proportion rather than looking stranded. ========================================================================== */ @media (min-width: 1680px) { :root { --pc-content-max: 1560px; --pc-sidebar-w: 264px; --pc-gap: 26px; } } @media (min-width: 1920px) { :root { --pc-content-max: 1780px; --pc-sidebar-w: 280px; --pc-gap: 28px; } } @media (min-width: 2400px) { :root { --pc-content-max: 2200px; --pc-sidebar-w: 300px; --pc-gap: 30px; } } @media (min-width: 3000px) { :root { --pc-content-max: 2700px; --pc-sidebar-w: 320px; --pc-gap: 32px; } }