From f1293d799f2563ed625a40919a74df1e8e03f666 Mon Sep 17 00:00:00 2001
From: "Claude (Chronicler #59)" <claude@firefrostgaming.com>
Date: Sat, 4 Apr 2026 03:38:20 +0000
Subject: [PATCH] feat: Full Firefrost color palette in Decap CMS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔥 Fire Orange (#FF6B35) - Tasks collection, hover accents
❄️ Frost Teal (#4ECDC4) - Primary buttons, links, header border
💜 Arcane Purple (#A855F7) - Active states, focus rings, selections
🌑 Dark (#0F0F1E) - Header background

Color usage follows brand guidelines:
- Fire = Priority/Action items
- Frost = Primary actions (Save, Publish)
- Arcane = Selected/Active states
- Dark = Header/containers

Signed-off-by: claude@firefrostgaming.com
---
 admin/index.html | 183 ++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 157 insertions(+), 26 deletions(-)

diff --git a/admin/index.html b/admin/index.html
index 855cf26..2173f25 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -8,28 +8,17 @@
   <style>
     /* ═══════════════════════════════════════════════════════════
        FIREFROST GAMING - DECAP CMS BRANDING
-       Fire: #FF6B35 | Frost: #4ECDC4 | Arcane: #A855F7
-       
-       Note: Decap uses dynamic class names, so we target by 
-       structure and attributes rather than class names.
+       Fire: #FF6B35 | Frost: #4ECDC4 | Arcane: #A855F7 | Dark: #0F0F1E
     ═══════════════════════════════════════════════════════════ */
     
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     }
 
-    /* Hide any weird floating decorations */
-    body::before, body::after,
-    #nc-root::before, #nc-root::after {
-      display: none !important;
-    }
-
     /* ═══════════════════════════════════════════════════════════
-       SIDEBAR TASKS HIGHLIGHT
-       Target the first collection link in sidebar
+       🔥 TASKS - Fire Orange (Priority/Action)
     ═══════════════════════════════════════════════════════════ */
     
-    /* Target links containing "tasks" in href */
     a[href*="/collections/tasks"] {
       background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%) !important;
       color: white !important;
@@ -54,34 +43,164 @@
     }
 
     /* ═══════════════════════════════════════════════════════════
-       GENERAL BUTTON STYLING
+       ❄️ FROST TEAL - Primary Actions (Save, Publish, Create)
     ═══════════════════════════════════════════════════════════ */
     
-    /* Publish/Save buttons - Frost teal */
-    button[type="button"]:not([disabled]),
-    button[type="submit"]:not([disabled]) {
+    /* Publish/Save buttons */
+    button[class*="PublishButton"],
+    button[class*="ToolbarButton"],
+    div[class*="ToolbarButton"] > button,
+    button:not([disabled])[class*="Button"]:not([class*="Delete"]):not([class*="Cancel"]) {
+      background: linear-gradient(135deg, #4ECDC4 0%, #3DBDB5 100%) !important;
+      color: #0F0F1E !important;
+      border: none !important;
+      font-weight: 600 !important;
+    }
+
+    button[class*="PublishButton"]:hover,
+    button[class*="ToolbarButton"]:hover {
+      background: linear-gradient(135deg, #3DBDB5 0%, #4ECDC4 100%) !important;
+      box-shadow: 0 3px 12px rgba(78, 205, 196, 0.4) !important;
+    }
+
+    /* Quick Add dropdown button */
+    button[class*="DropdownButton"],
+    [class*="QuickAdd"] button {
+      background: linear-gradient(135deg, #4ECDC4 0%, #3DBDB5 100%) !important;
+      color: #0F0F1E !important;
+      border: none !important;
+      font-weight: 600 !important;
       border-radius: 6px !important;
     }
 
     /* ═══════════════════════════════════════════════════════════
-       CLEAN UP - Remove any unintended decorations
+       💜 ARCANE PURPLE - Selected/Active States
     ═══════════════════════════════════════════════════════════ */
     
-    /* If there are floating emojis/decorations, hide them */
-    [style*="position: absolute"],
-    [style*="position:absolute"] {
-      /* Only hide if they look decorative */
+    /* Active sidebar item */
+    a[aria-current="true"],
+    a[class*="active"],
+    li[class*="active"] > a {
+      border-left: 4px solid #A855F7 !important;
+      background: rgba(168, 85, 247, 0.1) !important;
     }
+
+    /* Selected/focused inputs */
+    input:focus, 
+    textarea:focus,
+    [class*="Editor"]:focus-within {
+      border-color: #A855F7 !important;
+      box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
+    }
+
+    /* Dropdown active items */
+    [class*="DropdownItem"]:hover,
+    [class*="MenuItem"]:hover,
+    [role="option"]:hover,
+    [role="menuitem"]:hover {
+      background: rgba(168, 85, 247, 0.15) !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════
+       🌑 DARK THEME - Headers & Containers
+    ═══════════════════════════════════════════════════════════ */
+    
+    /* Top header bar */
+    header,
+    [class*="AppHeader"],
+    nav[class*="Header"] {
+      background: #0F0F1E !important;
+      border-bottom: 2px solid #4ECDC4 !important;
+    }
+
+    /* Header text */
+    header *,
+    [class*="AppHeader"] * {
+      color: white !important;
+    }
+
+    /* Site link in header */
+    a[href*="firefrostgaming.com"] {
+      color: #4ECDC4 !important;
+      font-weight: 600 !important;
+    }
+
+    a[href*="firefrostgaming.com"]:hover {
+      color: #FF6B35 !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════
+       SIDEBAR POLISH
+    ═══════════════════════════════════════════════════════════ */
+    
+    /* Sidebar background subtle gradient */
+    aside,
+    [class*="Sidebar"],
+    nav:not([class*="Header"]) {
+      background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%) !important;
+      border-right: 1px solid rgba(78, 205, 196, 0.3) !important;
+    }
+
+    /* Collection headers */
+    [class*="SidebarHeading"],
+    [class*="CollectionLabel"] {
+      color: #0F0F1E !important;
+      font-weight: 600 !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════
+       LINKS & ACCENTS
+    ═══════════════════════════════════════════════════════════ */
+    
+    /* General links - Frost teal */
+    a:not([href*="/collections"]):not([class*="Button"]) {
+      color: #4ECDC4 !important;
+    }
+
+    a:not([href*="/collections"]):not([class*="Button"]):hover {
+      color: #FF6B35 !important;
+    }
+
+    /* Entry cards hover */
+    [class*="ListCard"]:hover,
+    [class*="EntryCard"]:hover,
+    li[class*="Entry"]:hover {
+      border-left: 3px solid #A855F7 !important;
+      background: rgba(168, 85, 247, 0.05) !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════
+       BUTTONS - SECONDARY ACTIONS
+    ═══════════════════════════════════════════════════════════ */
+    
+    /* Cancel/secondary buttons - subtle */
+    button[class*="Cancel"],
+    button[class*="Secondary"] {
+      background: transparent !important;
+      border: 2px solid #4ECDC4 !important;
+      color: #4ECDC4 !important;
+    }
+
+    button[class*="Cancel"]:hover,
+    button[class*="Secondary"]:hover {
+      background: rgba(78, 205, 196, 0.1) !important;
+    }
+
+    /* Delete buttons - keep red for danger */
+    button[class*="Delete"] {
+      background: #dc3545 !important;
+      color: white !important;
+    }
+
   </style>
 </head>
 <body>
   <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
   <script>
-    // After CMS loads, apply additional styling
+    // After CMS loads, apply additional styling via JS as fallback
     document.addEventListener('DOMContentLoaded', function() {
-      // Wait for Decap to render
       setTimeout(function() {
-        // Find and style the Tasks link
+        // Style Tasks link
         const tasksLinks = document.querySelectorAll('a[href*="/collections/tasks"]');
         tasksLinks.forEach(function(link) {
           link.style.background = 'linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%)';
@@ -93,8 +212,20 @@
           link.style.boxShadow = '0 3px 12px rgba(255, 107, 53, 0.4)';
           link.style.display = 'block';
           link.style.textDecoration = 'none';
+          // Style all children too
+          link.querySelectorAll('*').forEach(function(child) {
+            child.style.color = 'white';
+          });
         });
-      }, 1000);
+
+        // Style header
+        const headers = document.querySelectorAll('header, [class*="AppHeader"]');
+        headers.forEach(function(header) {
+          header.style.background = '#0F0F1E';
+          header.style.borderBottom = '2px solid #4ECDC4';
+        });
+
+      }, 500);
     });
   </script>
 </body>