@howssatoshi/quantumcss 1.4.2 → 1.5.0

package/src/styles/quantum-base.css

@@ -1,15 +1,16 @@
 /*!
  * QuantumCSS + Starlight UI
  * Advanced utility-first framework with ethereal cosmic aesthetics
- * Version: 1.4.2
+ * Version: 1.5.0
  * Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap';
 
 /* CSS Custom Properties (Design Tokens) */
 :root {
   color-scheme: dark;
+
   /* Colors */
   --color-primary: #3b82f6;
   --color-primary-50: #eff6ff;
@@ -22,7 +23,6 @@
   --color-primary-700: #1d4ed8;
   --color-primary-800: #1e40af;
   --color-primary-900: #1e3a8a;
-
   --color-secondary: #64748b;
   --color-success: #10b981;
   --color-warning: #f59e0b;
@@ -61,11 +61,11 @@
   --radius-full: 9999px;
 
   /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
 
   /* Animation */
   --duration-75: 75ms;
@@ -76,7 +76,6 @@
   --duration-500: 500ms;
   --duration-700: 700ms;
   --duration-1000: 1000ms;
-
   --ease-linear: linear;
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -87,23 +86,26 @@
   --color-starlight-peach: #ffb38a;
   --color-starlight-orange: #ff7e5f;
   --color-starlight-deep: #08081a;
-  --color-starlight-glow: rgba(0, 212, 255, 0.35);
+  --color-starlight-glow: rgb(0 212 255 / 35%);
+  
+  /* Semantic Background Colors */
+  --bg-primary: var(--color-starlight-deep);
   
   /* Semantic Text Colors */
   --text-primary: #f1f5f9;
-  --text-secondary: rgba(241, 245, 249, 0.7);
-  --text-muted: rgba(241, 245, 249, 0.45);
+  --text-secondary: rgb(241 245 249 / 70%);
+  --text-muted: rgb(241 245 249 / 45%);
   
   /* Light Mode Palette */
   --light-bg: #f1f5f9;
   --light-text: #1e293b;
   --light-text-muted: #64748b;
-  --light-card-bg: #ffffff;
-  --light-card-border: rgba(0, 0, 0, 0.06);
+  --light-card-bg: #fff;
+  --light-card-border: rgb(0 0 0 / 6%);
 
   /* Glassmorphism */
-  --glass-bg: rgba(255, 255, 255, 0.03);
-  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-bg: rgb(255 255 255 / 3%);
+  --glass-border: rgb(255 255 255 / 10%);
   --glass-blur: blur(16px);
 
   /* Transitions */
@@ -115,11 +117,11 @@
 /* High Contrast (Accessibility) Mode Support */
 @media (prefers-contrast: more) {
   :root {
-    --color-starlight-blue: #0088cc; /* Darkened for better contrast on light */
+    --color-starlight-blue: #08c; /* Darkened for better contrast on light */
     --color-starlight-orange: #d14d33;
-    --glass-bg: rgba(255, 255, 255, 0.1);
-    --glass-border: rgba(255, 255, 255, 0.4);
-    --text-muted: rgba(241, 245, 249, 0.8);
+    --glass-bg: rgb(255 255 255 / 10%);
+    --glass-border: rgb(255 255 255 / 40%);
+    --text-muted: rgb(241 245 249 / 80%);
   }
 }
 
@@ -165,7 +167,7 @@
 html {
   line-height: 1.6;
   -webkit-text-size-adjust: 100%;
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -287,8 +289,14 @@ textarea {
 .gap-5 { gap: var(--space-5); }
 .gap-6 { gap: var(--space-6); }
 .gap-8 { gap: var(--space-8); }
-
-/* Spacing Utilities */
+.gap-10 { gap: var(--space-10); }
+.gap-12 { gap: var(--space-12); }
+.gap-16 { gap: var(--space-16); }
+.gap-20 { gap: var(--space-20); }
+.gap-24 { gap: var(--space-24); }
+.gap-32 { gap: var(--space-32); }
+
+/* Spacing Utilities - All Sides */
 .m-0 { margin: var(--space-0); }
 .m-1 { margin: var(--space-1); }
 .m-2 { margin: var(--space-2); }
@@ -297,11 +305,113 @@ textarea {
 .m-5 { margin: var(--space-5); }
 .m-6 { margin: var(--space-6); }
 .m-8 { margin: var(--space-8); }
+.m-10 { margin: var(--space-10); }
+.m-12 { margin: var(--space-12); }
+.m-16 { margin: var(--space-16); }
+.m-20 { margin: var(--space-20); }
+.m-24 { margin: var(--space-24); }
+.m-32 { margin: var(--space-32); }
 .m-auto { margin: auto; }
 
+/* Margin - X Axis */
+.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
+.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
+.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
+.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
+.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
+.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
+.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
+.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
+.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
+.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
+.mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); }
+.mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); }
+.mx-24 { margin-left: var(--space-24); margin-right: var(--space-24); }
+.mx-32 { margin-left: var(--space-32); margin-right: var(--space-32); }
 .mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Margin - Y Axis */
