From 9e2138d1ce816747175902e757c069d1b9d10feb Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Sat, 21 Feb 2026 15:52:23 +0100
Subject: [PATCH] style(pfd): match A320 reference colors from licarth/a320pfd

- Sky: #19b5e6, ground: #64241a (darker, more accurate)
- Tape backgrounds: dark blueish #1a2628/#1d282a (not pure grey)
- Tape borders: #304c50 (teal-tinted)
- Readout text: brighter green #3ae061
- Readout box borders: yellow #fbe044 (matches real A320)
- Aircraft symbol yellow: #faf56c
- Heading yellow: #fbe044
- VS background: #0a171d

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/components/flightlab/pfd/PfdAltitudeTape.vue     | 10 +++++-----
 .../flightlab/pfd/PfdAttitudeIndicator.vue           | 10 +++++-----
 app/components/flightlab/pfd/PfdHeadingIndicator.vue | 12 ++++++------
 app/components/flightlab/pfd/PfdSpeedTape.vue        | 12 ++++++------
 app/components/flightlab/pfd/PfdVerticalSpeed.vue    |  6 +++---
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/app/components/flightlab/pfd/PfdAltitudeTape.vue b/app/components/flightlab/pfd/PfdAltitudeTape.vue
index f5f55ba..9d03bfb 100644
--- a/app/components/flightlab/pfd/PfdAltitudeTape.vue
+++ b/app/components/flightlab/pfd/PfdAltitudeTape.vue
@@ -65,7 +65,7 @@ const tapeInnerHeight = computed(() => props.height - 4)
       y="0"
       :width="width"
       :height="height"
-      fill="#16181f"
+      fill="#1a2628"
       rx="1"
     />
     <rect
@@ -73,8 +73,8 @@ const tapeInnerHeight = computed(() => props.height - 4)
       :y="tapeInnerY"
       :width="tapeInnerWidth"
       :height="tapeInnerHeight"
-      fill="#1c1e26"
-      stroke="#3a3d48"
+      fill="#1d282a"
+      stroke="#304c50"
       stroke-width="0.8"
     />
 
@@ -112,14 +112,14 @@ const tapeInnerHeight = computed(() => props.height - 4)
       :width="readoutBoxWidth"
       :height="readoutBoxHeight"
       fill="#02040b"
-      stroke="#19e34a"
+      stroke="#fbe044"
       stroke-width="1.4"
       rx="1.5"
     />
     <text
       :x="width / 2"
       :y="centerY + 5"
-      fill="#19e34a"
+      fill="#3ae061"
       font-size="14"
       font-weight="bold"
       text-anchor="middle"
diff --git a/app/components/flightlab/pfd/PfdAttitudeIndicator.vue b/app/components/flightlab/pfd/PfdAttitudeIndicator.vue
index 2a6420d..984724a 100644
--- a/app/components/flightlab/pfd/PfdAttitudeIndicator.vue
+++ b/app/components/flightlab/pfd/PfdAttitudeIndicator.vue
@@ -17,7 +17,7 @@ const clipId = computed(() => `att-clip-${uid}`)
 const skyGradId = computed(() => `att-sky-${uid}`)
 const groundGradId = computed(() => `att-ground-${uid}`)
 const WHITE = '#f4f6fb'
