From 32f96e4c6fbf4a16a6afee5f2f146ccb89bda0f2 Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 19:07:43 +0100
Subject: [PATCH] Replace hardcoded color values with glass design tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/main.css               | 2 +-
 frontend/src/components/CreateEventFab.vue | 2 +-
 frontend/src/components/EmptyState.vue     | 2 +-
 frontend/src/components/EventCard.vue      | 2 +-
 frontend/src/views/EventDetailView.vue     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 061f642..224fd1c 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -138,7 +138,7 @@ body::before {
 }
 
 .form-field::placeholder {
-  color: #999;
+  color: var(--color-text-muted);
   font-weight: 400;
 }
 
diff --git a/frontend/src/components/CreateEventFab.vue b/frontend/src/components/CreateEventFab.vue
index f10489d..03bbc91 100644
--- a/frontend/src/components/CreateEventFab.vue
+++ b/frontend/src/components/CreateEventFab.vue
@@ -18,7 +18,7 @@ import { RouterLink } from 'vue-router'
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  color: #fff;
+  color: var(--color-text-on-gradient);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/components/EmptyState.vue b/frontend/src/components/EmptyState.vue
index 4b6a148..e870945 100644
--- a/frontend/src/components/EmptyState.vue
+++ b/frontend/src/components/EmptyState.vue
@@ -43,7 +43,7 @@ import { RouterLink } from 'vue-router'
   font-family: inherit;
   font-size: 1rem;
   font-weight: 700;
-  color: #fff;
+  color: var(--color-text-on-gradient);
   text-align: center;
 }
 
diff --git a/frontend/src/components/EventCard.vue b/frontend/src/components/EventCard.vue
index 5ddeb8d..868720b 100644
--- a/frontend/src/components/EventCard.vue
+++ b/frontend/src/components/EventCard.vue
@@ -144,7 +144,7 @@ function onTouchEnd() {
 
 .event-card__badge--organizer {
   background: var(--color-accent);
-  color: #fff;
+  color: var(--color-text-on-gradient);
 }
 
 .event-card__badge--attendee {
diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue
index 6fb22f6..840f667 100644
--- a/frontend/src/views/EventDetailView.vue
+++ b/frontend/src/views/EventDetailView.vue
@@ -470,7 +470,7 @@ onMounted(fetchEvent)
   font-family: inherit;
   font-size: 1rem;
   font-weight: 700;
-  color: #fff;
+  color: var(--color-text-on-gradient);
   text-align: center;
   border: none;
   cursor: pointer;