feat:themes, tactilea codec

src/lib/components/SummaryCurve.svelte

@@ -313,15 +313,15 @@
     grid-template-rows: auto auto auto;
     gap: 0.4rem;
     padding: 0.56rem 0.62rem 0.58rem;
-    border: 1px solid rgb(130 174 202 / 0.42);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.42);
     border-radius: 0.92rem;
     background:
-      linear-gradient(160deg, rgb(10 18 26 / 0.76) 0%, rgb(3 8 12 / 0.62) 48%, rgb(1 2 4 / 0.76) 100%),
-      radial-gradient(circle at 12% 0, rgb(62 232 255 / 0.1), transparent 40%);
+      linear-gradient(160deg, rgb(var(--hud-surface-alt-rgb) / 0.76) 0%, rgb(var(--hud-surface-rgb) / 0.62) 48%, rgb(var(--hud-surface-deep-rgb) / 0.76) 100%),
+      radial-gradient(circle at 12% 0, rgb(var(--hud-glow-rgb) / 0.1), transparent 40%);
     box-shadow:
-      inset 0 0 0 1px rgb(165 224 255 / 0.08),
+      inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.08),
       inset 0 -24px 32px rgb(0 0 0 / 0.48),
-      0 0 14px rgb(62 232 255 / 0.14);
+      0 0 14px rgb(var(--hud-glow-rgb) / 0.14);
     opacity: 1;
     transform: translateX(0) scale(1) rotate(0);
     transition:
@@ -360,7 +360,7 @@
   .panel-code {
     margin: 0;
     font-size: 0.63rem;
-    color: rgb(153 188 211 / 0.88);
+    color: rgb(var(--hud-text-dim-rgb) / 0.88);
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }
@@ -368,7 +368,7 @@
   .panel-title {
     margin: 0.12rem 0 0;
     font-size: 0.75rem;
-    color: rgb(225 243 255 / 0.96);
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
     letter-spacing: 0.05em;
   }
 
@@ -381,36 +381,36 @@
   }
 
   .icon-chip {
-    border: 1px solid rgb(138 178 204 / 0.44);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.44);
     border-radius: 999px;
     padding: 0.08rem 0.36rem;
     font-size: 0.58rem;
     letter-spacing: 0.08em;
-    color: rgb(209 237 255 / 0.94);
-    background: rgb(5 13 20 / 0.66);
+    color: rgb(var(--hud-text-main-rgb) / 0.94);
+    background: rgb(var(--hud-surface-rgb) / 0.66);
   }
 
   .icon-chip.tone-cyan {
-    border-color: rgb(62 232 255 / 0.54);
+    border-color: rgb(var(--hud-cyan-rgb) / 0.54);
   }
 
   .icon-chip.tone-lime {
-    border-color: rgb(133 255 68 / 0.56);
+    border-color: rgb(var(--hud-lime-rgb) / 0.56);
   }
 
   .icon-chip.tone-orange {
-    border-color: rgb(255 91 63 / 0.58);
+    border-color: rgb(var(--hud-orange-rgb) / 0.58);
   }
 
   .chart-stage {
     position: relative;
     block-size: clamp(6.4rem, 9vw, 8.2rem);
     overflow: hidden;
-    border: 1px solid rgb(132 174 200 / 0.32);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.32);
     border-radius: 0.62rem;
     background:
-      linear-gradient(180deg, rgb(8 17 26 / 0.68), rgb(1 6 10 / 0.78)),
-      radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.09), transparent 45%);
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.68), rgb(var(--hud-surface-deep-rgb) / 0.78)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.09), transparent 45%);
   }
 
   svg {
@@ -420,7 +420,7 @@
   }
 
   .grid-lines line {
-    stroke: rgb(138 184 210 / 0.16);
+    stroke: rgb(var(--hud-border-strong-rgb) / 0.16);
     stroke-width: 0.45;
   }
 
@@ -430,20 +430,20 @@
 
   .summary-line {
     fill: none;
-    stroke: rgb(62 232 255 / 0.96);
+    stroke: rgb(var(--hud-cyan-rgb) / 0.96);
     stroke-width: 1.35;
     stroke-linecap: round;
     stroke-linejoin: round;
-    filter: drop-shadow(0 0 4px rgb(62 232 255 / 0.22));
+    filter: drop-shadow(0 0 4px rgb(var(--hud-cyan-rgb) / 0.22));
   }
 
   .summary-dot {
-    fill: rgb(133 255 68 / 0.98);
-    filter: drop-shadow(0 0 6px rgb(133 255 68 / 0.3));
+    fill: rgb(var(--hud-lime-rgb) / 0.98);
+    filter: drop-shadow(0 0 6px rgb(var(--hud-lime-rgb) / 0.3));
   }
 
   .axis-label {
-    fill: rgb(176 204 222 / 0.88);
+    fill: rgb(var(--hud-text-main-rgb) / 0.88);
     font-size: 2.8px;
     font-weight: 500;
     letter-spacing: 0.02em;
@@ -453,11 +453,11 @@
   }
 
   .y-axis-label {
-    fill: rgb(162 198 220 / 0.84);
+    fill: rgb(var(--hud-text-dim-rgb) / 0.84);
   }
 
   .x-axis-label {
-    fill: rgb(162 198 220 / 0.9);
+    fill: rgb(var(--hud-text-dim-rgb) / 0.9);
   }
 
   .empty-state {
@@ -466,11 +466,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgb(155 186 204 / 0.76);
+    color: rgb(var(--hud-text-dim-rgb) / 0.76);
     font-size: 0.66rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    background: linear-gradient(180deg, rgb(2 7 11 / 0.06), rgb(2 7 11 / 0.18));
+    background: linear-gradient(180deg, rgb(var(--hud-surface-deep-rgb) / 0.06), rgb(var(--hud-surface-deep-rgb) / 0.18));
   }
 
   .panel-foot {
@@ -486,13 +486,13 @@
     display: inline-flex;
     align-items: center;
     gap: 0.28rem;
-    color: rgb(173 206 227 / 0.9);
+    color: rgb(var(--hud-text-main-rgb) / 0.9);
     font-size: 0.62rem;
     letter-spacing: 0.04em;
   }
 
   .metric-text {
-    color: rgb(146 173 191 / 0.82);
+    color: rgb(var(--hud-text-dim-rgb) / 0.82);
     text-transform: uppercase;
   }
 
@@ -503,15 +503,15 @@
   }
 
   .dot.tone-cyan {
-    background: rgb(62 232 255);
+    background: rgb(var(--hud-cyan-rgb));
   }
 
   .dot.tone-lime {
-    background: rgb(133 255 68);
+    background: rgb(var(--hud-lime-rgb));
   }
 
   .dot.tone-orange {
-    background: rgb(255 91 63);
+    background: rgb(var(--hud-orange-rgb));
   }
 
   .value {