feat: enhance layout and navigation with user role-based sections and improved styling

1 files changed, 27 insertions, 22 deletions

diff --git a/garden/src/styles/layout.css b/garden/src/styles/layout.css
index cdc3ed6..19c0235 100644
--- a/garden/src/styles/layout.css
+++ b/garden/src/styles/layout.css
@@ -38,7 +38,7 @@ a:hover {
   transform: translate(-50%, -50%);
   width: 490px;
   height: 154px;
-  background: radial-gradient(ellipse, rgba(155, 109, 255, 0.2) 0%, rgba(140, 90, 255, 0.08) 40%, transparent 70%);
+  background: radial-gradient(ellipse, var(--color-header-glow-inner) 0%, var(--color-header-glow-outer) 40%, transparent 70%);
   pointer-events: none;
   z-index: 0;
 }
@@ -51,7 +51,7 @@ a:hover {
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 10px;
-  color: rgba(224, 212, 245, 0.88);
+  color: var(--color-header-title);
   margin: 0;
 }
 
@@ -62,7 +62,7 @@ a:hover {
   font-size: 15px;
   text-transform: uppercase;
   letter-spacing: 5px;
-  color: #a898c0;
+  color: var(--color-header-subtitle);
 }
 
 .top-nav {
@@ -93,17 +93,17 @@ a:hover {
   border-right: none;
 }
 
-.top-nav-link[data-accent="cyan"]:hover { border-top-color: var(--color-cyan); color: var(--color-cyan); background: rgba(34, 211, 238, 0.06); }
-.top-nav-link[data-accent="green"]:hover { border-top-color: var(--color-green); color: var(--color-green); background: rgba(163, 230, 53, 0.06); }
-.top-nav-link[data-accent="pink"]:hover { border-top-color: var(--color-pink); color: var(--color-pink); background: rgba(255, 110, 180, 0.06); }
-.top-nav-link[data-accent="yellow"]:hover { border-top-color: var(--color-yellow); color: var(--color-yellow); background: rgba(251, 191, 36, 0.06); }
-.top-nav-link[data-accent="purple"]:hover { border-top-color: var(--color-purple); color: var(--color-purple); background: rgba(155, 109, 255, 0.06); }
+.top-nav-link[data-accent="cyan"]:hover { border-top-color: var(--color-cyan); color: var(--color-cyan); background: color-mix(in srgb, var(--color-cyan) 6%, transparent); }
+.top-nav-link[data-accent="green"]:hover { border-top-color: var(--color-green); color: var(--color-green); background: color-mix(in srgb, var(--color-green) 6%, transparent); }
+.top-nav-link[data-accent="pink"]:hover { border-top-color: var(--color-pink); color: var(--color-pink); background: color-mix(in srgb, var(--color-pink) 6%, transparent); }
+.top-nav-link[data-accent="yellow"]:hover { border-top-color: var(--color-yellow); color: var(--color-yellow); background: color-mix(in srgb, var(--color-yellow) 6%, transparent); }
+.top-nav-link[data-accent="purple"]:hover { border-top-color: var(--color-purple); color: var(--color-purple); background: color-mix(in srgb, var(--color-purple) 6%, transparent); }
 
-.top-nav-link[data-accent="cyan"].active { border-top-color: var(--color-cyan); color: var(--color-cyan); background: rgba(34, 211, 238, 0.1); }
-.top-nav-link[data-accent="green"].active { border-top-color: var(--color-green); color: var(--color-green); background: rgba(163, 230, 53, 0.1); }
-.top-nav-link[data-accent="pink"].active { border-top-color: var(--color-pink); color: var(--color-pink); background: rgba(255, 110, 180, 0.1); }
-.top-nav-link[data-accent="yellow"].active { border-top-color: var(--color-yellow); color: var(--color-yellow); background: rgba(251, 191, 36, 0.1); }
-.top-nav-link[data-accent="purple"].active { border-top-color: var(--color-purple); color: var(--color-purple); background: rgba(155, 109, 255, 0.1); }
+.top-nav-link[data-accent="cyan"].active { border-top-color: var(--color-cyan); color: var(--color-cyan); background: color-mix(in srgb, var(--color-cyan) 10%, transparent); }
+.top-nav-link[data-accent="green"].active { border-top-color: var(--color-green); color: var(--color-green); background: color-mix(in srgb, var(--color-green) 10%, transparent); }
+.top-nav-link[data-accent="pink"].active { border-top-color: var(--color-pink); color: var(--color-pink); background: color-mix(in srgb, var(--color-pink) 10%, transparent); }
+.top-nav-link[data-accent="yellow"].active { border-top-color: var(--color-yellow); color: var(--color-yellow); background: color-mix(in srgb, var(--color-yellow) 10%, transparent); }
+.top-nav-link[data-accent="purple"].active { border-top-color: var(--color-purple); color: var(--color-purple); background: color-mix(in srgb, var(--color-purple) 10%, transparent); }
 
 .search-bar {
   width: var(--width-container);
@@ -152,7 +152,7 @@ a:hover {
 .content {
   flex-grow: 1;
   background: var(--color-panel);
-  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100px);
+  background-image: linear-gradient(180deg, var(--color-overlay-light) 0%, transparent 100px);
   border: 1px solid var(--color-border);
   padding: 10px 12px;
   min-height: 300px;
@@ -204,10 +204,11 @@ a:hover {
 .nav-section[data-accent="pink"] { border-top: 2px solid var(--color-pink); }
 .nav-section[data-accent="yellow"] { border-top: 2px solid var(--color-yellow); }
 .nav-section[data-accent="purple"] { border-top: 2px solid var(--color-purple); }
+.nav-section[data-accent="red"] { border-top: 2px solid var(--color-red); }
 
 .nav-section-header {
   background: var(--color-panel-header);
-  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
+  background-image: linear-gradient(180deg, var(--color-overlay-lighter), transparent);
   padding: 5px 8px;
   font-family: var(--font-display);
   font-size: 12px;
@@ -222,6 +223,7 @@ a:hover {
 .nav-section[data-accent="pink"] .nav-section-header { color: var(--color-pink); }
 .nav-section[data-accent="yellow"] .nav-section-header { color: var(--color-yellow); }
 .nav-section[data-accent="purple"] .nav-section-header { color: var(--color-purple); }
+.nav-section[data-accent="red"] .nav-section-header { color: var(--color-red); }
 
 .nav-section-body ul {
   list-style: none;
@@ -246,6 +248,7 @@ a:hover {
 .nav-section[data-accent="pink"] .nav-section-body li::before { color: var(--color-pink); }
 .nav-section[data-accent="yellow"] .nav-section-body li::before { color: var(--color-yellow); }
 .nav-section[data-accent="purple"] .nav-section-body li::before { color: var(--color-purple); }
+.nav-section[data-accent="red"] .nav-section-body li::before { color: var(--color-red); }
 
 .nav-section-body li a {
   color: var(--color-link);
@@ -257,6 +260,7 @@ a:hover {
 .nav-section[data-accent="pink"] .nav-section-body li a:hover { color: var(--color-pink); }
 .nav-section[data-accent="yellow"] .nav-section-body li a:hover { color: var(--color-yellow); }
 .nav-section[data-accent="purple"] .nav-section-body li a:hover { color: var(--color-purple); }
+.nav-section[data-accent="red"] .nav-section-body li a:hover { color: var(--color-red); }
 
 .nav-section-body li a.active {
   font-weight: 600;
@@ -267,6 +271,7 @@ a:hover {
 .nav-section[data-accent="pink"] .nav-section-body li a.active { color: var(--color-pink); }
 .nav-section[data-accent="yellow"] .nav-section-body li a.active { color: var(--color-yellow); }
 .nav-section[data-accent="purple"] .nav-section-body li a.active { color: var(--color-purple); }
+.nav-section[data-accent="red"] .nav-section-body li a.active { color: var(--color-red); }
 
 .nav-section-body li.placeholder {
   color: var(--color-text-muted);
@@ -334,13 +339,13 @@ a:hover {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 2px;
-  color: #fff;
+  color: var(--color-white);
   cursor: pointer;
   margin-top: 4px;
 }
 
 .form-button:hover {
-  background: #8a5cf0;
+  background: var(--color-purple-hover);
 }
 
 .form-button:disabled {
@@ -349,9 +354,9 @@ a:hover {
 }
 
 .form-error {
-  background: rgba(255, 80, 80, 0.1);
-  border: 1px solid rgba(255, 80, 80, 0.3);
-  color: #ff6b6b;
+  background: color-mix(in srgb, var(--color-error) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
+  color: var(--color-error);
   padding: 8px 10px;
   font-size: 12px;
   margin-bottom: 10px;
@@ -359,8 +364,8 @@ a:hover {
 }
 
 .form-success {
-  background: rgba(163, 230, 53, 0.1);
-  border: 1px solid rgba(163, 230, 53, 0.3);
+  background: color-mix(in srgb, var(--color-green) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
   color: var(--color-green);
   padding: 8px 10px;
   font-size: 12px;