/* * The site's design tokens and document-level defaults. * * Everything else on this site is a `css(...)` mixin from `@remix-run/ui`, rendered into each * page's . Two things cannot be, and they are both here. * * The cascade order, first. Generated `css(...)` rules — this site's mixins and the styling * first-party remix/ui components carry — all land in the native `rmx` layer, and a mixin cannot * choose its layer. So: * * base this file. Tokens, the box model, and the defaults for elements nobody styles by hand. * Being before `rmx`, every one is a default a component may override without a fight, * which is why nothing below needs :where() or !important. * rmx Remix's. Every mixin on this site, and what remix/ui components bring with them. * app empty, and named anyway: where a rule goes that has to beat a component's own styling * on purpose. Unlayered CSS would also win, but it would win by accident. * * Layers rank by where they are first named, and this file is linked at the top of while * Remix appends its styles just before — so naming all three here settles the order. * * The token values, second. Remix supplies behaviour and a little component styling, not a theme, * so the palette, typography and radii are the app's. They live here as custom properties because * light and dark swap between two sets of them; `lib/tokens.ts` is the TypeScript side, and holds * the names rather than a second copy of the values. */ @layer base, rmx, app; @layer base { :root { color-scheme: light dark; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 0.3rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; /* The measure every band of the shell lines up to. */ --content-width: 44rem; --bg: #ffffff; --fg: #1f2937; --muted: #6b7280; --accent: #2563eb; /* Text on an --accent background — dark in dark mode, where the accent is light. */ --on-accent: #ffffff; --border: #e5e7eb; /* A raised-but-quiet surface: cards, code, callouts. */ --card: #f9fafb; } @media (prefers-color-scheme: dark) { :root { --bg: #0b0f19; --fg: #e5e7eb; --muted: #9ca3af; --accent: #60a5fa; --on-accent: #0b0f19; --border: #1f2937; --card: #111827; } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; /* * `clip`, not `hidden`: it stops a full-bleed child from dragging a horizontal scrollbar * behind the vertical one — `50vw` counts the scrollbar's width, the viewport does not — * without making this a scroll container, so `position: sticky` inside still works and * vertical scrolling is untouched. */ overflow-x: clip; font-family: var(--font-sans); line-height: 1.6; color: var(--fg); background: var(--bg); } a { color: var(--accent); } h1 { font-size: 2rem; line-height: 1.2; margin-top: 0; } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--card); padding: 0.1rem 0.35rem; border-radius: var(--radius-sm); } }