@vanduo-oss/framework 1.3.9 → 1.4.1

package/css/utilities/shadow.css

@@ -7,26 +7,26 @@
   /* Fibonacci Shadow System
    * Y-offset and blur follow Fibonacci pairs: 1/2, 2/3, 3/5, 8/13, 13/21, 21/34
    * Each level steps through the Fibonacci sequence */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.1), 0 5px 8px -5px rgba(0, 0, 0, 0.1);
-  --shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.25);
-  --shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.05);
+  --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+  --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.1), 0 5px 8px -5px rgba(0, 0, 0, 0.1);
+  --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.25);
+  --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.05);
 
   /* Colored Shadows (Fibonacci: 3/5 offset/blur)
    * Colors match Open Color palette defined in colors.css */
-  --shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.2), 0 2px 3px -2px rgba(34, 184, 207, 0.1);
-  --shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.2), 0 2px 3px -2px rgba(64, 192, 87, 0.1);
-  --shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.2), 0 2px 3px -2px rgba(250, 176, 5, 0.1);
-  --shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.2), 0 2px 3px -2px rgba(250, 82, 82, 0.1);
+  --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.2), 0 2px 3px -2px rgba(34, 184, 207, 0.1);
+  --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.2), 0 2px 3px -2px rgba(64, 192, 87, 0.1);
+  --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.2), 0 2px 3px -2px rgba(250, 176, 5, 0.1);
+  --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.2), 0 2px 3px -2px rgba(250, 82, 82, 0.1);
 
   /* Glow Effect Colors - uses color scale variables */
-  --glow-primary-color: var(--primary-3);
-  --glow-success-color: var(--success-3);
-  --glow-warning-color: var(--warning-3);
-  --glow-error-color: var(--danger-3);
+  --vd-glow-primary-color: var(--vd-primary-3);
+  --vd-glow-success-color: var(--vd-success-3);
+  --vd-glow-warning-color: var(--vd-warning-3);
+  --vd-glow-error-color: var(--vd-danger-3);
 }
 
 /* Shadow Utilities */
@@ -35,48 +35,48 @@
 }
 
 .vd-shadow-sm {
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--vd-shadow-sm);
 }
 
 .vd-shadow {
-  box-shadow: var(--shadow);
+  box-shadow: var(--vd-shadow);
 }
 
 .vd-shadow-md {
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--vd-shadow-md);
 }
 
 .vd-shadow-lg {
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--vd-shadow-lg);
 }
 
 .vd-shadow-xl {
-  box-shadow: var(--shadow-xl);
+  box-shadow: var(--vd-shadow-xl);
 }
 
 .vd-shadow-2xl {
-  box-shadow: var(--shadow-2xl);
+  box-shadow: var(--vd-shadow-2xl);
 }
 
 .vd-shadow-inner {
-  box-shadow: var(--shadow-inner);
+  box-shadow: var(--vd-shadow-inner);
 }
 
 /* Colored Shadow Utilities */
 .vd-shadow-primary {
-  box-shadow: var(--shadow-primary);
+  box-shadow: var(--vd-shadow-primary);
 }
 
 .vd-shadow-success {
-  box-shadow: var(--shadow-success);
+  box-shadow: var(--vd-shadow-success);
 }
 
 .vd-shadow-warning {
-  box-shadow: var(--shadow-warning);
+  box-shadow: var(--vd-shadow-warning);
 }
 
 .vd-shadow-error {
-  box-shadow: var(--shadow-error);
+  box-shadow: var(--vd-shadow-error);
 }
 
 /* Elevation Levels (for Material Design-like system) */
