From c3680a97f1bc22b45422dafc3d4d65b5a3357028 Mon Sep 17 00:00:00 2001
From: Leopoldadmin <leopold.hammerschmidt@media-on.de>
Date: Mon, 22 Jun 2026 05:54:17 +0000
Subject: [PATCH] feat: Add theme.css with design tokens for dark/light themes

---
 frontend/src/styles/theme.css | 71 +++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 frontend/src/styles/theme.css

diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
new file mode 100644
index 0000000..1107b84
--- /dev/null
+++ b/frontend/src/styles/theme.css
@@ -0,0 +1,71 @@
+:root {
+  /* Light theme colors */
+  --background-light: #ffffff;
+  --surface-light: #f5f5f5;
+  --primary-light: #1a73e8;
+  --secondary-light: #5f6368;
+  --text-light: #202124;
+  --border-light: #dadce0;
+  --hover-light: #f1f3f4;
+
+  /* Dark theme colors */
+  --background-dark: #121212;
+  --surface-dark: #1e1e1e;
+  --primary-dark: #8ab4f8;
+  --secondary-dark: #9aa0a6;
+  --text-dark: #e8eaed;
+  --border-dark: #5f6368;
+  --hover-dark: #272727;
+
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+
+  /* Fonts */
+  --font-family: 'Roboto', 'Arial', sans-serif;
+  --font-size-sm: 12px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  /* Borders */
+  --border-radius: 4px;
+  --border-width: 1px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+  /* Transitions */
+  --transition-fast: 0.1s ease;
+  --transition-normal: 0.2s ease;
+  --transition-slow: 0.3s ease;
+}
+
+/* Light theme */
+[data-theme="light"] {
+  --background: var(--background-light);
+  --surface: var(--surface-light);
+  --primary: var(--primary-light);
+  --secondary: var(--secondary-light);
+  --text: var(--text-light);
+  --border: var(--border-light);
+  --hover: var(--hover-light);
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  --background: var(--background-dark);
+  --surface: var(--surface-dark);
+  --primary: var(--primary-dark);
+  --secondary: var(--secondary-dark);
+  --text: var(--text-dark);
+  --border: var(--border-dark);
+  --hover: var(--hover-dark);
+}
\ No newline at end of file