Add theme toggle functionality and update styles for light and dark modes

- Implemented theme toggle buttons in index.html for light, dark, and system themes.
- Enhanced app.js to manage theme application and color loading from CSS custom properties.
- Updated style.css with new design tokens for light and dark themes, improving overall UI consistency and readability.
- Adjusted font styles and sizes for better visual hierarchy and user experience.

app.js

@@ -36,6 +36,61 @@
   var running = false
   var camDir = -1
 
+  // Color palette — loaded from CSS custom properties at init
+  var C = {
+    p: '', d: '', s: '', w: '', s1: '', s2: '',
+    pr: '', dr: '', sr: '', wr: '',
+  }
+
+  var systemQuery = window.matchMedia('(prefers-color-scheme: light)')
+
+  function applyTheme(pref) {
+    var sim = document.querySelector('.coastal-surveillance-sim')
+    var resolved = pref === 'system' ? (systemQuery.matches ? 'light' : 'dark') : pref
+    sim.dataset.theme = resolved
+    loadColors()
+    var btns = document.querySelectorAll('.theme-btn')
+    for (var i = 0; i < btns.length; i++) {
+      btns[i].classList.toggle('active', btns[i].dataset.themeVal === pref)
+    }
+  }
+
+  function initTheme() {
+    var saved = localStorage.getItem('theme') || 'system'
+    applyTheme(saved)
+    systemQuery.addEventListener('change', function () {
+      if (localStorage.getItem('theme') === 'system') applyTheme('system')
+    })
+    var btns = document.querySelectorAll('.theme-btn')
+    for (var i = 0; i < btns.length; i++) {
+      btns[i].addEventListener('click', function () {
+        var val = this.dataset.themeVal
+        localStorage.setItem('theme', val)
+        applyTheme(val)
+      })
+    }
+  }
+
+  function loadColors() {
+    var el = document.querySelector('.coastal-surveillance-sim')
+    var cs = getComputedStyle(el)
+    function v(n) { return cs.getPropertyValue(n).trim() }
+    C.p  = v('--primary')
+    C.d  = v('--danger')
+    C.s  = v('--success')
+    C.w  = v('--warning')
+    C.s1 = v('--surface-1')
+    C.s2 = v('--surface-2')
+    C.pr = v('--primary-rgb')
+    C.dr = v('--danger-rgb')
+    C.sr = v('--success-rgb')
+    C.wr = v('--warning-rgb')
+  }
+
+  function rgba(triplet, alpha) {
+    return 'rgba(' + triplet + ',' + alpha + ')'
+  }
+
   function resetStreaks() {
     detectedStreak = 0
     blindStreak = 0
@@ -121,24 +176,24 @@
       r = 14
     ctx.beginPath()
     ctx.arc(cx, cy, r, 0, Math.PI * 2)
-    ctx.strokeStyle = 'rgba(74,158,255,0.2)'
+    ctx.strokeStyle = rgba(C.pr, 0.2)
     ctx.lineWidth = 1
     ctx.stroke()
     var start = -Math.PI / 2
     var end = start + (d > 0 ? 1.2 : -1.2)
     ctx.beginPath()
     ctx.arc(cx, cy, r - 3, start, end, d < 0)
-    ctx.strokeStyle = 'rgba(74,158,255,0.7)'
+    ctx.strokeStyle = rgba(C.pr, 0.7)
     ctx.lineWidth = 2
     ctx.stroke()
     var tx = cx + Math.cos(end) * (r - 3)
     var ty = cy + Math.sin(end) * (r - 3)
     ctx.beginPath()
     ctx.arc(tx, ty, 2, 0, Math.PI * 2)
-    ctx.fillStyle = 'rgba(74,158,255,0.7)'
+    ctx.fillStyle = rgba(C.pr, 0.7)
     ctx.fill()
-    ctx.fillStyle = 'rgba(74,158,255,0.55)'
-    ctx.font = "7px 'Courier New', monospace"
+    ctx.fillStyle = rgba(C.pr, 0.55)
+    ctx.font = "12px Saira Condensed, Arial Narrow, Arial, sans-serif"
     ctx.textAlign = 'center'
     ctx.fillText(d > 0 ? 'CW' : 'CCW', cx, cy + 3)
   }
@@ -147,15 +202,15 @@
     if (!ctx) return
     ctx.clearRect(0, 0, W, H)
 