@@ -85,23 +85,23 @@
 }
 
 .elevation-1 {
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--vd-shadow-sm);
 }
 
 .elevation-2 {
-  box-shadow: var(--shadow);
+  box-shadow: var(--vd-shadow);
 }
 
 .elevation-3 {
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--vd-shadow-md);
 }
 
 .elevation-4 {
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--vd-shadow-lg);
 }
 
 .elevation-5 {
-  box-shadow: var(--shadow-xl);
+  box-shadow: var(--vd-shadow-xl);
 }
 
 /* ═════════════════════════════════════════════════════════════════════════
@@ -114,7 +114,7 @@
 .vd-glow-primary,
 .glow,
 .glow-primary {
-  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));
 }
 
 /* Glow on Hover */
@@ -129,70 +129,70 @@
 .vd-hover-glow-primary:hover,
 .hover-glow:hover,
 .hover-glow-primary:hover {
-  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));
 }
 
 /* Glow Color Variants */
 .vd-glow-success,
 .glow-success {
-  box-shadow: 0 0 15px 0 var(--glow-success-color, rgba(64, 192, 87, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-success-color, rgba(64, 192, 87, 0.25));
 }
 
 .vd-glow-warning,
 .glow-warning {
-  box-shadow: 0 0 15px 0 var(--glow-warning-color, rgba(250, 176, 5, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-warning-color, rgba(250, 176, 5, 0.25));
 }
 
 .vd-glow-error,
 .glow-error {
-  box-shadow: 0 0 15px 0 var(--glow-error-color, rgba(250, 82, 82, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-error-color, rgba(250, 82, 82, 0.25));
 }
 
 /* Glow Hover Variants */
 .vd-hover-glow-success:hover,
 .hover-glow-success:hover {
-  box-shadow: 0 0 15px 0 var(--glow-success-color, rgba(64, 192, 87, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-success-color, rgba(64, 192, 87, 0.25));
 }
 
 .vd-hover-glow-warning:hover,
 .hover-glow-warning:hover {
-  box-shadow: 0 0 15px 0 var(--glow-warning-color, rgba(250, 176, 5, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-warning-color, rgba(250, 176, 5, 0.25));
 }
 
 .vd-hover-glow-error:hover,
 .hover-glow-error:hover {
-  box-shadow: 0 0 15px 0 var(--glow-error-color, rgba(250, 82, 82, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-error-color, rgba(250, 82, 82, 0.25));
 }
 
 /* Glow Intensity Variants */
 .vd-glow-sm,
 .glow-sm {
-  box-shadow: 0 0 8px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.15));
+  box-shadow: 0 0 8px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.15));
 }
 
 .vd-glow-md,
 .glow-md {
-  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));
 }
 
 .vd-glow-lg,
 .glow-lg {
-  box-shadow: 0 0 22px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.35));
+  box-shadow: 0 0 22px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.35));
 }
 
 .vd-hover-glow-sm:hover,
 .hover-glow-sm:hover {
-  box-shadow: 0 0 8px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.15));
+  box-shadow: 0 0 8px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.15));
 }
 
 .vd-hover-glow-md:hover,
 .hover-glow-md:hover {
-  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));
 }
 
 .vd-hover-glow-lg:hover,
 .hover-glow-lg:hover {
-  box-shadow: 0 0 22px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.35));
+  box-shadow: 0 0 22px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.35));
 }
 
 /* Dark Mode Shadow Overrides
@@ -200,44 +200,44 @@
  * Matches both explicit dark theme and system preference */
 [data-theme="dark"],
 :root:not([data-theme]) {
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);
-  --shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
-  --shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);
-  --shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);
-  --shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);
-  --shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);
-  --shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);
-  --shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);
-  --shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);
+  --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+  --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);
+  --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
+  --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);
+  --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);
+  --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);
+  --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);
+  --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);
+  --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);
+  --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);
 
   /* Glow Effect Colors - Dark Mode (lighter shades for visibility) */
