refactor: use CSS variables for layout dimensions

Replaced hardcoded Tailwind classes with CSS variables for maintainability:
- --navbar-height: 3.5rem (56px)
- --sidebar-width: 15rem (240px)
- --sidebar-width-collapsed: 4rem (64px)

Now if navbar height changes, update ONE variable instead of hunting
through multiple files. Uses Tailwind arbitrary values syntax:
h-[var(--navbar-height)], pt-[var(--navbar-height)], etc.

Files updated:
- index.css: Added layout CSS variables
- TopNav.tsx: h-14 → h-[var(--navbar-height)]
- DashboardLayout.tsx: pt-14, ml-16/60 → CSS variables
- Sidebar.tsx: top-14, w-16/60 → CSS variables

Author: DevanshuNEU

frontend/src/components/dashboard/DashboardLayout.tsx

@@ -57,8 +57,8 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
         />
 
         <main 
-          className={`flex-1 transition-all duration-300 pt-14 ${
-            sidebarCollapsed ? 'ml-16' : 'ml-60'
+          className={`flex-1 transition-all duration-300 pt-[var(--navbar-height)] ${
+            sidebarCollapsed ? 'ml-[var(--sidebar-width-collapsed)]' : 'ml-[var(--sidebar-width)]'
           }`}
         >
           <div className="p-6">

frontend/src/components/dashboard/Sidebar.tsx

@@ -88,10 +88,10 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
   return (
     <aside 
       className={`
-        fixed left-0 top-14 bottom-0 z-40 
+        fixed left-0 top-[var(--navbar-height)] bottom-0 z-40 
         flex flex-col border-r border-border bg-background 
         transition-all duration-300
-        ${collapsed ? 'w-16' : 'w-60'}
+        ${collapsed ? 'w-[var(--sidebar-width-collapsed)]' : 'w-[var(--sidebar-width)]'}
       `}
     >
       <nav className="flex-1 p-3 space-y-1">

frontend/src/components/dashboard/TopNav.tsx

@@ -34,7 +34,7 @@ export function TopNav({ onToggleSidebar, sidebarCollapsed, onOpenCommandPalette
   }
 
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 h-14 border-b border-border bg-background/80 backdrop-blur-xl">
+    <nav className="fixed top-0 left-0 right-0 z-50 h-[var(--navbar-height)] border-b border-border bg-background/80 backdrop-blur-xl">
       <div className="h-full px-4 flex items-center justify-between">
         {/* Left Section */}
         <div className="flex items-center gap-4">

frontend/src/index.css

@@ -17,6 +17,11 @@ html {
 
 @layer base {
   :root {
+    /* Layout */
+    --navbar-height: 3.5rem; /* 56px = h-14 */
+    --sidebar-width: 15rem; /* 240px = w-60 */
+    --sidebar-width-collapsed: 4rem; /* 64px = w-16 */
+    
     /* Background */
     --color-bg-primary: #09090b;
     --color-bg-secondary: #0f0f11;