-tailwind.js — outside the brand layer).
* - Type stacks and motion durations.
* - Radii.
* - --brand-tagline.
*
* Cascade contract: any app that paints chrome via brand tokens
* (var(--surface-0), var(--text-1), var(--accent-primary), ...)
* dark-modes for free. Apps that hard-code colors (identity-bound
* apps in BRAND.md "Tier-3 carve-outs" and HOSDL.md "Tier
* classification") stay as-is by design. */
:root[data-theme='dark'] {
/* Native scrollbars + default form controls render dark. See the
* matching `color-scheme: light` on :root above. */
color-scheme: dark;
--surface-0: #0e1217;
--surface-1: #161b22;
--surface-2: #1f262f;
--hairline: #2a3138;
--hairline-strong: #3a434b;
--hairline-accent: rgba(96, 165, 250, 0.4);
--text-1: #e6edf3; /* AAA, ~14.7:1 on surface-1 */
--text-2: #aab1b9; /* AA, ~7.7:1 on surface-1 */
--text-3: #8b949e; /* AA, ~5.0:1 on surface-1 */
--text-on-accent: #ffffff;
--accent-blue: #4f8cff;
--accent-red: #ff6961;
--accent-yellow: #f5c45e;
--accent-green: #4cc26a;
--accent-primary: #4f8cff;
--accent-primary-hover: #75a5ff;
--accent-primary-soft: #1a2740;
--accent-primary-bg: #4f8cff;
--accent-primary-bg-hover: #75a5ff;
--success: #56d364;
--danger: #f85149;
--warning: #f0b73f;
--success-soft: #1a2e1f;
--danger-soft: #2d1b1d;
--warning-soft: #2d2418;
--cat-system: var(--accent-blue);
--cat-game: var(--accent-red);
--cat-utility: var(--accent-green);
--cat-entertainment: var(--accent-yellow);
--cat-system-soft: #1a2740;
--cat-game-soft: #2d1b1d;
--cat-utility-soft: #1a2e1f;
--cat-entertainment-soft: #2d2418;
--cat-system-hairline: rgba(79, 140, 255, 0.4);
--cat-game-hairline: rgba(255, 105, 97, 0.4);
--cat-utility-hairline: rgba(76, 194, 106, 0.4);
--cat-entertainment-hairline: rgba(245, 196, 94, 0.45);
--scrim: rgba(0, 0, 0, 0.65);
--scrim-strong: rgba(0, 0, 0, 0.8);
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
--shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.65);
--focus-ring-inner: var(--accent-blue);
--focus-ring-outer: rgba(79, 140, 255, 0.32);
}
/* prefers-color-scheme: dark — apply the same overrides when the OS is
* dark AND the user hasn't explicitly picked Light from the home toggle.
* Block must mirror :root[data-theme="dark"] above; if you edit one,
* edit the other (single source of dark-mode truth). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
color-scheme: dark;
--surface-0: #0e1217;
--surface-1: #161b22;
--surface-2: #1f262f;
--hairline: #2a3138;
--hairline-strong: #3a434b;
--hairline-accent: rgba(96, 165, 250, 0.4);
--text-1: #e6edf3;
--text-2: #aab1b9;
--text-3: #8b949e;
--text-on-accent: #ffffff;
--accent-blue: #4f8cff;
--accent-red: #ff6961;
--accent-yellow: #f5c45e;
--accent-green: #4cc26a;
--accent-primary: #4f8cff;
--accent-primary-hover: #75a5ff;
--accent-primary-soft: #1a2740;
--accent-primary-bg: #4f8cff;
--accent-primary-bg-hover: #75a5ff;
--success: #56d364;
--danger: #f85149;
--warning: #f0b73f;
--success-soft: #1a2e1f;
--danger-soft: #2d1b1d;
--warning-soft: #2d2418;
--cat-system-soft: #1a2740;
--cat-game-soft: #2d1b1d;
--cat-utility-soft: #1a2e1f;
--cat-entertainment-soft: #2d2418;
--cat-system-hairline: rgba(79, 140, 255, 0.4);
--cat-game-hairline: rgba(255, 105, 97, 0.4);
--cat-utility-hairline: rgba(76, 194, 106, 0.4);
--cat-entertainment-hairline: rgba(245, 196, 94, 0.45);
--scrim: rgba(0, 0, 0, 0.65);
--scrim-strong: rgba(0, 0, 0, 0.8);
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
--shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.65);
--focus-ring-outer: rgba(79, 140, 255, 0.32);
}
}
/* ─── prefers-contrast: more ─────────────────────────────────────────
* Bump --text-3 to the higher-contrast tier and thicken hairlines
* for users who need it. Light- and dark-tier hairlines tracked
* separately because the dark hairline range starts darker. */
@media (prefers-contrast: more) {
:root {
--text-3: var(--text-2);
--hairline: #b8b8b0;
--hairline-strong: #888880;
}
:root[data-theme='dark'] {
--text-3: var(--text-2);
--hairline: #4a5159;
--hairline-strong: #6a737d;
}
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--text-3: var(--text-2);
--hairline: #4a5159;
--hairline-strong: #6a737d;
}
}
/* ─── prefers-reduced-motion ─────────────────────────────────────────
* Strict: kill all token-driven transitions and all running animations.
* Components that read from --motion-* automatically inherit; the
* universal-selector override catches everything else. */
@media (prefers-reduced-motion: reduce) {
:root {
--motion-hover: 0ms linear;
--motion-modal: 0ms linear;
--motion-slow: 0ms linear;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ─── forced-colors (Windows High Contrast) ──────────────────────────
* Step out of the way: let the user's OS palette drive everything. */
@media (forced-colors: active) {
:root {
--surface-0: Canvas;
--surface-1: Canvas;
--surface-2: Canvas;
--hairline: CanvasText;
--hairline-strong: CanvasText;
--text-1: CanvasText;
--text-2: CanvasText;
--text-3: CanvasText;
--text-on-accent: HighlightText;
--accent-primary: LinkText;
--accent-primary-bg: Highlight;
--focus-ring-inner: Highlight;
--focus-ring-outer: CanvasText;
}
}
/* ─── Page-level opt-in ──────────────────────────────────────────────
* Pages add class="hos-page" to or to inherit the new
* paper-cream surface, dark text, and quirky-engineering type stack.
*
* The new brand is gradient-free. Where the previous version painted
* a faint dual-glow violet wash to lift the page, the new version
* just paints solid --surface-0 with a 1px solid hairline at top —
* a subtle Google/HN-style header-rule that signals "engineering
* project page." Apps that want a more saturated header bar add
* a child