Merge feature/timeline into main

src/lib/world-map/StatsPanel.svelte

@@ -137,12 +137,12 @@
                 <text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text>
               </g>
             {/each}
-            <circle cx="90" cy="90" r="30" fill="#f8fafc" />
+            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
           </svg>
         {:else}
           <svg viewBox="0 0 180 180" class="donut-svg">
-            <circle cx="90" cy="90" r="65" fill="#e2e8f0" />
-            <circle cx="90" cy="90" r="30" fill="#f8fafc" />
+            <circle cx="90" cy="90" r="65" fill="var(--border)" />
+            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
           </svg>
         {/if}
       </div>
@@ -157,11 +157,11 @@
 <style>
   .panel {
     flex: 0 0 min(360px, 25vw);
-    background: #f8fafc;
-    border-left: 1px solid #dce8f0;
+    background: var(--bg-raised);
+    border-left: 1px solid var(--border);
     display: flex;
     flex-direction: row;
-    font-family: sans-serif;
+    font-family: var(--sans);
     transition: flex-basis 0.25s ease;
   }
 
@@ -180,21 +180,21 @@
   .collapse-btn {
     flex: 0 0 auto;
     align-self: flex-start;
-    background: #e2e8f0;
+    background: var(--accent-bg);
     border: none;
     border-radius: 0 8px 8px 0;
     padding: 14px 5px;
     cursor: pointer;
     font-size: 16px;
     line-height: 1;
-    color: #1e293b;
+    color: var(--accent);
     transition: background 0.15s ease, padding 0.15s ease;
     margin-top: 24px;
     position: relative;
   }
 
   .collapse-btn:hover {
-    background: #94a3b8;
+    background: var(--lavender-bg);
     padding-right: 8px;
   }
 
@@ -204,10 +204,11 @@
     right: calc(100% + 8px);
     top: 50%;
     transform: translateY(-50%);
-    background: #1e293b;
-    color: #fff;
-    font-size: 14px;
-    font-weight: 600;
+    background: var(--text-h);
+    color: var(--bg-raised);
+    font-family: var(--sans);
+    font-size: 12px;
+    font-weight: 300;
     padding: 6px 12px;
     border-radius: 6px;
     white-space: nowrap;
@@ -221,20 +222,22 @@
   }
 
   .headline {
-    font-size: 16px;
-    font-weight: 700;
+    font-family: var(--heading);
+    font-size: var(--text-sm);
+    font-weight: 400;
     text-transform: uppercase;
-    letter-spacing: 1px;
-    color: #1f2937;
+    letter-spacing: 0.1em;
+    color: var(--accent);
     margin: 0 0 20px 0;
   }
 
   .bar-label {
-    font-size: 13px;
-    font-weight: 600;
+    font-family: var(--sans);
+    font-size: var(--text-xs);
+    font-weight: 400;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: #64748b;
+    letter-spacing: 0.08em;
+    color: var(--text-sub);
     display: block;
     margin-bottom: 8px;
   }
@@ -248,30 +251,30 @@
 
   .total-bar-bg {
     flex: 1;
-    height: 20px;
-    background: #e2e8f0;
+    height: 18px;
+    background: var(--accent-bg);
     border-radius: 10px;
     overflow: hidden;
   }
 
   .total-bar-fill {
     height: 100%;
-    background: #3b82f6;
+    background: linear-gradient(90deg, var(--accent-dark), var(--lavender));
     border-radius: 10px;
     transition: width 0.3s ease;
     min-width: 0;
   }
 
   .total-bar-text {
-    font-size: 15px;
-    font-weight: 700;
-    color: #1f2937;
+    font-size: var(--text-sm);
+    font-weight: 400;
+    color: var(--text-h);
     white-space: nowrap;
   }
 
   .divider {
     height: 1px;
-    background: #e2e8f0;
+    background: var(--border);
     margin: 16px 0;
   }
 
@@ -279,51 +282,51 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 7px 0;
+    padding: 6px 0;
   }
 
   .dot {
-    width: 14px;
-    height: 14px;
+    width: 12px;
+    height: 12px;
     border-radius: 50%;
     flex-shrink: 0;
   }
 
   .label {
     flex: 1;
-    font-size: 14px;
-    color: #334155;
+    font-size: var(--text-sm);
+    font-weight: 300;
+    color: var(--text);
   }
 
   .value {
-    font-size: 14px;
-    font-weight: 600;
-    color: #1f2937;
+    font-size: var(--text-sm);
+    font-weight: 400;
+    color: var(--text-h);
   }
 
   .total {
-    font-weight: 350;
-    color: #94a3b8;
-    font-size: 13px;
+    font-weight: 400;
+    color: var(--text-sub);
+    font-size: var(--text-xs);
   }
 
   .donut-wrap {
     display: flex;
     justify-content: center;
-    margin: 24px 0;
-    padding: 0 10px;
+    margin: 20px 0;
   }
 
   .donut-svg {
     width: 160px;
     height: 160px;
-    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
-    overflow: visible;
+    filter: drop-shadow(0 2px 8px rgba(99,102,241,0.15));
   }
 
   .donut-label {
-    fill: #1f2937;
-    font-weight: 600;
+    fill: var(--text-h);
+    font-family: var(--sans);
+    font-weight: 300;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.15s ease;
@@ -342,13 +345,14 @@
     position: absolute;
     top: calc(100% + 6px);
     left: 0;
-    background: #1e293b;
-    color: #f1f5f9;
+    background: var(--text-h);
+    color: var(--bg-raised);
+    font-family: var(--sans);
     font-size: 12px;
     line-height: 1.5;
     padding: 8px 12px;
     border-radius: 8px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--shadow);
     z-index: 20;
     white-space: nowrap;
     min-width: 120px;
@@ -368,9 +372,9 @@
   }
 
   .disclaimer {
-    font-size: 11px;
-    color: #94a3b8;
-    line-height: 1.4;
+    font-size: var(--text-xs);
+    color: var(--text-sub);
+    line-height: 1.5;
     text-align: center;
   }
 </style>

src/lib/world-map/continents.js

@@ -210,4 +210,3 @@ for (const id of Object.keys(map)) {
 export function getContinent(id) {
   return map[id] ?? null;
 }
-