diff --git a/index.html b/index.html
index 01a8e17..f5feac7 100644
--- a/index.html
+++ b/index.html
@@ -40,7 +40,8 @@
-
+
+
diff --git a/src/css/app.css b/src/css/app.css
new file mode 100644
index 0000000..a4a0bb1
--- /dev/null
+++ b/src/css/app.css
@@ -0,0 +1,29 @@
+/* Base */
+@import './base/reset.css';
+@import './base/variables.css';
+@import './base/typography.css';
+
+/* Layout */
+@import './layout/header.css';
+@import './layout/footer.css';
+@import './layout/grid.css';
+@import './layout/drawer.css';
+
+/* Components */
+@import './components/cards.css';
+@import './components/badges.css';
+@import './components/modal.css';
+@import './components/forms.css';
+
+/* Pages */
+@import './pages/index.css';
+@import './pages/login.css';
+@import './pages/register.css';
+@import './pages/offline.css';
+
+/* Themes */
+@import './themes/light.css';
+@import './themes/dark.css';
+
+/* Bootstrap overrides */
+@import './bootstrap-overrides.css';
diff --git a/src/css/base/reset.css b/src/css/base/reset.css
new file mode 100644
index 0000000..d388107
--- /dev/null
+++ b/src/css/base/reset.css
@@ -0,0 +1,7 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
diff --git a/src/css/base/typography.css b/src/css/base/typography.css
new file mode 100644
index 0000000..3c605c1
--- /dev/null
+++ b/src/css/base/typography.css
@@ -0,0 +1,37 @@
+/* =========================================
+ Typography Base
+ ========================================= */
+
+body {
+ font-family: var(--font-base);
+ background-color: var(--color-background);
+ color: var(--color-text);
+ line-height: 1.6;
+ transition:
+ background-color 0.3s ease,
+ color 0.3s ease;
+}
+
+/* =========================================
+ Headings
+ ========================================= */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: #000 !important;
+ transition: color 0.3s ease;
+}
+
+/* Dark mode heading overrides */
+body.dark h1,
+body.dark h2,
+body.dark h3,
+body.dark h4,
+body.dark h5,
+body.dark h6 {
+ color: #eee !important;
+}
diff --git a/src/css/base/variables.css b/src/css/base/variables.css
new file mode 100644
index 0000000..0aeb841
--- /dev/null
+++ b/src/css/base/variables.css
@@ -0,0 +1,50 @@
+/* =========================================
+ Base Variables
+ ========================================= */
+
+:root {
+ /* Typography */
+ --font-base:
+ 'Roboto', 'OpenSans', 'Lato', 'Montserrat', 'Noto Sans', 'Oswald',
+ 'Poppins', 'Raleway', system-ui, -apple-system, sans-serif;
+
+ /* Brand Colors */
+ --primary: #4fc3f7;
+
+ /* Light Theme Defaults */
+ --color-background: #fff;
+ --color-text: #000;
+
+ --color-card-bg: #fff;
+ --color-card-text: #000;
+
+ --color-header-bg: #fff;
+ --color-header-text: #000;
+
+ --color-footer-bg: #f8f9fa;
+ --color-footer-text: #000;
+
+ /* Shared UI */
+ --radius: 0.5rem;
+}
+
+/* =========================================
+ System Dark Mode Defaults
+ (prefers-color-scheme: dark)
+ ========================================= */
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color-background: #111;
+ --color-text: #eee;
+
+ --color-card-bg: #222;
+ --color-card-text: #eee;
+
+ --color-header-bg: #222;
+ --color-header-text: #eee;
+
+ --color-footer-bg: #222;
+ --color-footer-text: #eee;
+ }
+}
diff --git a/src/css/bootstrap-overrides.css b/src/css/bootstrap-overrides.css
new file mode 100644
index 0000000..73c1aa8
--- /dev/null
+++ b/src/css/bootstrap-overrides.css
@@ -0,0 +1,50 @@
+/* =========================================
+ Bootstrap Overrides
+ ========================================= */
+
+/* Fix Bootstrap's bg-light in dark mode */
+body.dark.bg-light {
+ background-color: var(--color-background) !important;
+}
+
+/* Fix Bootstrap's bg-white header in dark mode */
+body.dark header.bg-white {
+ background-color: var(--color-header-bg) !important;
+}
+
+/* Override Bootstrap nav-link colors */
+header .nav-link {
+ color: #000 !important;
+}
+
+header .nav-link:hover,
+header .nav-link:focus {
+ color: #000 !important;
+ opacity: 0.7;
+}
+
+body.dark header .nav-link {
+ color: #eee !important;
+}
+
+body.dark header .nav-link:hover,
+body.dark header .nav-link:focus {
+ color: #eee !important;
+}
+
+/* Override Bootstrap anchor colors inside header */
+header a {
+ color: #000 !important;
+}
+
+header a:hover {
+ color: #000 !important;
+}
+
+body.dark header a {
+ color: #eee !important;
+}
+
+body.dark header a:hover {
+ color: #eee !important;
+}
diff --git a/src/css/components/badges.css b/src/css/components/badges.css
new file mode 100644
index 0000000..2694f8d
--- /dev/null
+++ b/src/css/components/badges.css
@@ -0,0 +1,50 @@
+/* =========================================
+ Badge Overrides
+ ========================================= */
+
+/* Primary badge in dark mode */
+body.dark .badge.bg-primary {
+ background-color: #4fc3f7;
+ color: #222;
+}
+
+/* General badge border in dark mode */
+body.dark .badge {
+ border-color: rgba(255, 255, 255, 0.15);
+}
+
+/* =========================================
+ Tag Badges
+ ========================================= */
+
+.tag-badge {
+ display: inline-block;
+ padding: 0.25rem 0.5rem;
+ font-size: 0.875rem;
+ border-radius: var(--radius);
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.tag-badge:hover {
+ opacity: 0.8;
+ transform: translateY(-1px);
+}
+
+/* =========================================
+ Tag Filters
+ ========================================= */
+
+.tag-filter {
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.tag-filter:hover {
+ opacity: 0.8;
+ transform: scale(1.05);
+}
+
+.tag-filter:active {
+ transform: scale(0.98);
+}
diff --git a/src/css/components/cards.css b/src/css/components/cards.css
new file mode 100644
index 0000000..00cc281
--- /dev/null
+++ b/src/css/components/cards.css
@@ -0,0 +1,46 @@
+/* =========================================
+ Card Component
+ ========================================= */
+
+.card {
+ background-color: var(--color-card-bg);
+ color: var(--color-card-text);
+ transition:
+ background-color 0.3s ease,
+ color 0.3s ease;
+}
+
+.card-text {
+ color: var(--color-card-text);
+}
+
+.card-title {
+ color: var(--color-card-text);
+}
+
+/* Viewer count + shared text overrides */
+.viewer-count,
+.card-text,
+.card-title {
+ color: var(--color-card-text);
+}
+
+/* =========================================
+ Viewer Count Pulse Animation
+ ========================================= */
+
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+.viewer-number.pulse {
+ animation: pulse 0.3s ease-in-out;
+}
diff --git a/src/css/components/forms.css b/src/css/components/forms.css
new file mode 100644
index 0000000..c537e2e
--- /dev/null
+++ b/src/css/components/forms.css
@@ -0,0 +1,48 @@
+/* =========================================
+ Form Controls
+ ========================================= */
+
+.form-control:focus {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25);
+}
+
+.btn-auth {
+ padding: 12px;
+ font-weight: 600;
+}
+
+/* =========================================
+ Auth Page Form Layout
+ (Login / Register)
+ ========================================= */
+
+.auth-container {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+ background-color: var(--color-background);
+}
+
+.auth-card {
+ max-width: 450px;
+ width: 100%;
+}
+
+.auth-card .card {
+ border: none;
+ box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+}
+
+.auth-header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
diff --git a/src/css/components/modal.css b/src/css/components/modal.css
new file mode 100644
index 0000000..f943aba
--- /dev/null
+++ b/src/css/components/modal.css
@@ -0,0 +1,60 @@
+/* =========================================
+ Stream Detail Modal
+ ========================================= */
+
+.stream-detail-modal {
+ position: fixed;
+ inset: 0;
+ z-index: 2000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.stream-detail-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.7);
+}
+
+.stream-detail-content {
+ position: relative;
+ background-color: var(--color-card-bg);
+ color: var(--color-card-text);
+ max-width: 520px;
+ width: 90%;
+ padding: 1.25rem;
+ border-radius: var(--radius);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+ z-index: 1;
+}
+
+.stream-detail-content img {
+ width: 100%;
+ border-radius: var(--radius);
+}
+
+.stream-detail-content h2 {
+ margin-top: 0.75rem;
+ margin-bottom: 0.25rem;
+}
+
+.stream-detail-content .badge {
+ margin-right: 0.25rem;
+ margin-top: 0.25rem;
+}
+
+.close-modal {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.75rem;
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ color: var(--color-card-text);
+ cursor: pointer;
+}
+
+.close-modal:hover {
+ opacity: 0.8;
+}
diff --git a/src/css/layout/drawer.css b/src/css/layout/drawer.css
new file mode 100644
index 0000000..67b9967
--- /dev/null
+++ b/src/css/layout/drawer.css
@@ -0,0 +1,44 @@
+/* =========================================
+ Category Drawer
+ ========================================= */
+
+#categoryDrawer {
+ width: 280px;
+ transform: translateX(-100%);
+ transition:
+ transform 0.3s ease-in-out,
+ visibility 0.3s ease-in-out,
+ opacity 0.3s ease-in-out;
+ visibility: hidden;
+ opacity: 0;
+ z-index: 1050;
+}
+
+#categoryDrawer.open {
+ transform: translateX(0);
+ visibility: visible;
+ opacity: 1;
+}
+
+/* Dark mode drawer appearance */
+body.dark #categoryDrawer {
+ background-color: #222;
+ color: #eee;
+}
+
+body.dark #categoryDrawer a {
+ color: #eee;
+}
+
+/* =========================================
+ Drawer Overlay
+ ========================================= */
+
+#drawerOverlay {
+ display: none;
+ z-index: 1040;
+}
+
+#drawerOverlay.show {
+ display: block;
+}
diff --git a/src/css/layout/footer.css b/src/css/layout/footer.css
new file mode 100644
index 0000000..1c65e87
--- /dev/null
+++ b/src/css/layout/footer.css
@@ -0,0 +1,11 @@
+/* =========================================
+ Footer
+ ========================================= */
+
+footer {
+ background-color: var(--color-footer-bg);
+ color: var(--color-footer-text);
+ transition:
+ background-color 0.3s ease,
+ color 0.3s ease;
+}
diff --git a/src/css/layout/grid.css b/src/css/layout/grid.css
new file mode 100644
index 0000000..75a3195
--- /dev/null
+++ b/src/css/layout/grid.css
@@ -0,0 +1,18 @@
+/* =========================================
+ Grid Utilities
+ ========================================= */
+
+.column-gap {
+ -moz-column-gap: 1rem; /* Firefox legacy support */
+ column-gap: 1rem;
+}
+
+/* =========================================
+ Responsive Grid Adjustments
+ ========================================= */
+
+@media (max-width: 360px) {
+ .stream-preview {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/css/layout/header.css b/src/css/layout/header.css
new file mode 100644
index 0000000..5bf4d45
--- /dev/null
+++ b/src/css/layout/header.css
@@ -0,0 +1,60 @@
+/* =========================================
+ Header
+ ========================================= */
+
+header {
+ background-color: var(--color-header-bg);
+ color: var(--color-header-text);
+ transition:
+ background-color 0.3s ease,
+ color 0.3s ease;
+}
+
+/* Override Bootstrap's bg-white class in dark mode */
+body.dark header.bg-white {
+ background-color: var(--color-header-bg) !important;
+}
+
+/* =========================================
+ Navigation Links
+ ========================================= */
+
+header .nav-link {
+ color: #000 !important;
+}
+
+header .nav-link:hover,
+header .nav-link:focus {
+ color: #000 !important;
+ opacity: 0.7;
+}
+
+/* Dark mode nav links */
+body.dark header .nav-link {
+ color: #eee !important;
+}
+
+body.dark header .nav-link:hover,
+body.dark header .nav-link:focus {
+ color: #eee !important;
+}
+
+/* =========================================
+ Header Anchor Overrides
+ ========================================= */
+
+header a {
+ color: #000 !important;
+}
+
+header a:hover {
+ color: #000 !important;
+}
+
+body.dark header a {
+ color: #eee !important;
+}
+
+body.dark header a:hover {
+ color: #eee !important;
+}
diff --git a/src/css/pages/index.css b/src/css/pages/index.css
new file mode 100644
index 0000000..1bd1e37
--- /dev/null
+++ b/src/css/pages/index.css
@@ -0,0 +1,2 @@
+/* Index page currently has no page-specific styles */
+/* This css file is for anything index page specific */
diff --git a/src/css/pages/login.css b/src/css/pages/login.css
new file mode 100644
index 0000000..3ed9c42
--- /dev/null
+++ b/src/css/pages/login.css
@@ -0,0 +1,3 @@
+.auth-container { ... }
+.auth-card { ... }
+.auth-header { ... }
diff --git a/src/css/style.css b/src/css/style.css
deleted file mode 100644
index 6a69f3d..0000000
--- a/src/css/style.css
+++ /dev/null
@@ -1,392 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
-
-/* Reset and base */
-*,
-*::before,
-*::after {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-:root {
- --font-base:
- 'Roboto', 'OpenSans', 'Lato', 'Montserrat', 'Noto Sans', 'Oswald',
- 'Poppins', 'Raleway', system-ui, -apple-system, sans-serif;
-
- --primary: #4fc3f7;
-
- --color-background: #fff;
- --color-text: #000;
- --color-card-bg: #fff;
- --color-card-text: #000;
- --color-header-bg: #fff;
- --color-header-text: #000;
- --color-footer-bg: #f8f9fa;
- --color-footer-text: #000;
-
- --radius: 0.5rem;
-}
-
-body {
- font-family: var(--font-base);
- background-color: var(--color-background);
- color: var(--color-text);
- line-height: 1.6;
- transition:
- background-color 0.3s ease,
- color 0.3s ease;
-}
-
-/* This block handles the manual theme toggle */
-body.dark {
- --color-background: #111;
- --color-text: #eee;
- --color-card-bg: #222;
- --color-card-text: #eee;
- --color-header-bg: #222;
- --color-header-text: #eee;
- --color-footer-bg: #222;
- --color-footer-text: #eee;
-}
-
-/* Override Bootstrap's bg-light class in dark mode */
-body.dark.bg-light {
- background-color: var(--color-background) !important;
-}
-
-/* Header */
-header {
- background-color: var(--color-header-bg);
- color: var(--color-header-text);
- transition:
- background-color 0.3s ease,
- color 0.3s ease;
-}
-
-/* Override Bootstrap's bg-white class on header in dark mode */
-body.dark header.bg-white {
- background-color: var(--color-header-bg) !important;
-}
-
-/* Navigation links within the header */
-header .nav-link {
- color: #000 !important;
-}
-
-header .nav-link:hover,
-header .nav-link:focus {
- color: #000 !important;
- opacity: 0.7;
-}
-
-body.dark header .nav-link {
- color: #eee !important;
-}
-
-body.dark header .nav-link:hover,
-body.dark header .nav-link:focus {
- color: #eee !important;
-}
-header a {
- color: #000 !important;
-}
-header a:hover {
- color: #000 !important;
-}
-body.dark header a {
- color: #eee !important;
-}
-body.dark header a:hover {
- color: #eee !important;
-}
-
-/* Footer */
-footer {
- background-color: var(--color-footer-bg);
- color: var(--color-footer-text);
- transition:
- background-color 0.3s ease,
- color 0.3s ease;
-}
-
-/* Headings - ensure they follow the color scheme */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- color: #000 !important;
- transition: color 0.3s ease;
-}
-
-body.dark h1,
-body.dark h2,
-body.dark h3,
-body.dark h4,
-body.dark h5,
-body.dark h6 {
- color: #eee !important;
-}
-
-/* Card Styles */
-.card {
- background-color: var(--color-card-bg);
- color: var(--color-card-text);
- transition:
- background-color 0.3s ease,
- color 0.3s ease;
-}
-
-.card-text {
- color: var(--color-card-text);
-}
-
-/* Card texts and viewer counts */
-.card-text,
-.viewer-count,
-.card-title {
- color: var(--color-card-text);
-}
-
-.card-text,
-.viewer-count {
- /* Use card text color to override bootstrap defaults */
- color: var(--color-card-text);
-}
-
-.card-title {
- color: var(--color-card-text);
-}
-
-body.dark .badge.bg-primary {
- background-color: #4fc3f7; /* or a lighter blue */
- color: #222;
-}
-
-/* Category Drawer Styles */
-#categoryDrawer {
- width: 280px;
- transform: translateX(-100%);
- transition:
- transform 0.3s ease-in-out,
- visibility 0.3s ease-in-out,
- opacity 0.3s ease-in-out;
- visibility: hidden;
- opacity: 0;
- z-index: 1050;
-}
-
-#categoryDrawer.open {
- transform: translateX(0);
- visibility: visible;
- opacity: 1;
-}
-
-/* Dark mode for drawer when body is dark */
-body.dark #categoryDrawer {
- background-color: #222; /* Dark background for drawer */
- color: #eee; /* Light text for drawer */
-}
-
-body.dark #categoryDrawer a {
- color: #eee; /* Light text for drawer links */
-}
-
-/* Drawer Overlay */
-#drawerOverlay {
- display: none;
- z-index: 1040;
-}
-
-#drawerOverlay.show {
- display: block;
-}
-
-/* Tag Badge Styles */
-.tag-badge {
- display: inline-block;
- padding: 0.25rem 0.5rem;
- font-size: 0.875rem;
- border-radius: var(--radius);
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.tag-badge:hover {
- opacity: 0.8;
- transform: translateY(-1px);
-}
-
-/* Tag Filter Styles */
-.tag-filter {
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.tag-filter:hover {
- opacity: 0.8;
- transform: scale(1.05);
-}
-
-.tag-filter:active {
- transform: scale(0.98);
-}
-
-.column-gap {
- -moz-column-gap: 1rem; /* For older versions of Firefox */
- column-gap: 1rem; /* Adjust the value as needed */
-}
-
-body.dark .badge {
- border-color: rgba(255, 255, 255, 0.15);
-}
-
-/*
-* @media (prefers-color-scheme: dark) block
-* This block applies styles when the user's system preference is dark mode.
-* It sets the default dark mode appearance, which can then be overridden
-* by the `body.dark` class if the user manually toggles the theme.
-*/
-@media (prefers-color-scheme: dark) {
- :root {
- /* Set dark mode variables as defaults when system prefers dark */
- --color-background: #111;
- --color-text: #eee;
- --color-card-bg: #222;
- --color-card-text: #eee;
- --color-header-bg: #222;
- --color-header-text: #eee;
- --color-footer-bg: #222;
- --color-footer-text: #eee;
- }
-}
-
-/* Responsiveness */
-@media (max-width: 360px) {
- .stream-preview {
- grid-template-columns: 1fr;
- }
-}
-
-@keyframes pulse {
- 0% {
- transform: scale(1);
- }
- 50% {
- transform: scale(1.1);
- }
- 100% {
- transform: scale(1);
- }
-}
-
-.viewer-number.pulse {
- animation: pulse 0.3s ease-in-out;
-}
-
-/* ================================
- Stream Detail Modal (V1)
- ================================ */
-
-.stream-detail-modal {
- position: fixed;
- inset: 0;
- z-index: 2000;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.stream-detail-overlay {
- position: absolute;
- inset: 0;
- background: rgba(0, 0, 0, 0.7);
-}
-
-.stream-detail-content {
- position: relative;
- background-color: var(--color-card-bg);
- color: var(--color-card-text);
- max-width: 520px;
- width: 90%;
- padding: 1.25rem;
- border-radius: var(--radius);
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
- z-index: 1;
-}
-
-.stream-detail-content img {
- width: 100%;
- border-radius: var(--radius);
-}
-
-.stream-detail-content h2 {
- margin-top: 0.75rem;
- margin-bottom: 0.25rem;
-}
-
-.stream-detail-content .badge {
- margin-right: 0.25rem;
- margin-top: 0.25rem;
-}
-
-.close-modal {
- position: absolute;
- top: 0.5rem;
- right: 0.75rem;
- background: none;
- border: none;
- font-size: 1.5rem;
- color: var(--color-card-text);
- cursor: pointer;
-}
-
-.close-modal:hover {
- opacity: 0.8;
-}
-
-/* ================================
- Auth Pages (Login/Register)
- ================================ */
-
-.auth-container {
- min-height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 20px;
- background-color: var(--color-background);
-}
-
-.auth-card {
- max-width: 450px;
- width: 100%;
-}
-
-.auth-card .card {
- border: none;
- box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
-}
-
-.auth-header {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- padding: 1rem 2rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.form-control:focus {
- border-color: var(--primary);
- box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25);
-}
-
-.btn-auth {
- padding: 12px;
- font-weight: 600;
-}
diff --git a/src/css/themes/dark.css b/src/css/themes/dark.css
new file mode 100644
index 0000000..6f4f337
--- /dev/null
+++ b/src/css/themes/dark.css
@@ -0,0 +1,64 @@
+/* =========================================
+ Manual Dark Theme Overrides
+ ========================================= */
+
+body.dark {
+ --color-background: #111;
+ --color-text: #eee;
+
+ --color-card-bg: #222;
+ --color-card-text: #eee;
+
+ --color-header-bg: #222;
+ --color-header-text: #eee;
+
+ --color-footer-bg: #222;
+ --color-footer-text: #eee;
+}
+
+/* Override Bootstrap's bg-light class in dark mode */
+body.dark.bg-light {
+ background-color: var(--color-background) !important;
+}
+
+/* Header overrides */
+body.dark header.bg-white {
+ background-color: var(--color-header-bg) !important;
+}
+
+body.dark header .nav-link {
+ color: #eee !important;
+}
+
+body.dark header .nav-link:hover,
+body.dark header .nav-link:focus {
+ color: #eee !important;
+}
+
+body.dark header a {
+ color: #eee !important;
+}
+
+body.dark header a:hover {
+ color: #eee !important;
+}
+
+/* Drawer overrides */
+body.dark #categoryDrawer {
+ background-color: #222;
+ color: #eee;
+}
+
+body.dark #categoryDrawer a {
+ color: #eee;
+}
+
+/* Badge overrides */
+body.dark .badge.bg-primary {
+ background-color: #4fc3f7;
+ color: #222;
+}
+
+body.dark .badge {
+ border-color: rgba(255, 255, 255, 0.15);
+}
diff --git a/src/css/themes/light.css b/src/css/themes/light.css
new file mode 100644
index 0000000..b6d7c39
--- /dev/null
+++ b/src/css/themes/light.css
@@ -0,0 +1,6 @@
+/* =========================================
+ Light Theme (Explicit Overrides)
+ ========================================= */
+
+/* No explicit light theme overrides were defined in the original code.
+ Light mode is handled entirely by the default :root variables. */