+.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
+.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
+.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
+.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
+.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
+.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
+.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
+.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
+.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
+.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
+.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
+.my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); }
+.my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); }
+.my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32); }
 .my-auto { margin-top: auto; margin-bottom: auto; }
 
+/* Margin - Top */
+.mt-0 { margin-top: var(--space-0); }
+.mt-1 { margin-top: var(--space-1); }
+.mt-2 { margin-top: var(--space-2); }
+.mt-3 { margin-top: var(--space-3); }
+.mt-4 { margin-top: var(--space-4); }
+.mt-5 { margin-top: var(--space-5); }
+.mt-6 { margin-top: var(--space-6); }
+.mt-8 { margin-top: var(--space-8); }
+.mt-10 { margin-top: var(--space-10); }
+.mt-12 { margin-top: var(--space-12); }
+.mt-16 { margin-top: var(--space-16); }
+.mt-20 { margin-top: var(--space-20); }
+.mt-24 { margin-top: var(--space-24); }
+.mt-32 { margin-top: var(--space-32); }
+
+/* Margin - Right */
+.mr-0 { margin-right: var(--space-0); }
+.mr-1 { margin-right: var(--space-1); }
+.mr-2 { margin-right: var(--space-2); }
+.mr-3 { margin-right: var(--space-3); }
+.mr-4 { margin-right: var(--space-4); }
+.mr-5 { margin-right: var(--space-5); }
+.mr-6 { margin-right: var(--space-6); }
+.mr-8 { margin-right: var(--space-8); }
+.mr-10 { margin-right: var(--space-10); }
+.mr-12 { margin-right: var(--space-12); }
+.mr-16 { margin-right: var(--space-16); }
+.mr-20 { margin-right: var(--space-20); }
+.mr-24 { margin-right: var(--space-24); }
+.mr-32 { margin-right: var(--space-32); }
+
+/* Margin - Bottom */
+.mb-0 { margin-bottom: var(--space-0); }
+.mb-1 { margin-bottom: var(--space-1); }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-3 { margin-bottom: var(--space-3); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-5 { margin-bottom: var(--space-5); }
+.mb-6 { margin-bottom: var(--space-6); }
+.mb-8 { margin-bottom: var(--space-8); }
+.mb-10 { margin-bottom: var(--space-10); }
+.mb-12 { margin-bottom: var(--space-12); }
+.mb-16 { margin-bottom: var(--space-16); }
+.mb-20 { margin-bottom: var(--space-20); }
+.mb-24 { margin-bottom: var(--space-24); }
+.mb-32 { margin-bottom: var(--space-32); }
+
+/* Margin - Left */
+.ml-0 { margin-left: var(--space-0); }
+.ml-1 { margin-left: var(--space-1); }
+.ml-2 { margin-left: var(--space-2); }
+.ml-3 { margin-left: var(--space-3); }
+.ml-4 { margin-left: var(--space-4); }
+.ml-5 { margin-left: var(--space-5); }
+.ml-6 { margin-left: var(--space-6); }
+.ml-8 { margin-left: var(--space-8); }
+.ml-10 { margin-left: var(--space-10); }
+.ml-12 { margin-left: var(--space-12); }
+.ml-16 { margin-left: var(--space-16); }
+.ml-20 { margin-left: var(--space-20); }
+.ml-24 { margin-left: var(--space-24); }
+.ml-32 { margin-left: var(--space-32); }
+
+/* Padding - All Sides */
 .p-0 { padding: var(--space-0); }
 .p-1 { padding: var(--space-1); }
 .p-2 { padding: var(--space-2); }
@@ -310,6 +420,108 @@ textarea {
 .p-5 { padding: var(--space-5); }
 .p-6 { padding: var(--space-6); }
 .p-8 { padding: var(--space-8); }
+.p-10 { padding: var(--space-10); }
+.p-12 { padding: var(--space-12); }
+.p-16 { padding: var(--space-16); }
+.p-20 { padding: var(--space-20); }
+.p-24 { padding: var(--space-24); }
+.p-32 { padding: var(--space-32); }
+
+/* Padding - X Axis */
+.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
+.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
+.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
+.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
+.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
+.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
+.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
+.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
+.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
+.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
+.px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }
+.px-32 { padding-left: var(--space-32); padding-right: var(--space-32); }
+
+/* Padding - Y Axis */
+.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
+.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
+.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
+.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
+.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
+.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
+.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
+.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
+.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
+.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }
+.py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); }
+
+/* Padding - Top */
+.pt-0 { padding-top: var(--space-0); }
+.pt-1 { padding-top: var(--space-1); }
+.pt-2 { padding-top: var(--space-2); }
+.pt-3 { padding-top: var(--space-3); }
+.pt-4 { padding-top: var(--space-4); }
+.pt-5 { padding-top: var(--space-5); }
+.pt-6 { padding-top: var(--space-6); }
+.pt-8 { padding-top: var(--space-8); }
+.pt-10 { padding-top: var(--space-10); }
+.pt-12 { padding-top: var(--space-12); }
+.pt-16 { padding-top: var(--space-16); }
+.pt-20 { padding-top: var(--space-20); }
+.pt-24 { padding-top: var(--space-24); }
+.pt-32 { padding-top: var(--space-32); }
+
+/* Padding - Right */
+.pr-0 { padding-right: var(--space-0); }
+.pr-1 { padding-right: var(--space-1); }
+.pr-2 { padding-right: var(--space-2); }
+.pr-3 { padding-right: var(--space-3); }
+.pr-4 { padding-right: var(--space-4); }
+.pr-5 { padding-right: var(--space-5); }
+.pr-6 { padding-right: var(--space-6); }
+.pr-8 { padding-right: var(--space-8); }
+.pr-10 { padding-right: var(--space-10); }
+.pr-12 { padding-right: var(--space-12); }
+.pr-16 { padding-right: var(--space-16); }
+.pr-20 { padding-right: var(--space-20); }
+.pr-24 { padding-right: var(--space-24); }
+.pr-32 { padding-right: var(--space-32); }
+
+/* Padding - Bottom */
+.pb-0 { padding-bottom: var(--space-0); }
+.pb-1 { padding-bottom: var(--space-1); }
+.pb-2 { padding-bottom: var(--space-2); }
+.pb-3 { padding-bottom: var(--space-3); }
+.pb-4 { padding-bottom: var(--space-4); }
+.pb-5 { padding-bottom: var(--space-5); }
+.pb-6 { padding-bottom: var(--space-6); }
+.pb-8 { padding-bottom: var(--space-8); }
+.pb-10 { padding-bottom: var(--space-10); }
+.pb-12 { padding-bottom: var(--space-12); }
+.pb-16 { padding-bottom: var(--space-16); }
+.pb-20 { padding-bottom: var(--space-20); }
+.pb-24 { padding-bottom: var(--space-24); }
+.pb-32 { padding-bottom: var(--space-32); }
+
+/* Padding - Left */
+.pl-0 { padding-left: var(--space-0); }
+.pl-1 { padding-left: var(--space-1); }
+.pl-2 { padding-left: var(--space-2); }
+.pl-3 { padding-left: var(--space-3); }
+.pl-4 { padding-left: var(--space-4); }
+.pl-5 { padding-left: var(--space-5); }
+.pl-6 { padding-left: var(--space-6); }
+.pl-8 { padding-left: var(--space-8); }
+.pl-10 { padding-left: var(--space-10); }
+.pl-12 { padding-left: var(--space-12); }
+.pl-16 { padding-left: var(--space-16); }
+.pl-20 { padding-left: var(--space-20); }
+.pl-24 { padding-left: var(--space-24); }
+.pl-32 { padding-left: var(--space-32); }
 
 /* Typography Utilities */
 .text-xs { font-size: 0.75rem; line-height: 1rem; }