-    ctx.fillStyle = '#060d16'
+    ctx.fillStyle = C.s1
     ctx.fillRect(0, 0, W, H)
-    ctx.fillStyle = '#06100a'
+    ctx.fillStyle = C.s2
     ctx.fillRect(0, camCY, W, H - camCY)
 
     ctx.beginPath()
     ctx.moveTo(0, camCY)
     ctx.lineTo(W, camCY)
-    ctx.strokeStyle = 'rgba(74,158,255,0.3)'
+    ctx.strokeStyle = rgba(C.pr, 0.3)
     ctx.lineWidth = 1
     ctx.setLineDash([6, 4])
     ctx.stroke()
@@ -184,17 +239,17 @@
       var r = ri * ringInterval * SCALE
       ctx.beginPath()
       ctx.arc(camCX, camCY, r, 0, Math.PI * 2)
-      ctx.strokeStyle = 'rgba(74,158,255,0.10)'
+      ctx.strokeStyle = rgba(C.pr, 0.10)
       ctx.lineWidth = 0.5
       ctx.stroke()
       ctx.beginPath()
       ctx.moveTo(camCX - 5, camCY - r)
       ctx.lineTo(camCX + 5, camCY - r)
-      ctx.strokeStyle = 'rgba(74,158,255,0.5)'
+      ctx.strokeStyle = rgba(C.pr, 0.5)
       ctx.lineWidth = 1
       ctx.stroke()
-      ctx.fillStyle = 'rgba(74,158,255,0.55)'
-      ctx.font = "10px 'Courier New', monospace"
+      ctx.fillStyle = rgba(C.pr, 0.55)
+      ctx.font = "12px Saira Condensed, Arial Narrow, Arial, sans-serif"
       ctx.textAlign = 'left'
       ctx.fillText(fmtDist(ri * ringInterval), camCX + 8, camCY - r + 4)
     }
@@ -209,14 +264,14 @@
       ctx.beginPath()
       ctx.moveTo(camCX + Math.cos(a) * r0, camCY + Math.sin(a) * r0)
       ctx.lineTo(camCX + Math.cos(a) * r1, camCY + Math.sin(a) * r1)
-      ctx.strokeStyle = isMajor ? 'rgba(74,158,255,0.5)' : 'rgba(74,158,255,0.2)'
+      ctx.strokeStyle = isMajor ? rgba(C.pr, 0.5) : rgba(C.pr, 0.2)
       ctx.lineWidth = isMajor ? 1 : 0.5
       ctx.stroke()
       if (isMajor) {
         var lx = camCX + Math.cos(a) * (r1 + 10)
         var ly = camCY + Math.sin(a) * (r1 + 10)
-        ctx.fillStyle = 'rgba(74,158,255,0.4)'
-        ctx.font = "8px 'Courier New', monospace"
+        ctx.fillStyle = rgba(C.pr, 0.4)
+        ctx.font = "11px Saira Condensed, Arial Narrow, Arial, sans-serif"
         ctx.textAlign = 'center'
         ctx.textBaseline = 'middle'
         ctx.fillText(deg + '°', lx, ly)
@@ -227,7 +282,7 @@
     ctx.beginPath()
     ctx.moveTo(camCX, camCY)
     ctx.lineTo(camCX, 0)
-    ctx.strokeStyle = 'rgba(74,158,255,0.12)'
+    ctx.strokeStyle = rgba(C.pr, 0.12)
     ctx.lineWidth = 0.5
     ctx.setLineDash([4, 4])
     ctx.stroke()
@@ -243,14 +298,14 @@
     ctx.lineTo(camCX + Math.cos(frontA1) * INF, camCY + Math.sin(frontA1) * INF)
     ctx.arc(camCX, camCY, INF, frontA1, frontA2)
     ctx.closePath()
-    ctx.fillStyle = 'rgba(74,158,255,0.03)'
+    ctx.fillStyle = rgba(C.pr, 0.03)
     ctx.fill()
     ctx.beginPath()
     ctx.moveTo(camCX, camCY)
     ctx.lineTo(camCX + Math.cos(frontA2) * INF, camCY + Math.sin(frontA2) * INF)
     ctx.arc(camCX, camCY, INF, frontA2, frontA1 + Math.PI * 2)
     ctx.closePath()
-    ctx.fillStyle = 'rgba(255,74,74,0.03)'
+    ctx.fillStyle = rgba(C.dr, 0.03)
     ctx.fill()
     ctx.restore()
 
@@ -259,7 +314,7 @@
       ctx.beginPath()
       ctx.moveTo(camCX, camCY)
       ctx.lineTo(camCX + Math.cos(aedge) * INF, camCY + Math.sin(aedge) * INF)
-      ctx.strokeStyle = 'rgba(74,158,255,0.3)'
+      ctx.strokeStyle = rgba(C.pr, 0.3)
       ctx.lineWidth = 1
       ctx.setLineDash([5, 5])
       ctx.stroke()
@@ -267,13 +322,13 @@
     }
 
     var labelR = 80
