From d5a85c4ed0e552e1594dd0dccbf647b1c4ada406 Mon Sep 17 00:00:00 2001
From: "cubecraft-agents[bot]"
 <3458173+cubecraft-agents[bot]@users.noreply.github.com>
Date: Sun, 26 Apr 2026 12:54:25 +0000
Subject: [PATCH 1/2] CUB-47: Implement Tactical Dark Mode CSS Variables

---
 frontend/src/styles.scss | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index af13a84..a581a28 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -48,6 +48,17 @@ html {
 // These are NOT part of the M3 tonal palette; they are semantic overrides.
 // ---------------------------------------------------------------------------
 :root {
+  // --- Tactical Dark Mode color palette (CUB-47) ---
+  --color-surface: #0F172A;
+  --color-surface-light: #1E293B;
+  --color-primary: #38BDF8;
+  --color-secondary: #2DD4BF;
+  --color-accent: #A78BFA;
+  --color-danger: #F87171;
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #94A3B8;
+  --color-border: #334155;
+
   // --- Status colors ---
   --status-active: #38BDF8;
   --status-idle: #2DD4BF;
@@ -90,7 +101,7 @@ html {
 // Global Body Styles
 // ---------------------------------------------------------------------------
 body {
-  background-color: var(--cc-background);
+  background-color: var(--color-surface);
   color: var(--cc-on-surface);
   font-family: 'Inter', 'Roboto', sans-serif;
   margin: 0;

From c8ca182af0a3e2ccc2409d2733c953d7daf6b443 Mon Sep 17 00:00:00 2001
From: "cubecraft-agents[bot]"
 <3458173+cubecraft-agents[bot]@users.noreply.github.com>
Date: Mon, 27 Apr 2026 12:40:29 +0000
Subject: [PATCH 2/2] =?UTF-8?q?CUB-52:=20responsive=20hub=20grid=20CSS=20?=
 =?UTF-8?q?=E2=80=94=20extract=20styles=20to=20SCSS,=20add=202-col=20deskt?=
 =?UTF-8?q?op=20/=201-col=20mobile=20breakpoint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/pages/hub/hub-page.component.scss | 28 +++++++++++++++++++
 .../src/app/pages/hub/hub-page.component.ts   | 13 +--------
 2 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/app/pages/hub/hub-page.component.scss

diff --git a/frontend/src/app/pages/hub/hub-page.component.scss b/frontend/src/app/pages/hub/hub-page.component.scss
new file mode 100644
index 0000000..1b2c65f
--- /dev/null
+++ b/frontend/src/app/pages/hub/hub-page.component.scss
@@ -0,0 +1,28 @@
+// ============================================================================
+// Hub Page — Responsive AgentCard Grid
+// Desktop (≥1024px): 2×2 grid
+// Mobile (<1024px): single-column stack
+// ============================================================================
+
+.hub-page {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: var(--cc-section-padding, 16px);
+  min-height: 400px;
+  overflow-x: hidden;
+}
+
+.hub-page__placeholder {
+  color: var(--cc-on-surface-variant);
+  font-size: 16px;
+  text-align: center;
+  padding: 24px 0;
+}
+
+// Desktop / kiosk breakpoint — 2-column grid
+@media (min-width: 1024px) {
+  .hub-page {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/pages/hub/hub-page.component.ts b/frontend/src/app/pages/hub/hub-page.component.ts
index 7819be4..1749b94 100644
--- a/frontend/src/app/pages/hub/hub-page.component.ts
+++ b/frontend/src/app/pages/hub/hub-page.component.ts
@@ -9,18 +9,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       <p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
     </div>
   `,
-  styles: [`
-    .hub-page {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 400px;
-    }
-    .hub-page__placeholder {
-      color: var(--cc-on-surface-variant);
-      font-size: 16px;
-    }
-  `],
+  styleUrl: './hub-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HubPageComponent {}
\ No newline at end of file