-const YELLOW = '#ffe100'
+const YELLOW = '#faf56c'
 
 const pitchMarks = computed(() => {
   const marks: Array<{ deg: number; y: number; isLabel: boolean; width: number }> = []
@@ -84,12 +84,12 @@ const dotRadius = computed(() => 4)
         <circle :cx="cx" :cy="cy" :r="size * 0.46" />
       </clipPath>
       <linearGradient :id="skyGradId" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="#0a4a8a" />
-        <stop offset="100%" stop-color="#22a7eb" />
+        <stop offset="0%" stop-color="#0a4080" />
+        <stop offset="100%" stop-color="#19b5e6" />
       </linearGradient>
       <linearGradient :id="groundGradId" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="#b26113" />
-        <stop offset="100%" stop-color="#5a2e08" />
+        <stop offset="0%" stop-color="#64241a" />
+        <stop offset="100%" stop-color="#3a1510" />
       </linearGradient>
     </defs>
 
diff --git a/app/components/flightlab/pfd/PfdHeadingIndicator.vue b/app/components/flightlab/pfd/PfdHeadingIndicator.vue
index 551bbb9..6eff01b 100644
--- a/app/components/flightlab/pfd/PfdHeadingIndicator.vue
+++ b/app/components/flightlab/pfd/PfdHeadingIndicator.vue
@@ -89,7 +89,7 @@ const readoutBoxHeight = 18
       y="0"
       :width="width"
       :height="height"
-      fill="#16181f"
+      fill="#1a2628"
       rx="1"
     />
     <rect
@@ -97,8 +97,8 @@ const readoutBoxHeight = 18
       y="1.5"
       :width="width - 3"
       :height="height - 3"
-      fill="#1c1e26"
-      stroke="#3a3d48"
+      fill="#1d282a"
+      stroke="#304c50"
       stroke-width="0.8"
     />
 
@@ -109,14 +109,14 @@ const readoutBoxHeight = 18
       :width="readoutBoxWidth"
       :height="readoutBoxHeight"
       fill="#02040b"
-      stroke="#facc15"
+      stroke="#fbe044"
       stroke-width="1"
       rx="2"
     />
     <text
       :x="centerX"
       :y="16"
-      fill="#facc15"
+      fill="#fbe044"
       font-size="12"
       font-weight="bold"
       text-anchor="middle"
@@ -128,7 +128,7 @@ const readoutBoxHeight = 18
     <!-- Center pointer triangle (yellow, pointing down from readout box) -->
     <polygon
       :points="`${centerX},${readoutBoxHeight + 6} ${centerX - 4},${readoutBoxHeight + 2} ${centerX + 4},${readoutBoxHeight + 2}`"
-      fill="#facc15"
+      fill="#fbe044"
     />
 
     <!-- Scrolling compass tape (clipped) — ticks grow upward from bottom -->
diff --git a/app/components/flightlab/pfd/PfdSpeedTape.vue b/app/components/flightlab/pfd/PfdSpeedTape.vue
index dfc44e2..7703a42 100644
--- a/app/components/flightlab/pfd/PfdSpeedTape.vue
+++ b/app/components/flightlab/pfd/PfdSpeedTape.vue
@@ -100,7 +100,7 @@ const tapeInnerHeight = computed(() => props.height - 4)
       y="0"
       :width="width"
       :height="height"
-      fill="#16181f"
+      fill="#1a2628"
       rx="1"
     />
     <rect
@@ -108,8 +108,8 @@ const tapeInnerHeight = computed(() => props.height - 4)
       :y="tapeInnerY"
       :width="tapeInnerWidth"
       :height="tapeInnerHeight"
-      fill="#1c1e26"
-      stroke="#3a3d48"
+      fill="#1d282a"
+      stroke="#304c50"
       stroke-width="0.8"
     />
 
@@ -212,7 +212,7 @@ const tapeInnerHeight = computed(() => props.height - 4)
         :y1="centerY"
         :x2="width / 2"
         :y2="trendLineEndY"
-        stroke="#19e34a"
+        stroke="#3ae061"
         stroke-width="2"
         opacity="0.8"
       />
@@ -225,14 +225,14 @@ const tapeInnerHeight = computed(() => props.height - 4)
       :width="readoutBoxWidth"
       :height="readoutBoxHeight"
       fill="#02040b"
-      stroke="#19e34a"
+      stroke="#fbe044"
       stroke-width="1.4"
       rx="1.5"
     />
     <text
       :x="width / 2"
       :y="centerY + 5"
-      fill="#19e34a"
+      fill="#3ae061"
       font-size="15"
       font-weight="bold"
       text-anchor="middle"
diff --git a/app/components/flightlab/pfd/PfdVerticalSpeed.vue b/app/components/flightlab/pfd/PfdVerticalSpeed.vue
index 6da3f50..a0162b0 100644
--- a/app/components/flightlab/pfd/PfdVerticalSpeed.vue
+++ b/app/components/flightlab/pfd/PfdVerticalSpeed.vue
@@ -63,13 +63,13 @@ const channelShape = computed(() => {
     xmlns="http://www.w3.org/2000/svg"
   >
     <!-- Background cutout -->
-    <rect x="0" y="0" :width="width" :height="height" fill="#030712" />
+    <rect x="0" y="0" :width="width" :height="height" fill="#0a171d" />
 
     <!-- Airbus-style VS channel -->
     <polygon
       :points="channelShape"
-      fill="#1c1e26"
-      stroke="#3a3d48"
+      fill="#1d282a"
+      stroke="#304c50"
       stroke-width="0.8"
     />