-    ctx.font = "8px 'Courier New', monospace"
+    ctx.font = "11px Saira Condensed, Arial Narrow, Arial, sans-serif"
     ctx.textAlign = 'center'
-    ctx.fillStyle = 'rgba(74,158,255,0.45)'
+    ctx.fillStyle = rgba(C.pr, 0.45)
     ctx.fillText('FRONT ' + p.frontArc + '°', camCX, camCY - labelR)
-    ctx.fillStyle = 'rgba(255,74,74,0.35)'
+    ctx.fillStyle = rgba(C.dr, 0.35)
     if (camCY + 18 < H - 2) ctx.fillText('BACK ' + (360 - p.frontArc) + '°', camCX, camCY + 18)
-    ctx.fillStyle = 'rgba(74,158,255,0.4)'
+    ctx.fillStyle = rgba(C.pr, 0.4)
     ctx.fillText('±' + frontHalf.toFixed(0) + '°', camCX + Math.cos(frontA1) * labelR, camCY + Math.sin(frontA1) * labelR)
     ctx.fillText('±' + frontHalf.toFixed(0) + '°', camCX + Math.cos(frontA2) * labelR, camCY + Math.sin(frontA2) * labelR)
 
@@ -284,20 +339,20 @@
     ctx.moveTo(camCX, camCY)
     ctx.arc(camCX, camCY, coneLen, canvasBase + camRad - fovRad / 2, canvasBase + camRad + fovRad / 2)
     ctx.closePath()
-    ctx.fillStyle = 'rgba(74,158,255,0.07)'
+    ctx.fillStyle = rgba(C.pr, 0.07)
     ctx.fill()
     ctx.beginPath()
     ctx.moveTo(camCX, camCY)
     ctx.arc(camCX, camCY, coneLen, canvasBase + camRad - fovRad / 2, canvasBase + camRad + fovRad / 2)
     ctx.closePath()
-    ctx.strokeStyle = 'rgba(74,158,255,0.6)'
+    ctx.strokeStyle = rgba(C.pr, 0.6)
     ctx.lineWidth = 1
     ctx.stroke()
 
     ctx.beginPath()
     ctx.moveTo(camCX, camCY)
     ctx.lineTo(camCX + Math.cos(canvasBase + camRad) * 32, camCY + Math.sin(canvasBase + camRad) * 32)
-    ctx.strokeStyle = 'rgba(74,158,255,0.9)'
+    ctx.strokeStyle = rgba(C.pr, 0.9)
     ctx.lineWidth = 1.5
     ctx.stroke()
 
@@ -307,7 +362,7 @@
     ctx.beginPath()
     ctx.moveTo(bsC.x, bsC.y)
     ctx.lineTo(beC.x, beC.y)
-    ctx.strokeStyle = 'rgba(255,74,74,0.25)'
+    ctx.strokeStyle = rgba(C.dr, 0.25)
     ctx.lineWidth = 1
     ctx.setLineDash([4, 3])
     ctx.stroke()
@@ -316,51 +371,51 @@
     ctx.beginPath()
     ctx.moveTo(camCX, camCY)
     ctx.lineTo(bC.x, bC.y)
-    ctx.strokeStyle = 'rgba(255,74,74,0.12)'
+    ctx.strokeStyle = rgba(C.dr, 0.12)
     ctx.lineWidth = 0.5
     ctx.stroke()
 
     if (inFov) {
       ctx.beginPath()
       ctx.arc(bC.x, bC.y, 14, 0, Math.PI * 2)
-      ctx.fillStyle = 'rgba(0,229,160,0.12)'
+      ctx.fillStyle = rgba(C.sr, 0.12)
       ctx.fill()
     }
 
     ctx.beginPath()
     ctx.arc(bC.x, bC.y, 5, 0, Math.PI * 2)
