Rename to generic color names (black, gray, orange, etc.) instead of Ash-specific names

ash.css

@@ -1,69 +1,78 @@
-/* Ash palette - all colors used in the application come from this file */
+/* Generic color system - simple to customize for other themes.
+   Each color has light/dark variants interpolated from the base color. */
+
 :root {
-    /* Base surfaces */
-    --ash-void: #100f12;
-    --ash-panel: #1c1b1f;
-    --ash-raised: #29282c;
-    --ash-border: #3a383d;
-    --ash-mid: #54514f;
-    --ash-ash: #6d6a63;
-    --ash-stone: #999187;
-    --ash-icon: #b0a89a;
-    --ash-bone: #e6dfd1;
-    --ash-chalk: #f3ede1;
+    /* Surface grays (darkest to lightest) */
+    --black: #100f12;
+    --black-light: #161320;
+    --black-dark: #080710;
+
+    --dark: #1c1b1f;
+    --dark-light: #232125;
+    --dark-dark: #14131a;
+
+    --gray-darker: #29282c;
+    --gray-darker-light: #323035;
+    --gray-darker-dark: #1e1d22;
+
+    --gray-dark: #3a383d;
+    --gray-dark-light: #47463f;
+    --gray-dark-dark: #2a282d;
+
+    --gray: #54514f;
+    --gray-light: #605e59;
+    --gray-dark: #44443f;
+
+    --gray-light: #6d6a63;
+    --gray-light-light: #83807d;
+    --gray-light-dark: #605e59;
+
+    --stone: #999187;
+    --stone-light: #a59d91;
+    --stone-dark: #837f7d;
+
+    --icon: #b0a89a;
+    --icon-light: #cac3b9;
+    --icon-dark: #97908a;
+
+    --bone: #e6dfd1;
+    --bone-light: #ede9d9;
+    --bone-dark: #c8c2b6;
+
+    --chalk: #f3ede1;
+    --chalk-light: #fbf7eb;
+    --chalk-dark: #d8d3c8;
 
     /* Accent colors */
-    --ash-ember: #e0914f;
-    --ash-gold: #d6b46a;
-    --ash-blood: #c15c46;
-    --ash-rust: #a86a48;
-    --ash-rot: #b47e99;
-    --ash-moss: #8f9a5c;
-    --ash-steel: #7c9aa1;
-    --ash-steel-light: #a3bcc1;
-    --ash-violet: #a585ac;
+    --orange: #e0914f;
+    --orange-light: #e7a76f;
+    --orange-dark: #b5773b;
 
-    /* Light variants (interpolated 50% to next lighter) */
-    --ash-void-light: #161320;
-    --ash-panel-light: #232125;
-    --ash-raised-light: #323035;
-    --ash-border-light: #47463f;
-    --ash-mid-light: #615e59;
-    --ash-ash-light: #83807d;
-    --ash-stone-light: #a59d91;
-    --ash-icon-light: #cac3b9;
-    --ash-bone-light: #ede9d9;
-    --ash-chalk-light: #fdfaeb;
+    --yellow: #d6b46a;
+    --yellow-light: #e3c483;
+    --yellow-dark: #b6914d;
 
-    /* Dark variants (interpolated 50% to next darker) */
-    --ash-void-dark: #080710;
-    --ash-panel-dark: #16151a;
-    --ash-raised-dark: #232226;
-    --ash-border-dark: #2f2d35;
-    --ash-mid-dark: #44443f;
-    --ash-ash-dark: #605e59;
-    --ash-stone-dark: #837f7d;
-    --ash-icon-dark: #a59d91;
-    --ash-bone-dark: #cac3b9;
-    --ash-chalk-dark: #ede9d9;
+    --red: #c15c46;
+    --red-light: #d17661;
+    --red-dark: #9a4636;
 
-    /* Accent light variants */
-    --ash-ember-light: #e7a76f;
-    --ash-gold-light: #e3c483;
-    --ash-blood-light: #d17661;
-    --ash-rust-light: #c0856a;
-    --ash-rot-light: #cf9eb2;
-    --ash-moss-light: #a6b27b;
-    --ash-steel-light-light: #c5d4d8;
-    --ash-violet-light: #c0a7c6;
+    --brown: #a86a48;
+    --brown-light: #c0856a;
+    --brown-dark: #834e2f;
 
-    /* Accent dark variants */
-    --ash-ember-dark: #b5773b;
-    --ash-gold-dark: #b6914d;
-    --ash-blood-dark: #9a4636;
-    --ash-rust-dark: #834e2f;
-    --ash-rot-dark: #875a76;
-    --ash-moss-dark: #6b774a;
-    --ash-steel-dark: #5b7a83;
-    --ash-violet-dark: #806388;
+    --pink: #b47e99;
+    --pink-light: #cf9eb2;
+    --pink-dark: #875a76;
+
+    --green: #8f9a5c;
+    --green-light: #a6b27b;
+    --green-dark: #6b774a;
+
+    --blue: #7c9aa1;
+    --blue-light: #a3bcc1;
+    --blue-dark: #5b7a83;
+
+    --purple: #a585ac;
+    --purple-light: #c0a7c6;
+    --purple-dark: #806388;
 }