refactor: set root layout, rename css, fix links in lint rules \ etc

web/scripts/check-tokens.mjs

@@ -1,5 +1,5 @@
 // Design-token audit, one command: theme parity, hct-only color authorship and
-// unused-token warnings over src/preview.css.
+// unused-token warnings over src/app.css.
 //
 // Usage: pnpm --dir web exec node scripts/check-tokens.mjs
 // Exit code 1 when a failing check (parity or color authorship) reports.
@@ -36,10 +36,10 @@ async function main() {
 
 	const unused = checkUnused(root);
 	if (unused.length > 0) {
-		console.log("\nUnused tokens (defined in preview.css, never used):");
+		console.log("\nUnused tokens (defined in app.css, never used):");
 		for (const token of unused) console.log(`  ${token}`);
 	} else {
-		console.log("All preview.css tokens are used somewhere.");
+		console.log("All app.css tokens are used somewhere.");
 	}
 
 	if (failed) process.exitCode = 1;

web/scripts/token-audit/colors.mjs

@@ -1,4 +1,4 @@
-// Color authorship: every color value in preview.css must be authored as hct()
+// Color authorship: every color value in app.css must be authored as hct()
 // — literals AND derived forms (hct(from var(...) h c t) with channel math) —
 // so the whole palette is computed through HCT channels and output as sRGB by
 // the postcss-hct plugin. Exceptions: the seed tokens --brand-main/--brand-alt

web/scripts/token-audit/helpers.mjs

@@ -1,4 +1,4 @@
-// Shared plumbing for the design-token audits: reading preview.css, scanning
+// Shared plumbing for the design-token audits: reading app.css, scanning
 // for var() usages across src, and the color/form predicates the checks use.
 
 import { readdirSync, readFileSync, statSync } from "node:fs";
@@ -7,7 +7,7 @@ import { join } from "node:path";
 import { fileURLToPath } from "node:url";
 import postcss from "postcss";
 
-export const FILE = new URL("../../src/preview.css", import.meta.url);
+export const FILE = new URL("../../src/app.css", import.meta.url);
 const SRC_DIR = fileURLToPath(new URL("../../src/", import.meta.url));
 
 // A var(--x) REFERENCE anywhere in the app (primary argument only).
@@ -65,7 +65,7 @@ export function collectTokens(root, selector) {
 	return map;
 }
 
-// Parse preview.css once and hand out the postcss root plus both theme maps.
+// Parse app.css once and hand out the postcss root plus both theme maps.
 export async function parsePreview() {
 	const css = await readFile(FILE, "utf8");
 	const root = postcss.parse(css);

web/scripts/token-audit/unused.mjs

@@ -1,4 +1,4 @@
-// Unused tokens: defined in preview.css but never referenced via var()
+// Unused tokens: defined in app.css but never referenced via var()
 // anywhere in src. A dead token is not the single source of truth — it's dust.
 // Reported as a warning; it does not fail the run.