-    ctx.fillStyle = inFov ? '#00e5a0' : '#ff4a4a'
+    ctx.fillStyle = inFov ? C.s : C.d
     ctx.fill()
-    ctx.strokeStyle = inFov ? 'rgba(0,229,160,0.5)' : 'rgba(255,74,74,0.4)'
+    ctx.strokeStyle = inFov ? rgba(C.sr, 0.5) : rgba(C.dr, 0.4)
     ctx.lineWidth = 1.5
     ctx.stroke()
 
-    ctx.font = "9px 'Courier New', monospace"
+    ctx.font = "11px Saira Condensed, Arial Narrow, Arial, sans-serif"
     ctx.textAlign = 'left'
-    ctx.fillStyle = inFov ? 'rgba(0,229,160,0.7)' : 'rgba(255,100,100,0.6)'
+    ctx.fillStyle = inFov ? rgba(C.sr, 0.7) : rgba(C.dr, 0.7)
     ctx.fillText('TGT', bC.x + 8, bC.y - 4)
 
     ctx.beginPath()
     ctx.arc(bsC.x, bsC.y, 4, 0, Math.PI * 2)
-    ctx.fillStyle = '#ff4a4a'
+    ctx.fillStyle = C.d
     ctx.fill()
     ctx.beginPath()
     ctx.arc(beC.x, beC.y, 4, 0, Math.PI * 2)
-    ctx.fillStyle = '#ff9944'
+    ctx.fillStyle = C.w
     ctx.fill()
-    ctx.font = "8px 'Courier New', monospace"
-    ctx.fillStyle = 'rgba(255,74,74,0.5)'
+    ctx.font = "11px Saira Condensed, Arial Narrow, Arial, sans-serif"
+    ctx.fillStyle = rgba(C.dr, 0.5)
     ctx.textAlign = 'center'
     ctx.fillText('S', bsC.x, bsC.y + 14)
-    ctx.fillStyle = 'rgba(255,153,68,0.5)'
+    ctx.fillStyle = rgba(C.wr, 0.5)
     ctx.fillText('E', beC.x, beC.y + 14)
 
     var cr = 8
     ctx.beginPath()
     ctx.arc(camCX, camCY, cr, 0, Math.PI * 2)
-    ctx.fillStyle = '#4a9eff'
+    ctx.fillStyle = C.p
     ctx.fill()
-    ctx.strokeStyle = 'rgba(74,158,255,0.5)'
+    ctx.strokeStyle = rgba(C.pr, 0.5)
     ctx.lineWidth = 1.5
     ctx.stroke()
     var corners = [
@@ -375,7 +430,7 @@
       ctx.beginPath()
       ctx.moveTo(camCX + dx * 0.4, camCY + dy * 0.4)
       ctx.lineTo(camCX + dx, camCY + dy)
-      ctx.strokeStyle = 'rgba(74,158,255,0.5)'
+      ctx.strokeStyle = rgba(C.pr, 0.5)
       ctx.lineWidth = 1
       ctx.stroke()
     }
@@ -394,8 +449,6 @@
     setText('st-scan', st.toFixed(1) + 's')
     setText('st-angle', h360.toFixed(1) + '°')
     setText('st-dist', (dist * 1000).toFixed(0) + 'm')
-    setText('hdr-scan', st.toFixed(1) + 's')
-    setText('hdr-angle', h360.toFixed(1) + '°')
 
     var travelEl = $('st-travel')
     var blindEl = $('st-blind')
