diff --git a/ui/styles/globals.css b/ui/styles/globals.css
index c2c02bd3b1..529d5eb673 100644
--- a/ui/styles/globals.css
+++ b/ui/styles/globals.css
@@ -1,106 +1,272 @@
 @import "tailwindcss";
 @config "../tailwind.config.js";
 
-@theme {
-  /* Chart Severity Colors - Dark Theme */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ===== LIGHT THEME (ROOT) ===== */
+:root {
+  /* ===== LEGACY VARIABLES (CHART COLORS) ===== */
   --chart-info: #3C8DFF;
   --chart-warning: #FDFBD4;
   --chart-warning-emphasis: #FEC94D;
   --chart-danger: #F77852;
   --chart-danger-emphasis: #FF006A;
+  --chart-success-color: #16a34a;
+  --chart-fail: #dc2626;
+  --chart-radar-primary: #9d174d;
+  --chart-text-primary: #1f2937;
+  --chart-text-secondary: #6b7280;
+  --chart-border: #d1d5db;
+  --chart-border-emphasis: #9ca3af;
+  --chart-background: #f9fafb;
+  --chart-alert-bg: #fecdd3;
+  --chart-alert-text: #be123c;
 
-  /* Chart Status Colors */
+  /* Chart HSL values */
+  --chart-success: 146 80% 35%;
+  --chart-fail: 339 90% 51%;
+  --chart-muted: 45 93% 47%;
+  --chart-critical: 336 75% 39%;
+  --chart-high: 339 90% 51%;
+  --chart-medium: 26 100% 55%;
+  --chart-low: 46 97% 65%;
+  --chart-1: 12 76% 61%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+
+  /* ===== NEW VARIABLES (PROWLER-307) - SEMANTIC COLORS ===== */
+  /* Data Background Colors */
+  --bg-data-azure: var(--color-sky-400);
+  --bg-data-kubernetes: var(--color-indigo-600);
+  --bg-data-aws: var(--color-amber-500);
+  --bg-data-gcp: var(--color-red-500);
+  --bg-data-m365: var(--color-green-400);
+  --bg-data-github: var(--color-slate-950);
+
+  /* Button Colors */
+  --bg-button-primary: var(--color-emerald-400);
+  --bg-button-primary-hover: var(--color-teal-200);
+  --bg-button-secondary: var(--color-slate-950);
+  --bg-button-secondary-press: var(--color-indigo-100);
+  --bg-button-tertiary: var(--color-blue-600);
+  --bg-button-tertiary-hover: var(--color-blue-500);
+  --bg-button-tertiary-active: var(--color-indigo-600);
+  --bg-button-disabled: var(--color-gray-300);
+
+  /* Input Colors */
+  --bg-input-primary: var(--color-white);
+  --border-input-primary: var(--color-slate-600);
+
+  /* Border Colors */
+  --border-error-primary: var(--color-red-500);
+  --border-neutral-primary: var(--color-neutral-200);
+  --border-neutral-secondary: var(--color-slate-200);
+  --border-neutral-tertiary: var(--color-slate-300);
+  --border-tag-primary: var(--color-gray-400);
+  --border-data-emphasis: rgba(0, 0, 0, 0.1);
+
+  /* Text Colors */
+  --text-neutral-primary: var(--color-slate-950);
+  --text-neutral-secondary: var(--color-zinc-700);
+  --text-neutral-tertiary: var(--color-zinc-500);
+  --text-error-primary: var(--color-red-600);
+
+  /* Background Colors */
+  --bg-neutral-primary: #FDFDFD;
+  --bg-neutral-secondary: var(--color-white);
+  --bg-neutral-tertiary: #FBFDFD;
+  --bg-tag-primary: var(--color-slate-50);
+  --bg-pass-primary: var(--color-emerald-400);
+  --bg-pass-secondary: var(--color-emerald-50);
+  --bg-fail-primary: var(--color-rose-500);
+  --bg-fail-secondary: var(--color-rose-50);
+
+  /* Severity Colors */
+  --bg-data-critical: #FF006A;
+  --bg-data-high: #F77852;
+  --bg-data-medium: #FDD34F;
+  --bg-data-low: #F5F3CE;
+  --bg-data-info: #3C8DFF;
+}
+
+/* ===== DARK THEME ===== */
+.dark {
+  /* ===== LEGACY VARIABLES (CHART COLORS) ===== */
+  --chart-info: #3C8DFF;
+  --chart-warning: #FDFBD4;
+  --chart-warning-emphasis: #FEC94D;
+  --chart-danger: #F77852;
+  --chart-danger-emphasis: #FF006A;
   --chart-success-color: #86da26;
   --chart-fail: #db2b49;
-
-  /* Chart Radar Colors */
   --chart-radar-primary: #b51c80;
-  --chart-radar-primary-rgb: 181 28 128;
-
-  /* Chart Provider Colors */
-  --chart-provider-aws: #ff9900;
-  --chart-provider-azure: #00bcd4;
-  --chart-provider-google: #ea4335;
-
-  /* Chart UI Colors - Dark Theme (defaults) */
   --chart-text-primary: #ffffff;
   --chart-text-secondary: #94a3b8;
   --chart-border: #475569;
   --chart-border-emphasis: #334155;
   --chart-background: #1e293b;
-
-  /* Chart Alert Colors */
   --chart-alert-bg: #432232;
   --chart-alert-text: #f54280;
+
+  /* Chart HSL values */
+  --chart-success: 146 80% 35%;
+  --chart-fail: 339 90% 51%;
+  --chart-muted: 45 93% 47%;
+  --chart-critical: 336 75% 39%;
+  --chart-high: 339 90% 51%;
+  --chart-medium: 26 100% 55%;
+  --chart-low: 46 97% 65%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+
+  /* ===== NEW VARIABLES (PROWLER-307) - SEMANTIC COLORS ===== */
+  /* Data Background Colors */
+  --bg-data-azure: var(--color-sky-400);
+  --bg-data-kubernetes: var(--color-indigo-600);
+  --bg-data-aws: var(--color-amber-500);
+  --bg-data-gcp: var(--color-red-500);
+  --bg-data-m365: var(--color-green-400);
+  --bg-data-github: var(--color-neutral-100);
+
+  /* Button Colors */
+  --bg-button-primary: var(--color-emerald-400);
+  --bg-button-primary-hover: var(--color-teal-200);
+  --bg-button-secondary: var(--color-slate-700);
+  --bg-button-secondary-press: var(--color-slate-800);
+  --bg-button-tertiary: var(--color-blue-500);
+  --bg-button-tertiary-hover: var(--color-blue-700);
+  --bg-button-tertiary-active: var(--color-blue-800);
+  --bg-button-disabled: var(--color-gray-600);
+
+  /* Input Colors */
+  --bg-input-primary: var(--color-slate-900);
+  --border-input-primary: var(--color-slate-700);
+
+  /* Border Colors */
+  --border-error-primary: var(--color-rose-500);
+  --border-neutral-primary: var(--color-zinc-800);
+  --border-neutral-secondary: var(--color-zinc-900);
+  --border-neutral-tertiary: var(--color-zinc-900);
+  --border-tag-primary: var(--color-slate-700);
+  --border-data-emphasis: rgba(255, 255, 255, 0.1);
+
+  /* Text Colors */
+  --text-neutral-primary: var(--color-zinc-100);
+  --text-neutral-secondary: var(--color-zinc-400);
+  --text-neutral-tertiary: var(--color-zinc-500);
+  --text-error-primary: var(--color-rose-300);
+
+  /* Background Colors */
+  --bg-neutral-primary: var(--color-zinc-950);
+  --bg-neutral-secondary: var(--color-slate-950);
+  --bg-neutral-tertiary: #121110;
+  --bg-tag-primary: var(--color-slate-950);
+  --bg-pass-primary: var(--color-green-400);
+  --bg-pass-secondary: var(--color-emerald-900);
+  --bg-fail-primary: var(--color-rose-500);
+  --bg-fail-secondary: #432232;
+
+  /* Severity Colors */
+  --bg-data-critical: #FF006A;
+  --bg-data-high: #F77852;
+  --bg-data-medium: #FEC94D;
+  --bg-data-low: #FDFBD4;
+  --bg-data-info: #3C8DFF;
 }
 
-@layer base {
-  :root {
-    /* Light Theme Chart Colors */
-    --chart-info: #3C8DFF;
-    --chart-warning: #FDFBD4;
-    --chart-warning-emphasis: #FEC94D;
-    --chart-danger: #F77852;
-    --chart-danger-emphasis: #FF006A;
-    --chart-success-color: #16a34a;
-    --chart-fail: #dc2626;
-    --chart-radar-primary: #9d174d;
-    --chart-text-primary: #1f2937;
-    --chart-text-secondary: #6b7280;
-    --chart-border: #d1d5db;
-    --chart-border-emphasis: #9ca3af;
-    --chart-background: #f9fafb;
-    --chart-alert-bg: #fecdd3;
-    --chart-alert-text: #be123c;
+/* ===== TAILWIND THEME MAPPINGS ===== */
+@theme {
+  /* Remap base variables to --color- prefix for Tailwind compatibility */
+  /* ===== LEGACY CHART COLORS ===== */
+  --color-chart-info: var(--chart-info);
+  --color-chart-warning: var(--chart-warning);
+  --color-chart-warning-emphasis: var(--chart-warning-emphasis);
+  --color-chart-danger: var(--chart-danger);
+  --color-chart-danger-emphasis: var(--chart-danger-emphasis);
+  --color-chart-success: var(--chart-success-color);
+  --color-chart-fail: var(--chart-fail);
+  --color-chart-radar-primary: var(--chart-radar-primary);
+  --color-chart-text-primary: var(--chart-text-primary);
+  --color-chart-text-secondary: var(--chart-text-secondary);
+  --color-chart-border: var(--chart-border);
+  --color-chart-border-emphasis: var(--chart-border-emphasis);
+  --color-chart-background: var(--chart-background);
+  --color-chart-alert-bg: var(--chart-alert-bg);
+  --color-chart-alert-text: var(--chart-alert-text);
 
-    /* Chart HSL values */
-    --chart-success: 146 80% 35%;
-    --chart-fail: 339 90% 51%;
-    --chart-muted: 45 93% 47%;
-    --chart-critical: 336 75% 39%;
-    --chart-high: 339 90% 51%;
-    --chart-medium: 26 100% 55%;
-    --chart-low: 46 97% 65%;
-    --chart-1: 12 76% 61%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
+  /* ===== NEW SEMANTIC COLORS (PROWLER-307) ===== */
+  /* Data Background Colors */
+  --color-bg-data-azure: var(--bg-data-azure);
+  --color-bg-data-kubernetes: var(--bg-data-kubernetes);
+  --color-bg-data-aws: var(--bg-data-aws);
+  --color-bg-data-gcp: var(--bg-data-gcp);
+  --color-bg-data-m365: var(--bg-data-m365);
+  --color-bg-data-github: var(--bg-data-github);
+  --color-bg-data-critical: var(--bg-data-critical);
+  --color-bg-data-high: var(--bg-data-high);
+  --color-bg-data-medium: var(--bg-data-medium);
+  --color-bg-data-low: var(--bg-data-low);
+  --color-bg-data-info: var(--bg-data-info);
 
-  .dark {
-    /* Dark Theme Chart Colors */
-    --chart-info: #3C8DFF;
-    --chart-warning: #FDFBD4;
-    --chart-warning-emphasis: #FEC94D;
-    --chart-danger: #F77852;
-    --chart-danger-emphasis: #FF006A;
-    --chart-success-color: #86da26;
-    --chart-fail: #db2b49;
-    --chart-radar-primary: #b51c80;
-    --chart-text-primary: #ffffff;
-    --chart-text-secondary: #94a3b8;
-    --chart-border: #475569;
-    --chart-border-emphasis: #334155;
-    --chart-background: #1e293b;
-    --chart-alert-bg: #432232;
-    --chart-alert-text: #f54280;
+  /* Button Colors */
+  --color-button-primary: var(--bg-button-primary);
+  --color-button-primary-hover: var(--bg-button-primary-hover);
+  --color-button-secondary: var(--bg-button-secondary);
+  --color-button-secondary-press: var(--bg-button-secondary-press);
+  --color-button-tertiary: var(--bg-button-tertiary);
+  --color-button-tertiary-hover: var(--bg-button-tertiary-hover);
+  --color-button-tertiary-active: var(--bg-button-tertiary-active);
+  --color-button-disabled: var(--bg-button-disabled);
 
-    /* Chart HSL values */
-    --chart-success: 146 80% 35%;
-    --chart-fail: 339 90% 51%;
-    --chart-muted: 45 93% 47%;
-    --chart-critical: 336 75% 39%;
-    --chart-high: 339 90% 51%;
-    --chart-medium: 26 100% 55%;
-    --chart-low: 46 97% 65%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+  /* Input Colors */
+  --color-input-primary: var(--bg-input-primary);
+  --color-input-border: var(--border-input-primary);
+
+  /* Border Colors */
+  --color-border-error: var(--border-error-primary);
+  --color-border-neutral-primary: var(--border-neutral-primary);
+  --color-border-neutral-secondary: var(--border-neutral-secondary);
+  --color-border-neutral-tertiary: var(--border-neutral-tertiary);
+  --color-border-tag: var(--border-tag-primary);
+  --color-border-data-emphasis: var(--border-data-emphasis);
+
+  /* Text Colors */
+  --color-text-neutral-primary: var(--text-neutral-primary);
+  --color-text-neutral-secondary: var(--text-neutral-secondary);
+  --color-text-neutral-tertiary: var(--text-neutral-tertiary);
+  --color-text-error: var(--text-error-primary);
+
+  /* Background Colors */
+  --color-bg-neutral-primary: var(--bg-neutral-primary);
+  --color-bg-neutral-secondary: var(--bg-neutral-secondary);
+  --color-bg-neutral-tertiary: var(--bg-neutral-tertiary);
+  --color-bg-tag: var(--bg-tag-primary);
+  --color-bg-pass: var(--bg-pass-primary);
+  --color-bg-pass-secondary: var(--bg-pass-secondary);
+  --color-bg-fail: var(--bg-fail-primary);
+  --color-bg-fail-secondary: var(--bg-fail-secondary);
+}
+
+/* ===== CONTAINER UTILITY ===== */
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+}
+
+/* ===== COMPONENT LAYER ===== */
+@layer components {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
   }
 }
 
+/* ===== UTILITY LAYER ===== */
 @layer utilities {
   /* Screen reader only - visually hidden but accessible */
   .sr-only {
@@ -129,9 +295,8 @@
     margin-right: 0.5rem;
     background-color: var(--background);
   }
-}
 
-@layer components {
+  /* Download icon animation */
   .animate-download-icon polyline,
   .animate-download-icon line {
     animation: dropArrow 0.6s ease-out infinite;
@@ -140,10 +305,10 @@
   }
 }
 
+/* ===== BASE LAYER ===== */
 @layer base {
-  /* is set to default by tailwind 4 */
-  button:not(:disabled),
-  [role="button"]:not(:disabled) {
-    cursor: pointer;
+  /* Global base styles */
+  body {
+    @apply bg-background text-foreground;
   }
-}
+}
\ No newline at end of file