feat(tokens): add earth theme

docs/rfcs/multi-style-architecture.md

@@ -420,7 +420,7 @@ The end state should support runtime switching without remounting components.
 Minimum contract:
 
 ```ts
-type ThemeName = "morandi" | "brand";
+type ThemeName = "morandi" | "earth" | "brand";
 type SkinName = "minimal" | "glass" | "pixel";
 type MotionPackName = "calm" | "snappy" | "spring";
 type MotionAccessibilityName = "system" | "full" | "reduced";

packages/tokens/src/index.ts

@@ -1,4 +1,4 @@
-export const themeNames = ["morandi", "brand"] as const;
+export const themeNames = ["morandi", "earth", "brand"] as const;
 export type ThemeName = (typeof themeNames)[number];
 
 export const defaultTheme: ThemeName = "morandi";
@@ -8,6 +8,10 @@ export const themeDetails = {
     label: "Morandi",
     note: "Muted dusty neutrals with a calm, understated luxury mood"
   },
+  earth: {
+    label: "Earth",
+    note: "Organic browns, terracotta warmth, olive depth, and sandstone calm"
+  },
   brand: {
     label: "Brand",
     note: "Verdant accent scaffold"

packages/tokens/src/tokens.css

@@ -69,6 +69,36 @@
   --color-overlay: rgb(84 76 70 / 0.42);
 }
 
+[data-theme="earth"] {
+  color-scheme: light;
+  --color-background: color-mix(in oklch, #d4c5a9 34%, white 66%);
+  --color-foreground: #4f3c27;
+  --color-surface: color-mix(in oklch, #d4c5a9 52%, white 48%);
+  --color-surface-strong: color-mix(in oklch, #c4956a 24%, white 76%);
+  --color-surface-contrast: #6f5437;
+  --color-border: color-mix(in oklch, #8b6f47 40%, white 60%);
+  --color-border-strong: #8b6f47;
+  --color-input: var(--color-border);
+  --color-ring: #a0522d;
+  --color-primary: #8b6f47;
+  --color-primary-foreground: #f7f1e7;
+  --color-secondary: #6b7c3f;
+  --color-secondary-foreground: #f4efe6;
+  --color-muted: color-mix(in oklch, #c4956a 18%, white 82%);
+  --color-muted-foreground: #78644a;
+  --color-accent: #a0522d;
+  --color-accent-foreground: #f8efe6;
+  --color-success: #72864c;
+  --color-success-foreground: #f5f1e8;
+  --color-warning: #c4956a;
+  --color-warning-foreground: #4a3826;
+  --color-destructive: #93492b;
+  --color-destructive-foreground: #faefe7;
+  --color-card: color-mix(in oklch, var(--color-surface) 84%, white 16%);
+  --color-card-foreground: var(--color-foreground);
+  --color-overlay: rgb(79 60 39 / 0.4);
+}
+
 [data-theme="brand"] {
   color-scheme: light;
   --color-background: oklch(0.972 0.016 172);