feat: US-019 - Update global layout tokens and Card/CardHeader component

src/components/Card.tsx

@@ -16,7 +16,7 @@ export function Card({ children, full, className, tileId }: CardProps) {
       ? '1px solid var(--border)'
       : '1px solid var(--border-light)',
     borderRadius: 'var(--radius)',
-    padding: '20px',
+    padding: '24px',
     boxShadow: isHovered ? 'var(--shadow-md)' : 'var(--shadow-sm)',
     transition: 'box-shadow 0.2s, border-color 0.2s',
     gridColumn: full ? '1 / -1' : undefined,
@@ -56,19 +56,19 @@ export function CardHeader({ dotColor, title, rightText }: CardHeaderProps) {
     display: 'flex',
     alignItems: 'center',
     gap: '8px',
-    marginBottom: '16px',
+    marginBottom: '18px',
   }
 
   const dotStyles: React.CSSProperties = {
-    width: '8px',
-    height: '8px',
+    width: '9px',
+    height: '9px',
     borderRadius: '50%',
     backgroundColor: dotColorMap[dotColor],
     flexShrink: 0,
   }
 
   const titleStyles: React.CSSProperties = {
-    fontSize: '12px',
+    fontSize: '13px',
     fontWeight: 600,
     textTransform: 'uppercase',
     letterSpacing: '0.06em',
@@ -76,7 +76,7 @@ export function CardHeader({ dotColor, title, rightText }: CardHeaderProps) {
   }
 
   const rightTextStyles: React.CSSProperties = {
-    fontSize: '10px',
+    fontSize: '11px',
     fontWeight: 400,
     textTransform: 'none',
     letterSpacing: 'normal',

src/index.css

@@ -122,9 +122,9 @@
   --purple-border: rgba(124,58,237,0.18);
   --border: #D4E0DE;
   --border-light: #E4EDEB;
-  --sidebar-width: 272px;
-  --topbar-height: 48px;
-  --subnav-height: 36px;
+  --sidebar-width: 304px;
+  --topbar-height: 56px;
+  --subnav-height: 42px;
   --radius-card: 8px;
   --radius-sm: 6px;
   --shadow-sm: 0 1px 2px rgba(26,43,42,0.05);
@@ -267,21 +267,21 @@ html {
 .dashboard-grid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 12px;
+  gap: 14px;
 }
 
 /* Tablet: 2 columns on wider screens */
 @media (min-width: 768px) {
   .dashboard-grid {
     grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
+    gap: 20px;
   }
 }
 
 /* Desktop: maintain 2 columns with generous gap */
 @media (min-width: 1024px) {
   .dashboard-grid {
-    gap: 16px;
+    gap: 20px;
   }
 }