From 46ec03161b300ea240f33db3d5513a7c5c1d234a Mon Sep 17 00:00:00 2001
From: prakash meena <prakash.meena@example.com>
Date: Tue, 2 Jun 2026 04:29:57 +0530
Subject: [PATCH] fix: replace hardcoded rgba() colors in cards.css with CSS
 variables

- Added --ease-glass-bg, --ease-glass-border for glass card background/border
- Added --ease-color-primary-alpha, --ease-color-success-alpha,
  --ease-color-danger-alpha for info/alert card backgrounds
- Updated .ease-card-glass to use CSS variables instead of hardcoded
  rgba(255,255,255) and #ffffff
- Updated .ease-card-info, .ease-card-success-bg, .ease-card-danger-bg
  to use alpha-channel variables

Closes #840
---
 components/cards.css | 12 ++++++------
 core/variables.css   |  7 +++++++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/cards.css b/components/cards.css
index e316a45..3a66f8e 100644
--- a/components/cards.css
+++ b/components/cards.css
@@ -108,11 +108,11 @@
 /* ── Glass Card (glassmorphism) ────────────────────────────── */
 
 .ease-card-glass {
-  background: rgba(255, 255, 255, 0.12);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: var(--ease-glass-bg);
+  border: 1px solid var(--ease-glass-border);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  color: #ffffff;
+  color: var(--ease-color-text);
 }
 
 /* ── Color Accent Cards ────────────────────────────────────── */
@@ -171,18 +171,18 @@
 /* ── Info / Alert-style Cards ──────────────────────────────── */
 
 .ease-card-info {
-  background-color: rgba(108, 99, 255, 0.06);
+  background-color: var(--ease-color-primary-alpha);
   border-color: var(--ease-color-primary-light);
   color: var(--ease-color-primary-dark);
 }
 
 .ease-card-success-bg {
-  background-color: rgba(34, 197, 94, 0.06);
+  background-color: var(--ease-color-success-alpha);
   border-color: var(--ease-color-success-light);
 }
 
 .ease-card-danger-bg {
-  background-color: rgba(239, 68, 68, 0.06);
+  background-color: var(--ease-color-danger-alpha);
   border-color: var(--ease-color-danger-light);
 }
 
diff --git a/core/variables.css b/core/variables.css
index 0df78ce..9e65fd6 100644
--- a/core/variables.css
+++ b/core/variables.css
@@ -47,6 +47,13 @@
   --ease-color-text:    var(--ease-color-neutral-800);
   --ease-color-muted:   var(--ease-color-neutral-500);
 
+  /* ── Alpha Channel Colors ────────────────────────────────── */
+  --ease-glass-bg:            color-mix(in srgb, var(--ease-color-surface) 12%, transparent);
+  --ease-glass-border:        color-mix(in srgb, var(--ease-color-surface) 20%, transparent);
+  --ease-color-primary-alpha: color-mix(in srgb, var(--ease-color-primary) 6%, transparent);
+  --ease-color-success-alpha: color-mix(in srgb, var(--ease-color-success) 6%, transparent);
+  --ease-color-danger-alpha:  color-mix(in srgb, var(--ease-color-danger) 6%, transparent);
+
   /* ── Spacing Scale ─────────────────────────────────────── */
   --ease-space-1:  0.25rem;   /*  4px */
   --ease-space-2:  0.5rem;    /*  8px */