From 51ab99fc613e7282b7918d4d82d33863e019ce43 Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Thu, 12 Mar 2026 23:24:58 +0100
Subject: [PATCH] Introduce --color-danger-solid-* CSS variables and replace
 hardcoded values

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

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 0cc8812..c01d654 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -25,6 +25,9 @@
   --color-danger-bg-strong: rgba(220, 38, 38, 0.2);
   --color-danger-border: rgba(220, 38, 38, 0.3);
   --color-danger-border-strong: rgba(220, 38, 38, 0.4);
+  --color-danger-solid: #d32f2f;
+  --color-danger-solid-hover: #b71c1c;
+  --color-danger-solid-text: #fff;
 
   /* Glass system */
   --color-glass: rgba(255, 255, 255, 0.1);
@@ -214,7 +217,7 @@ textarea.form-field {
 
 /* Error message */
 .field-error {
-  color: #fff;
+  color: var(--color-danger-solid);
   font-size: 0.875rem;
   font-weight: 600;
   padding-left: 0.25rem;
@@ -334,7 +337,7 @@ textarea.form-field {
 }
 
 .rsvp-form__field-error {
-  color: #d32f2f;
+  color: var(--color-danger-solid);
   font-size: 0.875rem;
   font-weight: 600;
   padding-left: 0.25rem;
diff --git a/frontend/src/components/ConfirmDialog.vue b/frontend/src/components/ConfirmDialog.vue
index b72ac5b..f39b33c 100644
--- a/frontend/src/components/ConfirmDialog.vue
+++ b/frontend/src/components/ConfirmDialog.vue
@@ -139,8 +139,8 @@ watch(
 }
 
 .confirm-dialog__btn--confirm {
-  background: #d32f2f;
-  color: #fff;
+  background: var(--color-danger-solid);
+  color: var(--color-danger-solid-text);
 }
 
 .confirm-dialog-enter-active,
diff --git a/frontend/src/components/EventCard.vue b/frontend/src/components/EventCard.vue
index 19895a5..e236b26 100644
--- a/frontend/src/components/EventCard.vue
+++ b/frontend/src/components/EventCard.vue
@@ -175,7 +175,7 @@ function onTouchEnd() {
 }
 
 .event-card__delete:hover {
-  color: #d32f2f;
+  color: var(--color-danger-solid);
   background: rgba(211, 47, 47, 0.08);
 }
 
diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue
index a893634..38efccd 100644
--- a/frontend/src/views/EventDetailView.vue
+++ b/frontend/src/views/EventDetailView.vue
@@ -677,15 +677,15 @@ onMounted(fetchEvent)
   font-family: inherit;
   font-size: 1rem;
   font-weight: 700;
-  color: #fff;
-  background: #d32f2f;
+  color: var(--color-danger-solid-text);
+  background: var(--color-danger-solid);
   border: none;
   cursor: pointer;
   transition: background 0.15s ease;
 }
 
 .cancel-form__confirm:hover {
-  background: #b71c1c;
+  background: var(--color-danger-solid-hover);
 }
 
 .cancel-form__confirm:disabled {