-  --glow-primary-color: var(--primary-4);
-  --glow-success-color: var(--success-4);
-  --glow-warning-color: var(--warning-4);
-  --glow-error-color: var(--danger-4);
+  --vd-glow-primary-color: var(--vd-primary-4);
+  --vd-glow-success-color: var(--vd-success-4);
+  --vd-glow-warning-color: var(--vd-warning-4);
+  --vd-glow-error-color: var(--vd-danger-4);
 }
 
 /* System preference dark mode (when no explicit theme is set) */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-    --shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
-    --shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);
-    --shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);
-    --shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);
-    --shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);
-    --shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);
-    --shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);
-    --shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);
+    --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+    --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);
+    --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
+    --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);
+    --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);
+    --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);
+    --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);
+    --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);
+    --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);
+    --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);
 
     /* Glow Effect Colors - Dark Mode */
-    --glow-primary-color: var(--primary-4);
-    --glow-success-color: var(--success-4);
-    --glow-warning-color: var(--warning-4);
-    --glow-error-color: var(--danger-4);
+    --vd-glow-primary-color: var(--vd-primary-4);
+    --vd-glow-success-color: var(--vd-success-4);
+    --vd-glow-warning-color: var(--vd-warning-4);
+    --vd-glow-error-color: var(--vd-danger-4);
   }
 }

package/css/utilities/table.css

@@ -5,20 +5,20 @@
 
 :root {
   /* Table Colors */
-  --table-bg: var(--color-white);
-  --table-border-color: var(--border-color);
-  --table-striped-bg: var(--bg-secondary);
-  --table-hover-bg: rgba(0, 0, 0, 0.075);
-  --table-active-bg: var(--color-primary-alpha-10);
+  --vd-table-bg: var(--vd-color-white);
+  --vd-table-border-color: var(--vd-border-color);
+  --vd-table-striped-bg: var(--vd-bg-secondary);
+  --vd-table-hover-bg: rgba(0, 0, 0, 0.075);
+  --vd-table-active-bg: var(--vd-color-primary-alpha-10);
 
   /* Table Spacing (Fibonacci) */
-  --table-padding-y: 0.5rem;
+  --vd-table-padding-y: 0.5rem;
   /* 8px  - fib */
-  --table-padding-x: 0.8125rem;
+  --vd-table-padding-x: 0.8125rem;
   /* 13px - fib (13/8 ~ phi) */
-  --table-padding-y-sm: 0.3125rem;
+  --vd-table-padding-y-sm: 0.3125rem;
   /* 5px  - fib */
-  --table-padding-x-sm: 0.5rem;
+  --vd-table-padding-x-sm: 0.5rem;
   /* 8px  - fib (8/5 ~ phi) */
 }
 
@@ -27,8 +27,8 @@
 .table {
   width: 100%;
   margin-bottom: 1rem;
-  color: var(--text-primary);
-  background-color: var(--table-bg);
+  color: var(--vd-text-primary);
+  background-color: var(--vd-table-bg);
   border-collapse: collapse;
 }
 
@@ -36,35 +36,35 @@
 .vd-table td,
 .table th,
 .table td {
-  padding: var(--table-padding-y) var(--table-padding-x);
+  padding: var(--vd-table-padding-y) var(--vd-table-padding-x);
   vertical-align: middle;
-  border-top: 1px solid var(--table-border-color);
+  border-top: 1px solid var(--vd-table-border-color);
 }
 
 .vd-table thead th,
 .table thead th {
   vertical-align: bottom;
-  border-bottom: 2px solid var(--table-border-color);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
+  border-bottom: 2px solid var(--vd-table-border-color);
+  font-weight: var(--vd-font-weight-semibold);
+  color: var(--vd-text-primary);
 }
 
 .vd-table tbody+tbody,
 .table tbody+tbody {
-  border-top: 2px solid var(--table-border-color);
+  border-top: 2px solid var(--vd-table-border-color);
 }
 
 /* Table Variants */
 .vd-table-bordered,
 .table-bordered {
-  border: 1px solid var(--table-border-color);
+  border: 1px solid var(--vd-table-border-color);
 }
 
 .vd-table-bordered th,
 .vd-table-bordered td,
 .table-bordered th,
 .table-bordered td {
-  border: 1px solid var(--table-border-color);
+  border: 1px solid var(--vd-table-border-color);
 }
 
 .vd-table-bordered thead th,
