first commit

src/app/globals.css

@@ -1,26 +1,45 @@
-@import "tailwindcss";
+/*
+ * Layer order is load-bearing — it maps to the Astryx cascade:
+ *   reset → tailwind base → astryx component styles → our theme tokens →
+ *   app components → tailwind utilities (must win last).
+ *
+ * NOTE: we import OUR built theme, not @astryxdesign/theme-neutral/theme.css.
+ * Astryx theme CSS is @scope-gated on the theme *name*, so neutral's rules
+ * would match nothing under [data-astryx-theme="loyaly"]. loyaly.css already
+ * contains everything it inherits from neutral.
+ */
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer reset, theme, base, astryx-base, astryx-theme, components, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import '@astryxdesign/core/reset.css';
+@import '@astryxdesign/core/astryx.css';
+@import '../theme/loyaly.css';
+@import '@astryxdesign/core/tailwind-theme.css';
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+/*
+ * Paint the canvas before React mounts. AppShell sets these itself once it
+ * renders, but this guarantees the very first frame — and any non-shell route
+ * such as an error boundary — is already black rather than white.
+ */
+html {
+  background-color: var(--color-background-body);
+  color-scheme: dark;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@layer components {
+  /* Kill switch for our own CSS transitions. Framer Motion is handled by
+     <MotionConfig reducedMotion="user">, recharts by useChartMotion(). */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
   }
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}