@@ -422,9 +475,9 @@
       if (total > 0) {
         var risk = (prevBlindStreak / total) * 100
         riskEl.textContent = risk.toFixed(0) + '%'
-        riskEl.style.color = risk > 66 ? '#ff4a4a' : risk > 33 ? '#ffcc44' : '#00e5a0'
+        riskEl.style.color = risk > 66 ? 'var(--danger)' : risk > 33 ? 'var(--warning)' : 'var(--success)'
         riskBarEl.style.width = risk + '%'
-        riskBarEl.style.background = risk > 66 ? '#ff4a4a' : risk > 33 ? '#ffcc44' : '#00e5a0'
+        riskBarEl.style.background = risk > 66 ? 'var(--danger)' : risk > 33 ? 'var(--warning)' : 'var(--success)'
       } else {
         riskEl.textContent = '—'
         riskBarEl.style.width = '0%'
@@ -596,6 +649,7 @@
     ctx = canvas.getContext('2d')
     if (!ctx) return
 
+    initTheme()
     running = true
     resize()
     updateZoomLabel()

index.html

@@ -5,6 +5,9 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Coastal Surveillance Simulator</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css" />
 </head>
 
@@ -16,8 +19,33 @@
         <h1>Coastal Surveillance Sim</h1>
         <span class="sub">// PTZ camera model</span>
         <div class="spacer"></div>
-        <div class="hstat">SCAN <span id="hdr-scan">—</span></div>
-        <div class="hstat" style="margin-left: 12px">HEADING <span id="hdr-angle">—</span></div>
+        <div class="theme-toggle" id="theme-toggle">
+          <button type="button" class="theme-btn" data-theme-val="light" title="Light theme" aria-label="Light theme">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <circle cx="8" cy="8" r="3" stroke="currentColor" stroke-width="1.5"/>
+              <line x1="8" y1="1" x2="8" y2="3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              <line x1="8" y1="13" x2="8" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              <line x1="1" y1="8" x2="3" y2="8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              <line x1="13" y1="8" x2="15" y2="8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              <line x1="3.05" y1="3.05" x2="4.46" y2="4.46" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              <line x1="11.54" y1="11.54" x2="12.95" y2="12.95" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              <line x1="12.95" y1="3.05" x2="11.54" y2="4.46" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              <line x1="4.46" y1="11.54" x2="3.05" y2="12.95" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </button>
+          <button type="button" class="theme-btn" data-theme-val="dark" title="Dark theme" aria-label="Dark theme">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path d="M13.5 10.5A6 6 0 0 1 5.5 2.5a6 6 0 1 0 8 8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+          <button type="button" class="theme-btn" data-theme-val="system" title="System theme" aria-label="System theme">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <rect x="1" y="2" width="14" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
+              <line x1="5" y1="14" x2="11" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              <line x1="8" y1="12" x2="8" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </button>
+        </div>
       </div>
 
       <div id="canvas-wrap">

style.css

@@ -10,35 +10,84 @@ body {
 }
 
 .coastal-surveillance-sim {
-  --bg0: #080e14;
-  --bg1: #0c1520;
-  --bg2: #111d2c;
-  --bg3: #162030;
-  --accent: #4a9eff;
-  --accent-dim: rgba(74, 158, 255, 0.18);
-  --accent-glow: rgba(74, 158, 255, 0.08);
-  --text: #c8daf0;
-  --text-muted: #4a6a8a;
-  --text-dim: #2a4a6a;
-  --border: rgba(74, 158, 255, 0.15);
-  --border-bright: rgba(74, 158, 255, 0.35);
-  --danger: #ff4a4a;
-  --success: #00e5a0;
-  --warn: #ffcc44;
-  --font: 'Courier New', monospace;
+  /* SEA.AI Design Tokens — DARK theme (default) */
+  --surface-1: #101214;
+  --surface-2: #181B1E;
+  --surface-3: #202428;
+  --surface-4: #292E33;
+  --surface-5: #31373D;
+
+  --content-hi:  #DCDEE0;
+  --content-mid: #B9BDC1;
+  --content-lo:  #6B7177;
+
+  --primary:         #0A67C2;
+  --primary-dim:     #084C91;
+  --primary-content: #CFE5FC;
+  --primary-rgb:     10, 103, 194;
+
+  --danger:         #C20A20;
+  --danger-dim:     #910818;
+  --danger-content: #FA9EA9;
+  --danger-rgb:     194, 10, 32;
+
+  --warning:         #C2940A;
+  --warning-content: #FAE39E;
+  --warning-rgb:     194, 148, 10;
+
+  --success:         #14A87A;
+  --success-content: #6EDEB9;
+  --success-rgb:     20, 168, 122;
+
+  --stroke: 1px solid rgba(255, 255, 255, 0.07);
+
+  --radious-s: 4px;
+  --radious-m: 8px;
+
+  --sp-xs: 4px;
+  --sp-s:  8px;
+  --sp-m:  12px;
+  --sp-l:  16px;
+  --sp-xl: 24px;
+
+  --font: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif;
 
   box-sizing: border-box;
   width: 100%;
-  min-height: 100%;
   height: 100%;
-  background: var(--bg0);
-  color: var(--text);
+  background: var(--surface-1);
+  color: var(--content-hi);
   font-family: var(--font);
-  font-size: 13px;
+  font-size: 14px;
   overflow: hidden;
   display: grid;
-  grid-template-columns: 1fr 252px;
-  grid-template-rows: 38px 1fr;
+  grid-template-columns: 1fr 264px;
+  grid-template-rows: 40px 1fr;
+}
+
+/* SEA.AI Design Tokens — LIGHT theme */
+.coastal-surveillance-sim[data-theme="light"] {
+  --surface-1: #B9BDC1;
+  --surface-2: #CBCED1;
+  --surface-3: #DCDEE0;
+  --surface-4: #EEEFF0;
+  --surface-5: #FFFFFF;
+
+  --content-hi:  #101214;
+  --content-mid: #292E33;
+  --content-lo:  #6B7177;
+
+  --primary-dim:     rgba(10, 103, 194, 0.12);
+  --primary-content: #0A67C2;
+
+  --danger-dim:     rgba(194, 10, 32, 0.1);
+  --danger-content: #C20A20;
+
+  --warning-content: #9B7508;
+
+  --success-content: #0A6E50;
+
+  --stroke: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .coastal-surveillance-sim *,
@@ -47,345 +96,413 @@ body {
   box-sizing: border-box;
 }
 
+/* ── Header ─────────────────────────────────────────── */
+
 #header {
   grid-column: 1 / -1;
-  padding: 0 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg1);
+  padding: 0 var(--sp-l);
+  border-bottom: var(--stroke);
+  background: var(--surface-2);
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: var(--sp-l);
 }