@@ -87,19 +87,19 @@
 
 .vd-table-striped tbody tr:nth-of-type(odd),
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--table-striped-bg);
+  background-color: var(--vd-table-striped-bg);
 }
 
 .vd-table-hover tbody tr:hover,
 .table-hover tbody tr:hover {
-  background-color: var(--table-hover-bg);
+  background-color: var(--vd-table-hover-bg);
 }
 
 .vd-table-sm th,
 .vd-table-sm td,
 .table-sm th,
 .table-sm td {
-  padding: var(--table-padding-y-sm) var(--table-padding-x-sm);
+  padding: var(--vd-table-padding-y-sm) var(--vd-table-padding-x-sm);
 }
 
 /* Table Cell States */
@@ -109,7 +109,7 @@
 .table-active,
 .table-active>th,
 .table-active>td {
-  background-color: var(--table-active-bg);
+  background-color: var(--vd-table-active-bg);
 }
 
 .vd-table-primary,
@@ -118,8 +118,8 @@
 .table-primary,
 .table-primary>th,
 .table-primary>td {
-  color: var(--color-white);
-  background-color: var(--color-primary);
+  color: var(--vd-color-white);
+  background-color: var(--vd-color-primary);
 }
 
 .vd-table-secondary,
@@ -128,8 +128,8 @@
 .table-secondary,
 .table-secondary>th,
 .table-secondary>td {
-  color: var(--color-white);
-  background-color: var(--color-secondary);
+  color: var(--vd-color-white);
+  background-color: var(--vd-color-secondary);
 }
 
 .vd-table-success,
@@ -138,8 +138,8 @@
 .table-success,
 .table-success>th,
 .table-success>td {
-  color: var(--color-white);
-  background-color: var(--color-success);
+  color: var(--vd-color-white);
+  background-color: var(--vd-color-success);
 }
 
 .vd-table-warning,
@@ -148,8 +148,8 @@
 .table-warning,
 .table-warning>th,
 .table-warning>td {
-  color: var(--color-gray-900);
-  background-color: var(--color-warning);
+  color: var(--vd-color-gray-900);
+  background-color: var(--vd-color-warning);
 }
 
 .vd-table-error,
@@ -158,8 +158,8 @@
 .table-error,
 .table-error>th,
 .table-error>td {
-  color: var(--color-white);
-  background-color: var(--color-error);
+  color: var(--vd-color-white);
+  background-color: var(--vd-color-error);
 }
 
 .vd-table-info,
@@ -168,23 +168,23 @@
 .table-info,
 .table-info>th,
 .table-info>td {
-  color: var(--color-white);
-  background-color: var(--color-info);
+  color: var(--vd-color-white);
+  background-color: var(--vd-color-info);
 }
 
 /* Table Sections */
 .vd-table-header,
 .table-header,
 thead {
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
 }
 
 .vd-table-header th,
 .table-header th,
 thead th {
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--vd-font-weight-semibold);
   text-transform: uppercase;
-  font-size: var(--font-size-sm);
+  font-size: var(--vd-font-size-sm);
   letter-spacing: 0.05em;
 }
 