@@ -341,8 +553,8 @@ textarea {
 .text-warning { color: var(--color-warning); }
 .text-error { color: var(--color-error); }
 .text-neutral { color: var(--color-neutral); }
-.text-white { color: #ffffff; }
-.text-black { color: #000000; }
+.text-white { color: #fff; }
+.text-black { color: #000; }
 
 .bg-primary { background-color: var(--color-primary); }
 .bg-secondary { background-color: var(--color-secondary); }
@@ -350,11 +562,11 @@ textarea {
 .bg-warning { background-color: var(--color-warning); }
 .bg-error { background-color: var(--color-error); }
 .bg-neutral { background-color: var(--color-neutral); }
-.bg-white { background-color: #ffffff; color: #0f172a; }
-.bg-black { background-color: #000000; color: #ffffff; }
+.bg-white { background-color: #fff; color: #0f172a; }
+.bg-black { background-color: #000; color: #fff; }
 
 /* Border Utilities */
-.border-0 { border-width: 0px; }
+.border-0 { border-width: 0; }
 .border { border-width: 1px; }
 .border-2 { border-width: 2px; }
 .border-4 { border-width: 4px; }
@@ -389,11 +601,11 @@ textarea {
 .relative { position: relative; }
 .sticky { position: sticky; }
 
-.inset-0 { inset: 0px; }
-.top-0 { top: 0px; }
-.right-0 { right: 0px; }
-.bottom-0 { bottom: 0px; }
-.left-0 { left: 0px; }
+.inset-0 { inset: 0; }
+.top-0 { top: 0; }
+.right-0 { right: 0; }
+.bottom-0 { bottom: 0; }
+.left-0 { left: 0; }
 
 /* Size Utilities */
 .w-auto { width: auto; }
@@ -455,6 +667,7 @@ textarea {
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border-width: 0;
 }
@@ -467,9 +680,29 @@ textarea {
   margin: 0;
   overflow: visible;
   clip: auto;
+  clip-path: none;
   white-space: normal;
 }
 
+/* Z-Index Utilities */
+.z-auto { z-index: auto; }
+.z-0 { z-index: 0; }
+.z-10 { z-index: 10; }
+.z-20 { z-index: 20; }
+.z-30 { z-index: 30; }
+.z-40 { z-index: 40; }
+.z-50 { z-index: 50; }
+.z-100 { z-index: 100; }
+.z-200 { z-index: 200; }
+.z-300 { z-index: 300; }
+.z-400 { z-index: 400; }
+.z-500 { z-index: 500; }
+.z-600 { z-index: 600; }
+.z-700 { z-index: 700; }
+.z-800 { z-index: 800; }
+.z-900 { z-index: 900; }
+.z-1000 { z-index: 1000; }
+
 /* ====== QUANTUM CSS ENHANCEMENTS ====== */
 
 /* Utility for Quick Prototyping */
@@ -543,17 +776,8 @@ textarea {
 
 
 ::-webkit-scrollbar-thumb { 
-
-
-
   background: linear-gradient(135deg, var(--color-starlight-peach) 0%, var(--color-starlight-blue) 100%); 
-
-
-
   border-radius: 10px;
-
-
-
   border: 2px solid var(--color-starlight-deep);
 
 
@@ -562,24 +786,44 @@ textarea {
 
 
 
-body.light-mode,
+html[data-theme="light"],
+body.light-mode {
+  color-scheme: light;
 
-html.light-mode {
+  --bg-primary: var(--light-bg);
+  --text-primary: var(--light-text);
+  --text-secondary: var(--light-text-muted);
+  --text-muted: var(--light-text-muted);
 
   scrollbar-color: var(--color-starlight-blue) transparent;
+}
 
+html[data-theme="dark"],
+body.dark-mode {
+  color-scheme: dark;
+
+  --bg-primary: var(--color-starlight-deep);
+  --text-primary: #f1f5f9;
 }
 
+/* Force theme colors on body to override template-specific hardcoded styles */
+html[data-theme="light"] body,
+body.light-mode {
+  background: var(--light-bg) !important;
+  color: var(--light-text) !important;
+}
 
+html[data-theme="dark"] body,
+body.dark-mode {
+  background: var(--color-starlight-deep) !important;
+  color: #f1f5f9 !important;
+}
 
-body.light-mode::-webkit-scrollbar-thumb,
 
-body.light-mode ::-webkit-scrollbar-thumb { 
 
+html[data-theme="light"] ::-webkit-scrollbar-thumb { 
   background: linear-gradient(135deg, var(--color-starlight-peach) 40%, var(--color-starlight-blue) 100%);
-
   border-color: var(--light-bg); 
-
 }
 
 
@@ -589,17 +833,8 @@ body.light-mode ::-webkit-scrollbar-thumb {
 
 
 :focus, :focus-visible {
-
-
-
   outline: none;
-
-
-
   box-shadow: 0 0 0 2px var(--color-starlight-deep), 0 0 0 4px var(--color-starlight-blue);
-
-
-
   transition: box-shadow var(--transition-fast);
 
 
@@ -612,14 +847,8 @@ body.light-mode ::-webkit-scrollbar-thumb {
 
 
 
-body.light-mode :focus, body.light-mode :focus-visible {
-
-
-
-  box-shadow: 0 0 0 2px var(--light-bg), 0 0 0 4px rgba(59, 130, 246, 0.4);
-
-
-
+html[data-theme="light"] :focus, html[data-theme="light"] :focus-visible {
+  box-shadow: 0 0 0 2px var(--light-bg), 0 0 0 4px rgb(59 130 246 / 40%);
 }
 
 
@@ -629,25 +858,10 @@ body.light-mode :focus, body.light-mode :focus-visible {
 
 
 body {
-
-
-
   margin: 0;
-
-
-
   min-height: 100vh;
-
-
-
-  background-color: var(--color-starlight-deep);
-
-
-
+  background-color: var(--bg-primary);
   color: var(--text-primary);
-
-
-
   transition: background-color var(--transition-slow), color var(--transition-slow);
 
 
@@ -660,16 +874,6 @@ body {
 
 
 
-body.light-mode,
-html.light-mode {
-  color-scheme: light;
-  background-color: var(--light-bg);
-  color: var(--light-text);
-  --text-primary: var(--light-text);
-  --text-secondary: var(--light-text-muted);
-  --text-muted: var(--light-text-muted);
-}
-
 /* Tactile Active State for all interactive elements */
 button:active, 
 input:active,