Card design-token improvements

Author: Ohswedd

css/components/card.css

@@ -6,18 +6,18 @@
   background-color: var(--neutral-50);
   color: var(--neutral-900);
   border-radius: var(--radius-lg);
-  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-lg);
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   position: relative;
   width: 100%;
   max-width: 400px;
-  margin: var(--space-4) auto; /* Auto-centered margin */
+  margin: var(--space-4) auto;
 }
 
 .card:hover {
   transform: translateY(-4px);
-  box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-xl);
 }
 
 /* Card Header */
@@ -78,13 +78,35 @@
   color: var(--neutral-50);
 }
 
-/* Variants */
-.card[data-variant="primary"] { background-color: var(--primary-light); color: var(--neutral-900); }
-.card[data-variant="secondary"] { background-color: var(--secondary-light); color: var(--neutral-900); }
-.card[data-variant="success"] { background-color: var(--success); color: var(--neutral-50); }
-.card[data-variant="danger"] { background-color: var(--danger); color: var(--neutral-50); }
-.card[data-variant="warning"] { background-color: var(--warning); color: var(--neutral-900); }
-.card[data-variant="info"] { background-color: var(--info); color: var(--neutral-50); }
+/* Color Variants */
+.card[data-variant="primary"] {
+  background-color: var(--primary-bg);
+  color: var(--primary-text);
+}
+.card[data-variant="secondary"] {
+  background-color: var(--secondary-bg);
+  color: var(--secondary-text);
+}
+.card[data-variant="success"] {
+  background-color: var(--success-bg);
+  color: var(--success-text);
+}
+.card[data-variant="danger"] {
+  background-color: var(--danger-bg);
+  color: var(--danger-text);
+}
+.card[data-variant="warning"] {
+  background-color: var(--warning-bg);
+  color: var(--warning-text);
+}
+.card[data-variant="info"] {
+  background-color: var(--info-bg);
+  color: var(--info-text);
+}
+.card[data-variant="accent"] {
+  background-color: var(--accent-bg);
+  color: var(--accent-text);
+}
 
 /* Outline Style */
 .card[data-variant="outline"] {
@@ -115,9 +137,9 @@
   font-weight: bold;
   padding: 0.25rem 0.75rem;
   border-radius: var(--radius-full);
-  background-color: var(--label-color, var(--primary));
-  color: var(--neutral-50);
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  background-color: var(--label-color, var(--primary-bg));
+  color: var(--primary-text);
+  box-shadow: var(--shadow-md);
 }
 
 .card[data-label="fixed"] .card-label {
@@ -156,8 +178,12 @@
 }
 
 /* Shadow Variants */
-.card[data-shadow="light"] { box-shadow: var(--shadow-sm); }
-.card[data-shadow="heavy"] { box-shadow: var(--shadow-xl); }
+.card[data-shadow="light"] {
+  box-shadow: var(--shadow-sm);
+}
+.card[data-shadow="heavy"] {
+  box-shadow: var(--shadow-xl);
+}
 
 /* Responsive Adjustments */
 @media (max-width: 600px) {