/* QuickChat design tokens Discord's density and surface layering, carrying the alexroper.dev blue rather than Discord's blurple. */ :root { /* Surface layers, darkest at the outside edge — the depth cue that makes a three-column chat app read as three columns. */ --bg-deep: #0e0e11; --bg-side: #161619; --bg-main: #1c1c20; --bg-raise: #232329; --bg-hover: #2a2a31; --bg-active: #33333c; --bg-input: #131316; /* Ink */ --ink: #e8e7eb; --ink-soft: #a9a7b0; --ink-faint: #74727c; --ink-dim: #55535c; /* Accent — alexroper.dev's blue, lifted for contrast on dark */ --accent: #7ea8d4; --accent-bright: #a9c5df; --accent-strong: #4d7fb5; --accent-wash: #1d2733; /* Status */ --positive: #43b581; --warning: #d9a441; --danger: #d9534f; --danger-wash: #2b1a1a; /* Presence */ --state-online: #43b581; --state-away: #d9a441; --state-offline: #5c5a63; /* Lines */ --line: #2b2b32; --line-soft: #212127; /* Type */ --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --t-xs: .6875rem; --t-sm: .8125rem; --t-md: .9375rem; --t-lg: 1.0625rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; /* Space */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-full: 999px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35); --shadow: 0 4px 16px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6); --nav-w: 4.5rem; --side-w: 15rem; --rail-w: 14rem; --top-h: 3rem; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg-main); color: var(--ink); font-family: var(--font); font-size: var(--t-md); line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } .icon { flex: none; display: block; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } kbd { font-family: var(--font-mono); font-size: .9em; background: var(--bg-raise); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 0 .3em; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg-deep); border-radius: var(--r-full); } ::-webkit-scrollbar-thumb:hover { background: #000; } * { scrollbar-width: thin; scrollbar-color: var(--bg-deep) transparent; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ================= Appearance engine hooks ================= js/theme.js sets these attributes on . Values are covered above by :root, so nothing here needs a fallback. */ /* Explicit in-app opt-out, mirroring the OS-level query above rather than duplicating its declarations by hand so the two can't drift apart. */ html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* Font family swap. Space Grotesk (the default) stays the fallback chain's first link only for --font itself; these replace it outright. */ html[data-font="system"] { --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="mono"] { --font: var(--font-mono); } /* Wide, open letterforms with clearly distinct b/d/p/q and I/l/1 — the properties that actually help dyslexic readers. OpenDyslexic itself can't be used: it isn't on Google Fonts, and the CSP allows no other font host, so this is a system stack chosen for the same characteristics. Sans-serif on purpose — serif faces are generally worse for this, not better. */ html[data-font="reading"] { --font: Verdana, Tahoma, "DejaVu Sans", "Trebuchet MS", ui-sans-serif, sans-serif; }