+
 #header h1 {
-  font-size: 11px;
-  font-weight: normal;
-  letter-spacing: 0.18em;
-  color: var(--accent);
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--content-hi);
   text-transform: uppercase;
+  margin: 0;
 }
+
 #header .sub {
-  font-size: 10px;
-  color: var(--text-muted);
-  letter-spacing: 0.08em;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--content-lo);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
+
 #header .spacer {
   flex: 1;
 }
-#header .hstat {
-  font-size: 10px;
-  letter-spacing: 0.1em;
-  color: var(--text-muted);
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-#header .hstat span {
-  color: var(--accent);
-}
+
+
 .blink {
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--success);
+  flex-shrink: 0;
   animation: blink 1.4s ease-in-out infinite;
 }
+
 @keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.15;
-  }
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.15; }
 }
 
+/* Theme toggle */
+.theme-toggle {
+  display: flex;
+  gap: 1px;
+  background: var(--surface-4);
+  border-radius: var(--radious-s);
+  padding: 2px;
+}
+
+.theme-btn {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  color: var(--content-lo);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+.theme-btn:hover { color: var(--content-hi); }
+
+.theme-btn.active {
+  background: var(--surface-2);
+  color: var(--content-hi);
+}
+
+/* ── Canvas ──────────────────────────────────────────── */
+
 #canvas-wrap {
   position: relative;
-  background: var(--bg0);
+  background: var(--surface-1);
   overflow: hidden;
 }
+
 #canvas-wrap canvas {
   display: block;
   width: 100%;
   height: 100%;
 }
 
+/* ── Zoom bar ──���─────────────────────────────────────── */
+
 .zoom-bar {
   position: absolute;
-  bottom: 10px;
-  right: 10px;
+  bottom: var(--sp-m);
+  right: var(--sp-m);
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--sp-xs);
   z-index: 10;
 }
+
 .zoom-label {
   font-family: var(--font);
-  font-size: 10px;
-  color: var(--accent);
-  min-width: 34px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--content-mid);
+  min-width: 36px;
   text-align: center;
-  letter-spacing: 0.08em;
 }
 
+.zoom-btn {
+  width: 32px;
+  height: 32px;
+  background: var(--surface-3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radious-s);
+  color: var(--content-mid);
+  font-family: var(--font);
+  font-size: 18px;
+  font-weight: 400;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+  line-height: 1;
+}
+
+.zoom-btn:hover {
+  background: var(--surface-4);
+  color: var(--content-hi);
+}
+
+/* ── Side panel ──────────────────────────────────────── */
+
 #panel {
