Apply warm editorial design system across all components

Replace generic blue/gray colors with warm editorial palette:
- Navigation: coral active states, branded logo colors
- Footer: navy background, gold section titles
- FilterBar: coral search button and focus states
- SchoolCard: coral left accent on hover, teal/coral buttons
- HomeView: gradient hero section, Playfair Display headings
- RankingsView: gold top-3 highlights, warm table styling
- ComparisonView: teal card borders, coral buttons

Consistent use of CSS variables and Playfair Display serif font
for headings throughout.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

nextjs-app/components/SchoolCard.module.css

@@ -1,13 +1,15 @@
 .card {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-left: 3px solid transparent;
+  border-radius: 12px;
   padding: 1.5rem;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
 }
 
 .card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-left-color: var(--accent-coral, #e07256);
+  box-shadow: var(--shadow-medium, 0 4px 20px rgba(26, 22, 18, 0.1));
   transform: translateY(-2px);
 }
 
@@ -24,25 +26,27 @@
   font-size: 1.125rem;
   font-weight: 600;
   line-height: 1.4;
+  font-family: var(--font-playfair), 'Playfair Display', serif;
 }
 
 .title a {
-  color: #1f2937;
+  color: var(--text-primary, #1a1612);
   text-decoration: none;
+  transition: color 0.2s ease;
 }
 
 .title a:hover {
-  color: #3b82f6;
-  text-decoration: underline;
+  color: var(--accent-coral, #e07256);
 }
 
 .distance {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--accent-teal, #2d7d7d);
   white-space: nowrap;
-  background: #f3f4f6;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  background: rgba(45, 125, 125, 0.1);
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-weight: 500;
 }
 
 .meta {
@@ -54,9 +58,9 @@
 
 .metaItem {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--text-secondary, #5c564d);
   padding: 0.25rem 0.75rem;
-  background: #f9fafb;
+  background: var(--bg-secondary, #f3ede4);
   border-radius: 4px;
 }
 
@@ -66,8 +70,9 @@
   gap: 1rem;
   margin-bottom: 1.5rem;
   padding: 1rem;
-  background: #f9fafb;
-  border-radius: 6px;
+  background: var(--bg-secondary, #f3ede4);
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #e5dfd5);
 }
 
 .metric {
@@ -78,7 +83,7 @@
 
 .metricLabel {
   font-size: 0.75rem;
-  color: #6b7280;
+  color: var(--text-muted, #8a847a);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -91,7 +96,8 @@
 
 .metricValue strong {
   font-size: 1.125rem;
-  color: #1f2937;
+  color: var(--text-primary, #1a1612);
+  font-weight: 700;
 }
 
 .trend {
@@ -110,8 +116,8 @@
   flex: 1;
   padding: 0.625rem 1rem;
   font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 6px;
+  font-weight: 600;
+  border-radius: 8px;
   border: none;
   cursor: pointer;
   text-align: center;
@@ -120,32 +126,37 @@
 }
 
 .btnSecondary {
-  background: white;
-  color: #374151;
-  border: 1px solid #d1d5db;
+  background: var(--bg-card, white);
+  color: var(--accent-teal, #2d7d7d);
+  border: 2px solid var(--accent-teal, #2d7d7d);
 }
 
 .btnSecondary:hover {
-  background: #f9fafb;
-  border-color: #9ca3af;
+  background: var(--accent-teal, #2d7d7d);
+  color: white;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(45, 125, 125, 0.3);
 }
 
 .btnPrimary {
-  background: #3b82f6;
+  background: var(--accent-coral, #e07256);
   color: white;
 }
 
 .btnPrimary:hover {
-  background: #2563eb;
+  background: var(--accent-coral-dark, #c45a3f);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3);
 }
 
 .btnPrimary:active {
-  transform: scale(0.98);
+  transform: translateY(0);
 }
 
 @media (max-width: 640px) {
   .card {
     padding: 1rem;
+    border-radius: 8px;
   }
 
   .metrics {