/* ========================================================================== 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 app frame is full-bleed (the sidebar is pinned to the viewport's left edge — see .app in app.css); --pc-content-max caps the *content column* only. These steps widen that cap and the sidebar on larger screens: card grids are `auto-fill` and genuinely use the room, while reading measures (chat messages, prose) stay near their comfortable width, because a line of text that keeps growing stops being readable. ========================================================================== */ @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; } }