-  background: var(--bg1);
-  border-left: 1px solid var(--border);
-  padding: 10px;
+  background: var(--surface-2);
+  border-left: var(--stroke);
+  padding: var(--sp-s);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--sp-s);
 }
 
+/* ── Sections ────────────────────────────────────────── */
+
 .section {
-  border: 1px solid var(--border);
-  background: var(--bg2);
+  background: var(--surface-3);
+  border-radius: var(--radious-m);
+  overflow: hidden;
 }
+
 .section-title {
-  font-size: 9px;
-  letter-spacing: 0.2em;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0;
   text-transform: uppercase;
-  color: var(--accent);
-  padding: 5px 8px;
-  background: rgba(74, 158, 255, 0.05);
-  border-bottom: 1px solid var(--border);
+  color: var(--content-lo);
+  padding: var(--sp-s) var(--sp-m);
 }
+
 .section-body {
-  padding: 8px;
+  padding: 0 var(--sp-m) var(--sp-m);
 }
 
+/* ── Stats grid ──────────────────────────────────────── */
+
 .stats-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
-  background: var(--border);
+  background: var(--surface-2);
 }
+
 .stat {
-  background: var(--bg2);
-  padding: 6px 8px;
+  background: var(--surface-4);
+  padding: var(--sp-s) var(--sp-m);
 }
+
 .stat .lbl {
-  font-size: 8px;
-  letter-spacing: 0.14em;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0;
   text-transform: uppercase;
-  color: var(--text-muted);
+  color: var(--content-lo);
   margin-bottom: 2px;
 }
+
 .stat .val {
-  font-size: 15px;
-  color: var(--text);
-  letter-spacing: 0.02em;
-}
-.stat .val.active {
-  color: var(--success);
-}
-.stat .val.inactive {
-  color: var(--danger);
+  font-size: 20px;
+  font-weight: 400;
+  color: var(--content-hi);
+  line-height: 1.2;
 }
 
+.stat .val.active   { color: var(--success-content); }
+.stat .val.inactive { color: var(--danger-content); }
+
 .stats-extra {
   margin-top: 1px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
-  background: var(--border);
+  background: var(--surface-2);
 }
+
 .stats-extra .stat-risk {
   grid-column: 1 / -1;
-  border-top: 1px solid rgba(255, 74, 74, 0.2);
-}
-.st-sm {
-  font-size: 13px;
 }
+
+.st-sm { font-size: 16px; }
+
 .stat-sub {
-  font-size: 9px;
-  color: var(--text-muted);
-  opacity: 0.5;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--content-lo);
   margin-top: 2px;
-  letter-spacing: 0.06em;
 }
+
 .risk-row {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-top: 3px;
+  gap: var(--sp-s);
+  margin-top: 4px;
 }
+
 .st-risk-val {
-  font-size: 14px;
-  min-width: 38px;
+  font-size: 16px;
+  min-width: 44px;
 }
+
 .risk-track {
   flex: 1;
   height: 3px;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--surface-5);
+  border-radius: 2px;
   overflow: hidden;
 }
+
 .risk-fill {
   height: 100%;
   width: 0%;
-  background: #ff4a4a;
-  transition: width 0.4s;
+  background: var(--danger);
+  border-radius: 2px;
+  transition: width 0.4s ease-in-out;
 }
 
+/* ── Controls ────────────────────────────────────────── */
+
 .ctrl {
-  margin-bottom: 8px;
+  margin-bottom: var(--sp-m);
 }
+
 .ctrl:last-child {
   margin-bottom: 0;
 }
+
 .ctrl label {
   display: flex;
   justify-content: space-between;
-  font-size: 10px;
-  color: var(--text-muted);
-  margin-bottom: 3px;
-  letter-spacing: 0.06em;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--content-lo);
+  margin-bottom: var(--sp-xs);
   text-transform: uppercase;
 }
+
 .ctrl label span {
-  color: var(--text);
-  font-size: 11px;
+  color: var(--content-hi);
+  font-size: 14px;
+  font-weight: 400;
 }
 
+/* Range slider */
 input[type='range'] {
   width: 100%;
   -webkit-appearance: none;
-  height: 2px;
-  background: rgba(74, 158, 255, 0.15);
+  appearance: none;
+  height: 3px;
+  background: var(--surface-5);
   outline: none;
   cursor: pointer;
+  border-radius: 2px;
 }
