CUB-27: Responsive layout and adaptive navigation

frontend/src/styles.scss

@@ -54,6 +54,67 @@ html {
 // ---------------------------------------------------------------------------
 @include css-props.emit-custom-properties;
 
+// ---------------------------------------------------------------------------
+// Per spec Section 5.1 "Status Colors (Semantic — outside M3 tonal system)"
+// 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;
+  --status-thinking: #A78BFA;
+  --status-error: #F87171;
+  --status-offline: #64748B;
+
+  // --- Status background tints (12% opacity) ---
+  --status-active-bg: rgba(56, 189, 248, 0.12);
+  --status-idle-bg: rgba(45, 212, 191, 0.12);
+  --status-thinking-bg: rgba(167, 139, 250, 0.12);
+  --status-error-bg: rgba(248, 113, 113, 0.12);
+
+  // --- Surface overrides (tactical dark palette) ---
+  --cc-background: #0D0F12;
+  --cc-surface: #13161A;
+  --cc-surface-container: #1C2027;
+  --cc-surface-container-high: #252B33;
+  --cc-on-surface: #E2E8F0;
+  --cc-on-surface-variant: #8A9BB0;
+  --cc-outline: #2D3748;
+
+  // --- Mono font stack ---
+  --cc-font-mono: 'Roboto Mono', 'Cascadia Code', 'Fira Code', monospace;
+
+  // --- Layout constants ---
+  --cc-nav-rail-collapsed-width: 72px;
+  --cc-nav-rail-expanded-width: 256px;
+  --cc-header-height: 64px;
+  --cc-header-height-compact: 56px;
+  --cc-bottom-nav-height: 80px;
+  --cc-card-border-radius: 16px;
+  --cc-card-min-width: 280px;
+  --cc-card-gap: 16px;
+  --cc-card-padding: 20px;
+  --cc-section-padding: 24px;
+  --cc-section-padding-compact: 16px;
+  --cc-spacing-unit: 8px;
+
+  // --- Responsive breakpoints (CUB-27) ---
+  --cc-breakpoint-compact: 599px;   // 0-599px: phone / compact
+  --cc-breakpoint-medium: 600px;   // 600-1023px: tablet / medium
+  --cc-breakpoint-expanded: 1024px; // ≥1024px: desktop/kiosk / expanded
+}
+
 // ---------------------------------------------------------------------------
 // Global Body Styles
 // ---------------------------------------------------------------------------