Feat: First Commit + Project Scaffolding + Initialize Styling

License Added
2026-06-13 07:21:40 +01:00
commit fa45b46cd2
38 changed files with 7849 additions and 0 deletions
@@ -0,0 +1,28 @@
+/* Path: Frontend/src/styles/themes/_dark.scss */
+
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --color-canvas: var(--gray-900);
+  --color-surface: hsl(220 23% 14% / 0.92);
+  --color-surface-muted: hsl(220 22% 12% / 0.96);
+  --color-surface-hover: hsl(220 18% 20% / 0.96);
+  --color-border: hsl(220 12% 26% / 0.9);
+  --color-border-strong: hsl(220 12% 38% / 0.9);
+
+  --color-text: hsl(210 20% 96%);
+  --color-text-muted: hsl(220 12% 70%);
+
+  --color-accent: hsl(217 91% 67%);
+  --color-accent-strong: hsl(218 88% 61%);
+  --color-accent-soft: hsl(217 91% 67% / 0.18);
+  --color-accent-contrast: hsl(220 28% 10%);
+
+  --color-success: hsl(154 55% 48%);
+  --color-danger: hsl(0 72% 62%);
+  --color-warning: hsl(36 100% 60%);
+  --color-focus-ring: hsl(217 91% 67% / 0.65);
+
+  --shadow-soft: 0 16px 40px hsl(220 40% 3% / 0.45);
+  --shadow-strong: 0 24px 60px hsl(220 40% 3% / 0.55);
+}
@@ -0,0 +1,26 @@
+/* Path: Frontend/src/styles/themes/_light.scss */
+
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+
+  --color-canvas: var(--gray-50);
+  --color-surface: hsl(0 0% 100% / 0.9);
+  --color-surface-muted: var(--gray-0);
+  --color-surface-hover: var(--gray-100);
+  --color-border: hsl(220 15% 85% / 0.9);
+  --color-border-strong: hsl(220 12% 70% / 0.9);
+
+  --color-text: var(--gray-800);
+  --color-text-muted: var(--gray-500);
+
+  --color-accent: var(--blue-500);
+  --color-accent-strong: var(--blue-600);
+  --color-accent-soft: hsl(218 88% 61% / 0.12);
+  --color-accent-contrast: hsl(0 0% 100%);
+
+  --color-success: var(--green-500);
+  --color-danger: var(--red-500);
+  --color-warning: var(--amber-500);
+  --color-focus-ring: hsl(221 83% 53% / 0.55);
+}
@@ -0,0 +1,54 @@
+/* Path: Frontend/src/styles/themes/_tokens.scss */
+
+:root {
+  --gray-0: hsl(210 20% 99%);
+  --gray-50: hsl(220 20% 97%);
+  --gray-100: hsl(220 16% 93%);
+  --gray-200: hsl(220 13% 87%);
+  --gray-300: hsl(220 11% 75%);
+  --gray-400: hsl(220 9% 58%);
+  --gray-500: hsl(220 10% 45%);
+  --gray-600: hsl(220 14% 34%);
+  --gray-700: hsl(220 18% 24%);
+  --gray-800: hsl(220 22% 16%);
+  --gray-900: hsl(220 28% 10%);
+
+  --blue-400: hsl(218 88% 61%);
+  --blue-500: hsl(221 83% 53%);
+  --blue-600: hsl(224 76% 48%);
+
+  --green-500: hsl(154 60% 40%);
+  --red-500: hsl(0 72% 54%);
+  --amber-500: hsl(36 100% 50%);
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  --radius-sm: 0.375rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.875rem;
+  --radius-xl: 1.25rem;
+  --radius-pill: 999px;
+
+  --shadow-soft: 0 12px 32px hsl(220 30% 10% / 0.08);
+  --shadow-strong: 0 20px 48px hsl(220 30% 10% / 0.16);
+
+  --z-base: 1;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 400;
+  --z-modal: 500;
+  --z-toast: 600;
+
+  --motion-duration-fast: 140ms;
+  --motion-duration-base: 220ms;
+  --motion-duration-slow: 320ms;
+  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+}