From b02c464960a065c3761bb1599bd6ed6b078c71ea Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Thu, 4 Dec 2025 19:47:24 +1000
Subject: [PATCH] fix: add CSS variables for status colors to playground
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added error, warning, success, and info color CSS variables to
playground globals.css so that Badge component variants display
with correct colors. The error variant will now show red as expected.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/playground/src/app/globals.css | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/apps/playground/src/app/globals.css b/apps/playground/src/app/globals.css
index b5c61c9..13600ad 100644
--- a/apps/playground/src/app/globals.css
+++ b/apps/playground/src/app/globals.css
@@ -1,3 +1,30 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  /* Light mode (default) */
+  :root {
+    /* Status Colors */
+    --error: 0 65% 51%; /* Red */
+    --error-foreground: 0 0% 100%; /* White text */
+    --warning: 36 100% 50%; /* Amber */
+    --warning-foreground: 0 0% 100%;
+    --success: 152 57% 45%; /* Green */
+    --success-foreground: 0 0% 100%;
+    --info: 210 100% 56%; /* Blue */
+    --info-foreground: 0 0% 100%;
+  }
+
+  /* Dark mode */
+  .dark {
+    --error: 0 65% 58%; /* Brighter red for dark mode */
+    --error-foreground: 0 0% 100%;
+    --warning: 36 100% 55%;
+    --warning-foreground: 0 0% 100%;
+    --success: 152 57% 50%;
+    --success-foreground: 0 0% 100%;
+    --info: 210 100% 60%;
+    --info-foreground: 0 0% 100%;
+  }
+}