+
 input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 10px;
-  height: 10px;
-  background: var(--accent);
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: var(--primary);
   cursor: pointer;
   border-radius: 50%;
-  box-shadow: 0 0 4px rgba(74, 158, 255, 0.6);
 }
+
 input[type='range']::-moz-range-thumb {
-  width: 10px;
-  height: 10px;
-  background: var(--accent);
+  width: 14px;
+  height: 14px;
+  background: var(--primary);
   cursor: pointer;
   border-radius: 50%;
   border: none;
 }
 
+/* Direction toggle */
 .dir-toggle {
   display: flex;
-  gap: 4px;
-  margin-top: 4px;
+  gap: var(--sp-xs);
+  margin-top: var(--sp-xs);
 }
+
 .dir-btn {
   flex: 1;
-  padding: 5px 4px;
-  background: var(--bg3);
-  border: 1px solid var(--border);
-  color: var(--text-muted);
+  height: 40px;
+  background: var(--surface-4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radious-s);
+  color: var(--content-lo);
   font-family: var(--font);
-  font-size: 10px;
-  letter-spacing: 0.1em;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.015em;
   cursor: pointer;
   text-align: center;
   text-transform: uppercase;
-  transition: all 0.12s;
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
+
 .dir-btn:hover {
-  border-color: var(--accent);
-  color: var(--accent);
+  background: var(--surface-5);
+  color: var(--content-hi);
 }
+
 .dir-btn.active {
-  background: var(--accent-dim);
-  border-color: var(--accent);
-  color: var(--accent);
+  background: var(--primary-dim);
+  border-color: var(--primary);
+  color: var(--primary-content);
 }
 
+/* Hint */
 .hint {
-  font-size: 9px;
-  color: var(--text-muted);
-  letter-spacing: 0.04em;
-  line-height: 1.7;
-  opacity: 0.7;
-}
-.hint-s {
-  color: #ff6b6b;
-}
-.hint-e {
-  color: #ff9944;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--content-lo);
+  line-height: 1.5;
 }
 
+.hint-s { color: var(--danger-content); }
+.hint-e { color: var(--warning-content); }
+
+/* ── Legend ──────────────────────────────────────────── */
+
 .legend {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--sp-s);
 }
+
 .leg-item {
   display: flex;
   align-items: center;
-  gap: 7px;
-  font-size: 10px;
-  color: var(--text-muted);
+  gap: var(--sp-s);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--content-mid);
+  text-transform: uppercase;
 }
+
 .leg-dot {
-  width: 7px;
-  height: 7px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
 }
-.leg-dot--cam {
-  background: #4a9eff;
-}
-.leg-dot--boat {
-  background: #ff4a4a;
-}
-.leg-dot--det {
-  background: #00e5a0;
-}
+
+.leg-dot--cam  { background: #0A67C2; }
+.leg-dot--boat { background: #C20A20; }
+.leg-dot--det  { background: #14A87A; }
+
 .leg-line {
-  width: 14px;
+  width: 16px;
   height: 1px;
   flex-shrink: 0;
 }
-.leg-line--rings {
-  background: rgba(74, 158, 255, 0.4);
-}
+
+.leg-line--rings { background: rgba(10, 103, 194, 0.5); }
+
 .leg-line--arc {
-  background: rgba(74, 158, 255, 0.25);
-  border-top: 1px dashed rgba(74, 158, 255, 0.4);
+  border-top: 1px dashed rgba(10, 103, 194, 0.5);
   height: 0;
-  padding-top: 1px;
 }
 
-.zoom-btn {
-  width: 26px;
-  height: 26px;
-  background: rgba(8, 14, 20, 0.9);
-  border: 1px solid var(--border-bright);
-  color: var(--text);
-  font-family: var(--font);
-  font-size: 15px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: border-color 0.12s;
-}
-.zoom-btn:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-}
+/* ── Responsive ──────────────────────────────────────── */
 
 @media (max-width: 700px) {
   .coastal-surveillance-sim {
     grid-template-columns: 1fr;
-    grid-template-rows: 38px 55vw 1fr;
+    grid-template-rows: 40px 55vw 1fr;
   }
   #panel {
     border-left: none;
-    border-top: 1px solid var(--border);
+    border-top: var(--stroke);
   }
 }