feat: Align UI to brand guidelines — Oxide Orange #F26622 replaces red accent

Defines oxide color scale (50-950) via Tailwind v4 @theme directive.
Swaps all accent red-* classes to oxide-* across layouts, auth views,
and footer. Semantic reds (error banners, offline status, stop button)
intentionally preserved.

Brand spec: Corrosion_Management_Brand_Guidelines.pdf

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

frontend/src/components/layout/DashboardLayout.vue

@@ -62,7 +62,7 @@ function handleLogout() {
         <div class="flex items-center gap-3">
           <img src="/logo.png" alt="Corrosion" class="h-8 w-8" />
           <div>
-            <h1 class="text-sm font-bold text-red-500 tracking-wider">CORROSION</h1>
+            <h1 class="text-sm font-bold text-oxide-500 tracking-wider">CORROSION</h1>
             <p class="text-xs text-neutral-500">{{ auth.license?.server_name || 'Server Management' }}</p>
           </div>
         </div>
@@ -93,7 +93,7 @@ function handleLogout() {
           :to="item.path"
           class="flex items-center gap-3 px-4 py-2 mx-2 rounded-lg text-sm transition-colors"
           :class="isActive(item.path)
-            ? 'bg-red-500/10 text-red-400'
+            ? 'bg-oxide-500/10 text-oxide-400'
             : 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
         >
           <component :is="item.icon" class="w-4 h-4" />
@@ -110,7 +110,7 @@ function handleLogout() {
           </div>
           <button
             @click="handleLogout"
-            class="text-neutral-500 hover:text-red-400 transition-colors"
+            class="text-neutral-500 hover:text-oxide-400 transition-colors"
           >
             <LogOut class="w-4 h-4" />
           </button>

frontend/src/components/layout/PublicLayout.vue

@@ -9,7 +9,7 @@ import { RouterView } from 'vue-router'
     <footer class="py-6 text-center text-neutral-600 text-sm border-t border-neutral-800">
       <div class="flex items-center justify-center gap-2">
         <img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
-        <span>Powered by <span class="text-red-500 font-semibold">Corrosion</span></span>
+        <span>Powered by <span class="text-oxide-500 font-semibold">Corrosion</span></span>
       </div>
     </footer>
   </div>

frontend/src/style.css

@@ -1,12 +1,25 @@
 @import "tailwindcss";
 
-/* Corrosion Platform — Custom Styles */
+/* Corrosion Brand — Oxide Orange #F26622 */
+@theme {
+  --color-oxide-50: #FEF3EB;
+  --color-oxide-100: #FDE3D0;
+  --color-oxide-200: #FBC4A1;
+  --color-oxide-300: #F9A472;
+  --color-oxide-400: #F58543;
+  --color-oxide-500: #F26622;
+  --color-oxide-600: #D9541A;
+  --color-oxide-700: #B84315;
+  --color-oxide-800: #933510;
+  --color-oxide-900: #6E280C;
+  --color-oxide-950: #3D1506;
+}
 
 /* Dark mode is default — Rust servers run at night */
 :root {
-  --corrosion-red: #ef4444;
+  --corrosion-accent: #F26622;
-  --corrosion-orange: #f97316;
+  --corrosion-dark: #000000;
-  --corrosion-dark: #0f0f0f;
+  --corrosion-charcoal: #1E2024;
   --corrosion-surface: #1a1a1a;
   --corrosion-border: #2a2a2a;
 }

frontend/src/views/auth/LoginView.vue

@@ -68,7 +68,7 @@ async function handleLogin() {
               required
               autocomplete="email"
               placeholder="admin@example.com"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
+              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
             />
           </div>
 
@@ -83,14 +83,14 @@ async function handleLogin() {
               required
               autocomplete="current-password"
               placeholder="Enter your password"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
+              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
             />
           </div>
 
           <button
             type="submit"
             :disabled="loading"
-            class="w-full py-2.5 bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
+            class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
           >
             <svg
               v-if="loading"
@@ -120,7 +120,7 @@ async function handleLogin() {
         <!-- Register link -->
         <p class="mt-6 text-center text-sm text-neutral-500">
           Don't have an account?
-          <router-link to="/register" class="text-red-400 hover:text-red-300 transition-colors">
+          <router-link to="/register" class="text-oxide-400 hover:text-oxide-300 transition-colors">
             Create one
           </router-link>
         </p>

frontend/src/views/auth/RegisterView.vue

@@ -101,7 +101,7 @@ async function handleRegister() {
               required
               autocomplete="email"
               placeholder="you@example.com"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
+              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
             />
           </div>
 
@@ -116,7 +116,7 @@ async function handleRegister() {
               required
               autocomplete="username"
               placeholder="At least 3 characters"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
+              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
             />
           </div>
 
@@ -131,7 +131,7 @@ async function handleRegister() {
               required
               autocomplete="new-password"
               placeholder="At least 8 characters"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
+              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
             />
           </div>
 
@@ -146,7 +146,7 @@ async function handleRegister() {
               required
               autocomplete="new-password"
               placeholder="Re-enter your password"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
+              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
             />
           </div>
 
@@ -161,14 +161,14 @@ async function handleRegister() {
               required
               autocomplete="off"
               placeholder="XXXX-XXXX-XXXX-XXXX"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors font-mono tracking-wider"
+              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors font-mono tracking-wider"
             />
           </div>
 
           <button
             type="submit"
             :disabled="loading || !formValid"
-            class="w-full py-2.5 bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
+            class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
           >
             <svg
               v-if="loading"
@@ -198,7 +198,7 @@ async function handleRegister() {
         <!-- Login link -->
         <p class="mt-6 text-center text-sm text-neutral-500">
           Already have an account?
-          <router-link to="/login" class="text-red-400 hover:text-red-300 transition-colors">
+          <router-link to="/login" class="text-oxide-400 hover:text-oxide-300 transition-colors">
             Sign in
           </router-link>
         </p>