@@ -196,8 +196,8 @@ tbody {
 .vd-table-footer,
 .table-footer,
 tfoot {
-  background-color: var(--bg-secondary);
-  font-weight: var(--font-weight-semibold);
+  background-color: var(--vd-bg-secondary);
+  font-weight: var(--vd-font-weight-semibold);
 }
 
 /* Responsive Table Wrapper */
@@ -287,8 +287,8 @@ tfoot {
 /* Dark Table Variant */
 .vd-table-dark,
 .table-dark {
-  color: var(--color-white);
-  background-color: var(--color-gray-800);
+  color: var(--vd-color-white);
+  background-color: var(--vd-color-gray-800);
 }
 
 .vd-table-dark th,
@@ -315,36 +315,36 @@ tfoot {
 /* Dark Mode Table Overrides */
 [data-theme="dark"] .vd-table,
 [data-theme="dark"] .table {
-  --table-bg: var(--bg-primary);
-  --table-border-color: var(--border-color);
-  --table-striped-bg: var(--bg-secondary);
-  --table-hover-bg: rgba(255, 255, 255, 0.05);
+  --vd-table-bg: var(--vd-bg-primary);
+  --vd-table-border-color: var(--vd-border-color);
+  --vd-table-striped-bg: var(--vd-bg-secondary);
+  --vd-table-hover-bg: rgba(255, 255, 255, 0.05);
 
-  background-color: var(--table-bg);
-  color: var(--text-primary);
+  background-color: var(--vd-table-bg);
+  color: var(--vd-text-primary);
 }
 
 [data-theme="dark"] .vd-table th,
 [data-theme="dark"] .vd-table td,
 [data-theme="dark"] .table th,
 [data-theme="dark"] .table td {
-  border-color: var(--table-border-color);
+  border-color: var(--vd-table-border-color);
 }
 
 [data-theme="dark"] .vd-table thead th,
 [data-theme="dark"] .table thead th {
-  border-color: var(--table-border-color);
-  color: var(--text-primary);
+  border-color: var(--vd-table-border-color);
+  color: var(--vd-text-primary);
 }
 
 [data-theme="dark"] .vd-table-striped tbody tr:nth-of-type(odd),
 [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--table-striped-bg);
+  background-color: var(--vd-table-striped-bg);
 }
 
 [data-theme="dark"] .vd-table thead,
 [data-theme="dark"] thead {
-  background-color: var(--bg-secondary);
+  background-color: var(--vd-bg-secondary);
 }
 
 /* Dark mode support for system preference */
@@ -352,35 +352,35 @@ tfoot {
 
   :root:not([data-theme]) .vd-table,
   :root:not([data-theme]) .table {
-    --table-bg: var(--bg-primary);
-    --table-border-color: var(--border-color);
-    --table-striped-bg: var(--bg-secondary);
-    --table-hover-bg: rgba(255, 255, 255, 0.05);
+    --vd-table-bg: var(--vd-bg-primary);
+    --vd-table-border-color: var(--vd-border-color);
+    --vd-table-striped-bg: var(--vd-bg-secondary);
+    --vd-table-hover-bg: rgba(255, 255, 255, 0.05);
 
-    background-color: var(--table-bg);
-    color: var(--text-primary);
+    background-color: var(--vd-table-bg);
+    color: var(--vd-text-primary);
   }
 
   :root:not([data-theme]) .vd-table th,
   :root:not([data-theme]) .vd-table td,
   :root:not([data-theme]) .table th,
   :root:not([data-theme]) .table td {
-    border-color: var(--table-border-color);
+    border-color: var(--vd-table-border-color);
   }
 
   :root:not([data-theme]) .vd-table thead th,
   :root:not([data-theme]) .table thead th {
-    border-color: var(--table-border-color);
-    color: var(--text-primary);
+    border-color: var(--vd-table-border-color);
+    color: var(--vd-text-primary);
   }
 
   :root:not([data-theme]) .vd-table-striped tbody tr:nth-of-type(odd),
   :root:not([data-theme]) .table-striped tbody tr:nth-of-type(odd) {
-    background-color: var(--table-striped-bg);
+    background-color: var(--vd-table-striped-bg);
   }
 
   :root:not([data-theme]) .vd-table thead,
   :root:not([data-theme]) thead {
-    background-color: var(--bg-secondary);
+    background-color: var(--vd-bg-secondary);
   }
 }