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

web/eslint-plugins/design-tokens/no-hardcoded-in-svelte.js

@@ -37,9 +37,9 @@ export default {
 			hardcodedZIndex:
 				"Hardcoded z-index '{{value}}'. Use a var(--z-...) token.",
 			hardcodedBreakpoint:
-				"Hardcoded breakpoint '{{value}}' in @media. Use the @custom-media name instead: declare `@custom-media --bp-* (...)` in preview.css and write `@media (--bp-*)`.",
+				"Hardcoded breakpoint '{{value}}' in @media. Use the @custom-media name instead: declare `@custom-media --bp-* (...)` in app.css and write `@media (--bp-*)`.",
 			varInMedia:
-				"var() inside @media '{{value}}'. Custom properties do not resolve in media queries — declare `@custom-media --bp-* (...)` in preview.css and use `@media (--bp-*)`.",
+				"var() inside @media '{{value}}'. Custom properties do not resolve in media queries — declare `@custom-media --bp-* (...)` in app.css and use `@media (--bp-*)`.",
 			colorMix:
 				"color-mix() in component ({{value}}). Tokenize the result in the design CSS file.",
 		},

web/eslint-plugins/design-tokens/no-token-definition-in-svelte.js

@@ -2,7 +2,7 @@
 // A custom property may be DEFINED inside a component's <style> block, but its
 // value must not introduce a design primitive: a raw color literal (hex/rgb/
 // oklch/named) or an absolute size (px/rem/em). This keeps the design surface
-// (colors/sizes) a single source of truth in preview.css, while still allowing
+// (colors/sizes) a single source of truth in app.css, while still allowing
 // local DERIVED variables built from tokens: var(--...), calc(), unitless
 // ratios (--ratio: 1.5) — those are legitimate component-local state.
 
@@ -24,7 +24,7 @@ export default {
 		},
 		messages: {
 			tokenPrimitive:
-				"Custom property '{{prop}}' defines a primitive '{{value}}' in a component. Move it to preview.css or derive it from tokens via var()/calc().",
+				"Custom property '{{prop}}' defines a primitive '{{value}}' in a component. Move it to app.css or derive it from tokens via var()/calc().",
 		},
 		schema: [],
 	},

web/eslint-plugins/design-tokens/no-undefined-in-svelte.js

@@ -1,6 +1,6 @@
 // Rule: NO UNDEFINED CSS-TOKEN USAGE IN COMPONENTS.
 // A var(--...) referenced in a Svelte <style> block must exist in the design
-// token file (src/preview.css) or be a local override defined in the same
+// token file (src/app.css) or be a local override defined in the same
 // component. Catches typos and drop-in tokens that were never added to the
 // "single source of truth".
 
@@ -16,7 +16,7 @@ const VAR_REF_RE = /var\(\s*(--[\w-]+)/g;
 const definedCache = new Map();
 
 function getDefinedTokens(cwd) {
-	const file = resolve(cwd, "src/preview.css");
+	const file = resolve(cwd, "src/app.css");
 	if (!existsSync(file)) return null;
 	if (definedCache.has(file)) return definedCache.get(file);
 
@@ -34,13 +34,13 @@ export default {
 		type: "problem",
 		docs: {
 			description:
-				"Disallow referencing a CSS variable that is not defined in preview.css (design token file) and not defined locally in the component.",
+				"Disallow referencing a CSS variable that is not defined in app.css (design token file) and not defined locally in the component.",
 			category: "Design tokens",
 			recommended: true,
 		},
 		messages: {
 			undefinedToken:
-				"CSS variable '{{token}}' is not defined in preview.css and not locally in this component.",
+				"CSS variable '{{token}}' is not defined in app.css and not locally in this component.",
 		},
 		schema: [],
 	},

web/eslint-plugins/index.js

@@ -3,7 +3,7 @@
  *
  * Goal: a single source of truth for design. In Svelte components, hardcoded
  * colors and sizes are banned; everything must come from CSS variables (tokens
- * in preview.css). Rules inspect the postcss AST of Svelte <style> blocks
+ * in app.css). Rules inspect the postcss AST of Svelte <style> blocks
  * exposed by svelte-eslint-parser.
  */
 import noCategoryMismatch from "./design-tokens/no-category-mismatch.js";