diff --git a/frontend/src/components/auth/LandingPage.tsx b/frontend/src/components/auth/LandingPage.tsx
index cba221e0..26232146 100644
--- a/frontend/src/components/auth/LandingPage.tsx
+++ b/frontend/src/components/auth/LandingPage.tsx
@@ -33,21 +33,18 @@ interface LandingPageProps {
 const capabilityItems = [
   {
     icon: MapPinned,
-    number: '01',
     title: 'Eén kaartgerichte werkruimte',
     description:
       'Selecteer een gebied in België of de Belgische Noordzee en werk verder vanuit dezelfde ruimtelijke context.',
   },
   {
     icon: Database,
-    number: '02',
     title: 'Bronnen blijven herkenbaar',
     description:
       'Autoriteit, meetmoment, dekking, CRS en beperkingen blijven zichtbaar in plaats van achter één generieke kaartlaag te verdwijnen.',
   },
   {
     icon: ShieldCheck,
-    number: '03',
     title: 'Kwaliteit vóór resultaat',
     description:
       'Vergelijk referentie- en kandidaatgegevens, controleer bewijs en exporteer pas wanneer de context klopt.',
@@ -70,6 +67,7 @@ export function LandingPage({
   const [password, setPassword] = useState('')
   const [pendingAction, setPendingAction] = useState<'operator' | 'guest' | null>(null)
   const [authError, setAuthError] = useState<string | null>(null)
+  const [attempted, setAttempted] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
   const [menuOpen, setMenuOpen] = useState(false)
   const usernameRef = useRef<HTMLInputElement | null>(null)
@@ -84,6 +82,7 @@ export function LandingPage({
   const submitLogin = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault()
     setPendingAction('operator')
+    setAttempted(true)
     setAuthError(null)
     try {
       const session = await login(username.trim(), password)
@@ -98,6 +97,7 @@ export function LandingPage({
   const submitGuestLogin = async () => {
     setMenuOpen(false)
     setPendingAction('guest')
+    setAttempted(true)
     setAuthError(null)
     if (typeof accessPanelRef.current?.scrollIntoView === 'function') {
       accessPanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' })
@@ -278,7 +278,7 @@ export function LandingPage({
                     </button>
                   </div>
 
-                  {authError || serviceError ? (
+                  {authError || (serviceError && attempted) ? (
                     <p className="landing-login-error" role="alert">{authError ?? serviceError}</p>
                   ) : null}
 
@@ -290,6 +290,13 @@ export function LandingPage({
                     <LogIn aria-hidden="true" />
                     {pendingAction === 'operator' ? 'Veilig aanmelden…' : 'Inloggen als operator'}
                   </button>
+
+                  {/* De storingsmelding stond als rood blok midden in de hero,
+                      voordat de bezoeker iets gedaan had. Zolang er nog niets
+                      geprobeerd is, is het een mededeling en geen fout. */}
+                  {serviceError && !attempted && !authError ? (
+                    <p className="landing-login-note">{serviceError}</p>
+                  ) : null}
                 </form>
 
                 {guestAccessEnabled ? (
@@ -326,11 +333,10 @@ export function LandingPage({
           </div>
 
           <div className="landing-capability-grid">
-            {capabilityItems.map(({ icon: Icon, number, title, description }) => (
+            {capabilityItems.map(({ icon: Icon, title, description }) => (
               <article key={title} className="landing-capability">
                 <div className="landing-capability-topline">
                   <span className="landing-capability-icon" aria-hidden="true"><Icon /></span>
-                  <small>{number}</small>
                 </div>
                 <h3>{title}</h3>
                 <p>{description}</p>
diff --git a/frontend/src/components/datasets/DatasetPanel.tsx b/frontend/src/components/datasets/DatasetPanel.tsx
index 2eff328f..2987f2d9 100644
--- a/frontend/src/components/datasets/DatasetPanel.tsx
+++ b/frontend/src/components/datasets/DatasetPanel.tsx
@@ -172,28 +172,24 @@ export function DatasetPanel({
       key: 'selected',
       label: 'Geselecteerd',
       count: selectedDatasetId ? 1 : 0,
-      hint: 'Actief',
       className: 'dataset-role-selected',
     },
     {
       key: 'reference',
       label: 'Referentie',
       count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'reference').length,
-      hint: 'Officieel',
       className: 'dataset-role-reference',
     },
     {
       key: 'candidate',
       label: 'Resultaat',
       count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'candidate').length,
-      hint: 'Afgeleid',
       className: 'dataset-role-candidate',
     },
     {
       key: 'source',
       label: 'Basisbron',
       count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'source').length,
-      hint: 'Ingeladen',
       className: 'dataset-role-source',
     },
   ]
@@ -277,9 +273,8 @@ export function DatasetPanel({
       <div className="dataset-role-summary-grid" aria-label="Dataset role summary">
         {roleSummaries.map((summary) => (
           <div className={`dataset-role-summary ${summary.className}`} key={summary.key}>
-            <span>{summary.label}</span>
             <strong>{summary.count}</strong>
-            <small>{summary.hint}</small>
+            <span>{summary.label}</span>
           </div>
         ))}
       </div>
diff --git a/frontend/src/components/detection/AiPipelineIllustration.test.tsx b/frontend/src/components/detection/AiPipelineIllustration.test.tsx
index f61d497f..61c5d529 100644
--- a/frontend/src/components/detection/AiPipelineIllustration.test.tsx
+++ b/frontend/src/components/detection/AiPipelineIllustration.test.tsx
@@ -17,10 +17,10 @@ describe('AiPipelineIllustration', () => {
       />,
     )
 
-    expect(screen.getByText('CUDA gereed')).toBeTruthy()
+    expect(screen.getByText('GPU gereed')).toBeTruthy()
     expect(screen.getByRole('tab', { name: /Detecties/ }).textContent).toContain('volgende stap')
 
-    fireEvent.click(screen.getByRole('tab', { name: /NVIDIA GPU/ }))
-    expect(screen.getByRole('tabpanel').textContent).toContain('Lokale PyTorch-inferentie')
+    fireEvent.click(screen.getByRole('tab', { name: /Berekening/ }))
+    expect(screen.getByRole('tabpanel').textContent).toContain('De herkenning draait lokaal')
   })
 })
diff --git a/frontend/src/components/detection/AiPipelineIllustration.tsx b/frontend/src/components/detection/AiPipelineIllustration.tsx
index 0bb808bf..5e7b9cb7 100644
--- a/frontend/src/components/detection/AiPipelineIllustration.tsx
+++ b/frontend/src/components/detection/AiPipelineIllustration.tsx
@@ -12,8 +12,8 @@ interface AiPipelineIllustrationProps {
 
 const pipelineStages = [
   { key: 'imagery', label: 'Orthofoto', title: 'Gegeorefereerd bronbeeld', detail: 'CRS, resolutie en ruimtelijke dekking blijven bij de dataset bewaard.', icon: Image },
-  { key: 'tiles', label: 'Beeldtegels', title: 'Controleerbare tilevoorbereiding', detail: 'Overlap en tile-identiteit houden detecties herleidbaar naar hun bronpixel.', icon: Boxes },
-  { key: 'gpu', label: 'NVIDIA GPU', title: 'Lokale PyTorch-inferentie', detail: 'GeoIntel gebruikt de server-GPU en faalt gesloten wanneer CUDA vereist maar niet beschikbaar is.', icon: Cpu },
+  { key: 'tiles', label: 'Beeldtegels', title: 'Beeld opgedeeld in controleerbare tegels', detail: 'Elke tegel houdt zijn overlap en herkomst bij, zodat elke detectie terug te voeren is op de bronpixel.', icon: Boxes },
+  { key: 'gpu', label: 'Berekening', title: 'De herkenning draait lokaal', detail: 'De analyse gebruikt de GPU van de server. Is die niet beschikbaar, dan stopt de analyse in plaats van een resultaat te maken waarop u niet kunt bouwen.', icon: Cpu },
   { key: 'detections', label: 'Detecties', title: 'Gegeorefereerde gebouwobjecten', detail: 'Confidence, modelversie, brontegel en geometrie worden als reproduceerbaar resultaat bewaard.', icon: ScanSearch },
   { key: 'quality', label: 'QA-bewijs', title: 'Controle vóór vrijgave', detail: 'Precision, recall, IoU en foutbewijs bepalen of een resultaat alleen verkennend of operationeel bruikbaar is.', icon: BadgeCheck },
 ] as const
@@ -36,15 +36,15 @@ export function AiPipelineIllustration({
       <div className="ai-pipeline-heading">
         <div>
           <p className="eyebrow">Van pixel naar bewijs</p>
-          <h3 id="ai-pipeline-title">PyTorch-keten op de NVIDIA-server</h3>
+          <h3 id="ai-pipeline-title">Van luchtbeeld naar controleerbare detectie</h3>
           <p>Open een schakel om te zien welke technische context GeoIntel door de volledige analyse bewaart.</p>
         </div>
         <span className={gpuReady ? 'ai-pipeline-gpu ai-pipeline-gpu-ready' : 'ai-pipeline-gpu'}>
-          <i /> {gpuReady ? 'CUDA gereed' : 'CUDA controleren'}
+          <i /> {gpuReady ? 'GPU gereed' : 'GPU controleren'}
         </span>
       </div>
 
-      <div className="ai-pipeline-track" role="tablist" aria-label="PyTorch-analysekten">
+      <div className="ai-pipeline-track" role="tablist" aria-label="Stappen in de analyseketen">
         <span className="ai-pipeline-flow" aria-hidden="true" />
         {pipelineStages.map(({ key, label, icon: Icon }, index) => (
           <button
diff --git a/frontend/src/components/exports/ExportCenter.tsx b/frontend/src/components/exports/ExportCenter.tsx
index 63d4dce3..9abe36a1 100644
--- a/frontend/src/components/exports/ExportCenter.tsx
+++ b/frontend/src/components/exports/ExportCenter.tsx
@@ -275,8 +275,8 @@ export function ExportCenter({
             })}
             {availableLatestArtifacts.length === 0 ? (
               <div className="result-state result-state-empty latest-download-empty">
-                <strong>Nog geen downloads gemaakt</strong>
-                <p>Kies hieronder een rapport of de actieve kaartlaag.</p>
+                <strong>Nog geen recente downloads</strong>
+                <p>De laatst bewaarde bestanden verschijnen hier.</p>
               </div>
             ) : null}
           </div>
@@ -377,8 +377,8 @@ export function ExportCenter({
           ) : null}
           {exports.length === 0 ? (
             <div className="result-state result-state-empty">
-              <strong>Nog geen downloads gemaakt.</strong>
-              <p>Kies hierboven een leesbaar rapport, projectoverzicht of kaartlaag.</p>
+              <strong>Nog niets bewaard</strong>
+              <p>Maak een leesbaar rapport, een projectoverzicht, of bewaar de actieve kaartlaag.</p>
             </div>
           ) : null}
         </div>
diff --git a/frontend/src/components/map/mapSymbology.ts b/frontend/src/components/map/mapSymbology.ts
new file mode 100644
index 00000000..752f68bb
--- /dev/null
+++ b/frontend/src/components/map/mapSymbology.ts
@@ -0,0 +1,91 @@
+/**
+ * Kaartsymbologie.
+ *
+ * De kleuren van de kaartlagen stonden als losse hexwaarden door GeoMap.tsx
+ * heen. Het waren framework-standaardkleuren die bij geen enkel token uit het
+ * designsysteem hoorden, en op de donkere operationele ondergrond vielen de
+ * donkere varianten volledig weg.
+ *
+ * Deze waarden horen bij de donkere werkstand en zijn afgestemd op de tokens
+ * in geointel-system.css, sectie "Operationeel donker". Ze staan hier als
+ * letterlijke waarden omdat MapLibre paint-eigenschappen geen CSS-variabelen
+ * kunnen lezen; wijzigt een token, dan wijzigt zijn tegenhanger hier mee.
+ */
+
+export const mapSymbology = {
+  /** Officiële grenzen. Komt overeen met --gi-brand-500. */
+  boundary: '#45cfb4',
+  boundaryStrong: '#38c0a5',
+
+  /** Verandering tussen twee meetmomenten. */
+  added: '#4cc48d',
+  removed: '#ec7d76',
+  modified: '#dda45e',
+  unchanged: '#6fb0dd',
+
+  /** Eigen ingeladen data. Oranje blijft de tegenkleur van het teal-merk. */
+  dataFill: '#fb923c',
+  dataLine: '#f97316',
+
+  /** Actieve selectie. Geel leest op elke ondergrond. */
+  selectionFill: '#fde047',
+  selectionLine: '#fbbf24',
+
+  /** Water en bathymetrie. */
+  waterFill: '#38bdf8',
+  waterLine: '#7dd3fc',
+
+  /** Modelresultaten uit beeldanalyse. */
+  detectionFill: '#a78bfa',
+  detectionLine: '#c4b5fd',
+
+  /** Randen van puntsymbolen, tegen elke vulkleur. */
+  pointStroke: '#ffffff',
+
+  /** Terugvalkleur wanneer een feature geen bekende klasse heeft. */
+  fallback: '#94a3b8',
+} as const
+
+export type KaartWerkstand = 'dark' | 'light'
+
+/**
+ * De verf van de ondergrond.
+ *
+ * De tegels zijn consumentenkaarten: rode snelwegen, groene bossen,
+ * POI-drukte. In beide werkstanden worden ze ontkleurd zodat alleen de eigen
+ * data nog kleur draagt; het verschil zit in hoe ver ze gedempt worden.
+ *
+ * De featurekleuren hierboven blijven in beide werkstanden gelijk. Het zijn
+ * middentonen die op een lichte én een donkere ondergrond leesbaar zijn, en
+ * één set houdt de betekenis van een kleur constant wanneer een gebruiker
+ * tussen de twee wisselt.
+ */
+export function basemapPaint(werkstand: KaartWerkstand): Record<string, number> {
+  if (werkstand === 'light') {
+    return {
+      'raster-saturation': -0.62,
+      'raster-brightness-min': 0.32,
+      'raster-brightness-max': 1,
+      'raster-contrast': -0.14,
+      'raster-hue-rotate': 140,
+      'raster-opacity': 0.92,
+    }
+  }
+  return {
+    'raster-saturation': -0.78,
+    'raster-brightness-min': 0.03,
+    'raster-brightness-max': 0.44,
+    'raster-contrast': -0.08,
+    'raster-hue-rotate': 140,
+    'raster-opacity': 0.9,
+  }
+}
+
+export function basemapGround(werkstand: KaartWerkstand): string {
+  return werkstand === 'light' ? '#eef2f0' : '#0a100e'
+}
+
+export function huidigeWerkstand(): KaartWerkstand {
+  if (typeof document === 'undefined') return 'dark'
+  return document.body.dataset.theme === 'light' ? 'light' : 'dark'
+}
diff --git a/frontend/src/components/shell/WorkbenchNavigation.tsx b/frontend/src/components/shell/WorkbenchNavigation.tsx
index 65240592..6edf8ef6 100644
--- a/frontend/src/components/shell/WorkbenchNavigation.tsx
+++ b/frontend/src/components/shell/WorkbenchNavigation.tsx
@@ -11,7 +11,6 @@ import {
 } from 'lucide-react'
 import type { WorkspaceKey } from '../overview/OverviewWorkspace'
 import { GeoIntelMark } from '../brand/GeoIntelBrand'
-import { ItWorxSignature } from '../brand/ItWorxSignature'
 
 export interface WorkspaceNavigationItem {
   key: WorkspaceKey
@@ -86,7 +85,6 @@ export function WorkbenchNavigation({
           </div>
         ))}
       </nav>
-      <ItWorxSignature />
     </aside>
   )
 }
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index cf80d4a7..ed0190d3 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -34,7 +34,7 @@ html {
 body {
   overflow-x: hidden;
   margin: 0;
-  font-family: Inter, 'Avenir Next', 'Segoe UI', sans-serif;
+  font-family: 'Public Sans', 'Segoe UI', Arial, sans-serif;
   color: var(--text);
   background:
     linear-gradient(180deg, rgba(15, 118, 110, 0.08), rgba(238, 244, 241, 0) 18rem),
@@ -55,12 +55,12 @@ body {
   z-index: 100;
   transform: translateY(-150%);
   border: 1px solid var(--accent);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.48rem 0.7rem;
-  background: #ffffff;
+  background: var(--gi-surface);
   color: var(--accent-strong);
   font-size: 0.84rem;
-  font-weight: 800;
+  font-weight: 700;
   text-decoration: none;
   box-shadow: var(--shadow-soft);
   transition: transform 120ms ease;
@@ -83,12 +83,12 @@ textarea {
 button {
   min-height: 2.35rem;
   border: 1px solid var(--line-strong);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.52rem 0.78rem;
-  background: linear-gradient(180deg, #ffffff, #edf5f1);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
   color: var(--text);
   cursor: pointer;
-  font-weight: 650;
+  font-weight: 600;
   transition:
     border-color 120ms ease,
     box-shadow 120ms ease,
@@ -129,9 +129,9 @@ textarea {
   width: 100%;
   min-height: 2.35rem;
   border: 1px solid var(--line-strong);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.52rem 0.62rem;
-  background: #ffffff;
+  background: var(--gi-surface);
   color: var(--text);
 }
 
@@ -198,7 +198,7 @@ label {
   margin-top: 0.72rem;
   color: var(--muted);
   font-size: 0.88rem;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 label > input,
@@ -234,9 +234,9 @@ label > textarea {
 section {
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 1rem;
-  background: rgba(255, 255, 255, 0.96);
+  background: color-mix(in srgb, var(--gi-surface) 96%, transparent);
   box-shadow: var(--shadow-soft);
 }
 
@@ -275,16 +275,16 @@ section {
 }
 
 .app-shell > main + section {
-  border-color: #b8c9c0;
+  border-color: var(--gi-line);
 }
 
 .error {
-  border: 1px solid #fecaca;
-  border-radius: 8px;
+  border: 1px solid var(--gi-danger-soft);
+  border-radius: var(--gi-radius-sm);
   padding: 0.7rem 0.85rem;
-  background: #fff1f2;
+  background: var(--gi-danger-soft);
   color: var(--danger);
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .muted {
@@ -295,7 +295,7 @@ section {
   margin: 0 0 0.25rem;
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
@@ -349,7 +349,7 @@ section {
 .summary-grid > div,
 .status-tile {
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   background: var(--panel-soft);
 }
 
@@ -359,10 +359,10 @@ section {
 
 .workbench-status-strip {
   margin: 1rem 0;
-  border-color: #bdd0c5;
+  border-color: var(--gi-line);
   padding: 0.9rem;
-  background: linear-gradient(180deg, #ffffff, #f7fbf8);
-  box-shadow: 0 8px 22px rgba(33, 48, 41, 0.05);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
+  box-shadow: var(--gi-shadow-md);
 }
 
 .status-strip-header {
@@ -433,18 +433,18 @@ section {
   justify-content: space-between;
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .status-pill {
   flex: 0 0 auto;
   border: 1px solid var(--line);
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.12rem 0.46rem;
-  background: #ffffff;
-  color: #334155;
+  background: var(--gi-surface);
+  color: var(--gi-ink-800);
   font-size: 0.72rem;
   text-transform: lowercase;
 }
@@ -452,7 +452,7 @@ section {
 .metric {
   display: block;
   font-size: 1.35rem;
-  font-weight: 850;
+  font-weight: 700;
 }
 
 .compact-list {
@@ -472,8 +472,8 @@ section {
   min-height: 18rem;
   overflow: hidden;
   border: 1px solid var(--line-strong);
-  border-radius: 8px;
-  background: #dbe7e2;
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-surface-sunken);
 }
 
 .map-controls {
@@ -496,7 +496,7 @@ section pre {
   max-height: 22rem;
   overflow: auto;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.85rem;
   background: #0b1411;
   color: #d7f7e8;
@@ -509,7 +509,7 @@ section div {
 }
 
 section strong {
-  font-weight: 800;
+  font-weight: 700;
 }
 
 section li div {
@@ -577,7 +577,7 @@ section li strong + div {
   max-width: 100vw;
   overflow-x: clip;
   padding: 0;
-  background: #eef4f1;
+  background: var(--gi-surface-soft);
 }
 
 .workbench-topbar {
@@ -613,7 +613,7 @@ section li strong + div {
 .context-bar > div {
   min-height: 3rem;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.44rem 0.58rem;
   background: var(--surface-raised);
 }
@@ -622,9 +622,9 @@ section li strong + div {
   display: block;
   color: var(--muted);
   font-size: 0.66rem;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .context-bar strong {
@@ -675,7 +675,7 @@ section li strong + div {
 }
 
 .nav-item:hover:not(:disabled) {
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .nav-item span,
@@ -691,13 +691,13 @@ section li strong + div {
   margin-top: 0.22rem;
   color: var(--muted);
   font-size: 0.77rem;
-  font-weight: 550;
+  font-weight: 500;
   line-height: 1.3;
 }
 
 .nav-item-active {
   border-color: rgba(15, 118, 110, 0.34);
-  background: #ffffff;
+  background: var(--gi-surface);
   box-shadow: inset 4px 0 0 var(--accent);
 }
 
@@ -729,7 +729,7 @@ section li strong + div {
   justify-content: space-between;
   margin-bottom: 0.65rem;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.76rem 0.9rem;
   background: var(--surface-raised);
   box-shadow: var(--shadow-soft);
@@ -753,9 +753,9 @@ section li strong + div {
   align-items: center;
   margin-bottom: 0.85rem;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.48rem;
-  background: rgba(255, 255, 255, 0.74);
+  background: color-mix(in srgb, var(--gi-surface) 74%, transparent);
 }
 
 .workspace-command-bar > span {
@@ -823,7 +823,7 @@ section li strong + div {
 }
 
 .workspace-panel {
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   background: var(--surface-raised);
 }
 
@@ -839,7 +839,7 @@ section li strong + div {
   display: grid;
   gap: 0.72rem;
   border-left: 4px solid #2563eb;
-  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
 }
 
 .workflow-guidance-panel .panel-title-row {
@@ -859,7 +859,7 @@ section li strong + div {
   min-height: 5.35rem;
   border-color: var(--line);
   padding: 0.62rem 0.68rem;
-  background: #ffffff;
+  background: var(--gi-surface);
   text-align: left;
   box-shadow: none;
 }
@@ -879,16 +879,16 @@ section li strong + div {
 
 .workflow-guidance-step-ready {
   border-color: rgba(21, 128, 61, 0.28);
-  background: #f2fbf5;
+  background: var(--gi-brand-50);
 }
 
 .workflow-step-status {
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 850;
-  letter-spacing: 0.05em;
+  font-weight: 700;
+  letter-spacing: 0;
   line-height: 1.2;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .overview-actions {
@@ -897,8 +897,8 @@ section li strong + div {
   gap: 1rem;
   align-items: center;
   border-left: 4px solid var(--accent);
-  background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(255, 255, 255, 0.82));
-  box-shadow: 0 8px 20px rgba(33, 48, 41, 0.045);
+  background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), color-mix(in srgb, var(--gi-surface) 82%, transparent));
+  box-shadow: var(--gi-shadow-md);
 }
 
 .overview-action-copy {
@@ -940,6 +940,10 @@ section > div:not(.map-controls):not(.feature-inspector):not(.quick-action-grid)
   display: flex;
 }
 
+/* Deze houdt bewust !important. De paneelkop wordt elders naar grid gezet door
+   een regel die niet met specificiteit te verslaan is zonder een selector te
+   bouwen die nog fragieler is dan het probleem. Nagemeten op een productiebuild:
+   zonder !important klapt de kop van elk werkruimtepaneel om naar grid. */
 section > .panel-title-row {
   display: flex !important;
 }
@@ -966,8 +970,8 @@ section td {
 section th {
   color: var(--muted);
   font-size: 0.72rem;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .table-scroll {
@@ -976,8 +980,8 @@ section th {
   overflow: auto;
   margin-top: 0.75rem;
   border: 1px solid var(--line);
-  border-radius: 7px;
-  background: #ffffff;
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-surface);
 }
 
 .table-scroll table {
@@ -989,7 +993,7 @@ section th {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .table-scroll th,
@@ -1006,9 +1010,9 @@ section th {
   justify-content: space-between;
   margin-top: 0.85rem;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.55rem 0.65rem;
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .pagination-summary,
@@ -1059,7 +1063,7 @@ section th {
   margin: 0 -1rem 0.8rem;
   border-bottom: 1px solid var(--line);
   padding: 0.35rem 1rem 0.75rem;
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .workbench-main .map-container {
@@ -1087,19 +1091,19 @@ section th {
   align-items: center;
   justify-content: center;
   border: 1px solid var(--line);
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.18rem 0.52rem;
-  background: #ffffff;
-  color: #334155;
+  background: var(--gi-surface);
+  color: var(--gi-ink-800);
   font-size: 0.74rem;
-  font-weight: 800;
+  font-weight: 700;
   line-height: 1.2;
 }
 
 .status-badge-ready {
   border-color: rgba(21, 128, 61, 0.28);
-  background: #ecfdf3;
-  color: #166534;
+  background: var(--gi-brand-50);
+  color: var(--gi-brand-600);
 }
 
 .primary-action {
@@ -1114,7 +1118,7 @@ section th {
 }
 
 .secondary-action {
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .compact-form,
@@ -1130,9 +1134,9 @@ section th {
   gap: 0.16rem;
   border: 1px solid rgba(15, 118, 110, 0.26);
   border-left: 4px solid var(--accent);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.68rem 0.75rem;
-  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
   box-shadow: 0 1px 0 rgba(19, 32, 24, 0.03);
 }
 
@@ -1141,10 +1145,10 @@ section th {
 .data-section-label {
   color: var(--muted);
   font-size: 0.74rem;
-  font-weight: 850;
-  letter-spacing: 0.04em;
+  font-weight: 700;
+  letter-spacing: 0;
   line-height: 1.2;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .data-selection-summary strong {
@@ -1165,13 +1169,13 @@ section th {
   gap: 0.56rem;
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
   background: var(--panel-soft);
 }
 
 .data-panel-list-block {
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .data-section-label {
@@ -1201,9 +1205,9 @@ section th {
 
 .data-density-grid {
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.55rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .dataset-role-summary-grid {
@@ -1218,17 +1222,17 @@ section th {
   gap: 0.12rem;
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.65rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .dataset-role-summary span,
 .dataset-role-summary small {
   color: var(--muted);
   font-size: 0.76rem;
-  font-weight: 800;
-  text-transform: uppercase;
+  font-weight: 700;
+  text-transform: none;
 }
 
 .dataset-role-summary strong {
@@ -1239,26 +1243,26 @@ section th {
 
 .dataset-role-selected {
   border-color: rgba(15, 23, 42, 0.24);
-  background: #f1f5f9;
-  color: #0f172a;
+  background: var(--gi-info-soft);
+  color: var(--gi-info);
 }
 
 .dataset-role-reference {
   border-color: rgba(15, 118, 110, 0.28);
-  background: #ecfdf5;
-  color: #115e59;
+  background: var(--gi-brand-50);
+  color: var(--gi-brand-600);
 }
 
 .dataset-role-candidate {
   border-color: rgba(37, 99, 235, 0.24);
-  background: #eff6ff;
-  color: #1d4ed8;
+  background: var(--gi-info-soft);
+  color: var(--gi-info);
 }
 
 .dataset-role-source {
   border-color: rgba(100, 116, 139, 0.22);
-  background: #f8fafc;
-  color: #334155;
+  background: var(--gi-info-soft);
+  color: var(--gi-ink-800);
 }
 
 .entity-list,
@@ -1284,7 +1288,7 @@ section th {
 .empty-state,
 .result-state {
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   background: var(--panel-soft);
 }
 
@@ -1335,7 +1339,7 @@ button.entity-card {
 .result-state {
   display: grid;
   gap: 0.18rem;
-  background: #ffffff;
+  background: var(--gi-surface);
   overflow-wrap: anywhere;
 }
 
@@ -1407,8 +1411,8 @@ button.entity-card {
   margin-bottom: 0.28rem;
   color: var(--muted);
   font-size: 0.75rem;
-  font-weight: 800;
-  text-transform: uppercase;
+  font-weight: 700;
+  text-transform: none;
 }
 
 .dataset-role-badge {
@@ -1417,7 +1421,7 @@ button.entity-card {
   max-width: 100%;
   min-height: 1.45rem;
   border: 1px solid currentColor;
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.16rem 0.5rem;
   font-size: 0.72rem;
   line-height: 1;
@@ -1451,7 +1455,7 @@ button.entity-card {
 
 .dataset-action-hint {
   margin: 0.65rem 0 0;
-  color: #36524b;
+  color: var(--gi-ink-800);
   font-size: 0.84rem;
   line-height: 1.35;
 }
@@ -1483,12 +1487,12 @@ button.entity-card {
 }
 
 .dataset-action-button span {
-  font-weight: 850;
+  font-weight: 700;
 }
 
 .dataset-action-button small {
   font-size: 0.73rem;
-  font-weight: 750;
+  font-weight: 600;
   line-height: 1.2;
   opacity: 0.78;
 }
@@ -1511,7 +1515,7 @@ button.entity-card {
   gap: 0.45rem 0.7rem;
   margin-top: 0.75rem;
   border: 1px solid rgba(15, 118, 110, 0.22);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
   background: var(--accent-soft);
 }
@@ -1519,7 +1523,7 @@ button.entity-card {
 .result-summary-card p {
   min-width: 0;
   margin: 0;
-  color: #23423b;
+  color: var(--gi-brand-600);
   font-size: 0.86rem;
   line-height: 1.35;
   overflow-wrap: anywhere;
@@ -1537,23 +1541,23 @@ button.entity-card {
 .quality-history-surface {
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .quality-summary-surface {
-  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
 }
 
 .quality-evidence-surface {
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .quality-drilldown-surface {
   display: grid;
   gap: 0.72rem;
-  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
 }
 
 .quality-drilldown-surface .panel-title-row {
@@ -1600,13 +1604,13 @@ button.entity-card {
 .change-detection-warning-surface {
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .change-detection-input-surface {
-  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
 }
 
 .change-detection-state-stack {
@@ -1643,7 +1647,7 @@ button.entity-card {
 
 .change-detection-warning-surface strong {
   display: block;
-  color: #92400e;
+  color: var(--gi-warn);
   font-size: 0.88rem;
 }
 
@@ -1676,17 +1680,17 @@ button.entity-card {
 
 .quality-summary-grid > div {
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .quality-handoff-grid > div {
   min-width: 0;
   border: 1px solid rgba(15, 118, 110, 0.18);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .quality-drilldown-grid > div,
@@ -1695,14 +1699,14 @@ button.entity-card {
 .quality-provenance-grid > div {
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.68rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .quality-evidence-token-grid > div {
   border-color: rgba(15, 118, 110, 0.22);
-  background: linear-gradient(180deg, #f8fcfa, #ffffff);
+  background: linear-gradient(180deg, var(--gi-brand-50), var(--gi-surface));
 }
 
 .quality-evidence-map-handoff,
@@ -1722,9 +1726,9 @@ button.entity-card {
   display: block;
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .quality-summary-grid strong {
@@ -1780,7 +1784,7 @@ button.entity-card {
   margin: 0.38rem 0 0;
   overflow: auto;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.58rem;
   background: #0f172a;
   color: #e2e8f0;
@@ -1823,9 +1827,9 @@ button.entity-card {
 .quality-score-row > div {
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.55rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .quality-score-row strong {
@@ -1853,9 +1857,9 @@ button.entity-card {
   display: block;
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .quality-metric-grid {
@@ -1868,23 +1872,23 @@ button.entity-card {
 .quality-metric-card {
   min-width: 0;
   border: 1px solid rgba(15, 118, 110, 0.18);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.58rem;
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .quality-metric-card-critical {
   border-color: rgba(185, 28, 28, 0.18);
-  background: #fff7ed;
+  background: var(--gi-warn-soft);
 }
 
 .quality-metric-card span {
   display: block;
   color: var(--muted);
   font-size: 0.7rem;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .quality-metric-card strong {
@@ -1912,9 +1916,9 @@ button.entity-card {
   gap: 0.16rem;
   margin-top: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.58rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .metric-list strong {
@@ -1925,7 +1929,7 @@ button.entity-card {
   display: grid;
   gap: 0.25rem;
   margin-top: 0.75rem;
-  background: #ffffff;
+  background: var(--gi-surface);
   color: var(--text);
 }
 
@@ -1969,7 +1973,7 @@ button.entity-card {
 .map-empty-action-grid span {
   color: var(--muted);
   font-size: 0.78rem;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .export-action-grid {
@@ -1996,19 +2000,19 @@ button.entity-card {
   gap: 0.68rem;
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.78rem;
-  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
   box-shadow: 0 1px 0 rgba(19, 32, 24, 0.03);
 }
 
 .export-history-surface,
 .system-provider-capability-surface {
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .latest-artifact-surface {
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .export-center-shell .quality-summary-grid {
@@ -2054,9 +2058,9 @@ button.entity-card {
   gap: 0.72rem;
   margin-top: 0.8rem;
   border: 1px solid rgba(15, 118, 110, 0.24);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.85rem;
-  background: linear-gradient(180deg, #f5fbf8, #ffffff);
+  background: linear-gradient(180deg, var(--gi-brand-50), var(--gi-surface));
 }
 
 .handoff-summary-card .panel-title-row {
@@ -2076,9 +2080,9 @@ button.entity-card {
 .handoff-readiness-grid > div {
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.62rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .handoff-readiness-grid span,
@@ -2086,9 +2090,9 @@ button.entity-card {
   display: block;
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .handoff-readiness-grid strong,
@@ -2115,9 +2119,9 @@ button.entity-card {
   min-width: 0;
   gap: 0.35rem;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .handoff-action-card-primary {
@@ -2150,9 +2154,9 @@ button.entity-card {
   min-width: 0;
   gap: 0.36rem;
   border: 1px solid rgba(15, 118, 110, 0.2);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: linear-gradient(180deg, #f8fcfa, #ffffff);
+  background: linear-gradient(180deg, var(--gi-brand-50), var(--gi-surface));
 }
 
 .latest-artifact-card-empty {
@@ -2164,9 +2168,9 @@ button.entity-card {
 .latest-artifact-card span {
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 850;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .latest-artifact-card strong {
@@ -2207,12 +2211,12 @@ button.entity-card {
   max-width: 100%;
   align-items: center;
   border: 1px solid rgba(15, 118, 110, 0.22);
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.18rem 0.54rem;
   background: var(--accent-soft);
   color: var(--accent-strong);
   font-size: 0.74rem;
-  font-weight: 850;
+  font-weight: 700;
   line-height: 1.2;
 }
 
@@ -2232,9 +2236,9 @@ button.entity-card {
   align-items: end;
   margin-top: 0.8rem;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .quality-history-controls label,
@@ -2267,9 +2271,9 @@ button.entity-card {
   align-items: center;
   margin-top: 0.8rem;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.62rem 0.72rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .list-limit-banner span {
@@ -2303,7 +2307,7 @@ button.entity-card {
   min-width: 0;
   gap: 0.62rem;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.85rem;
   background: var(--panel-soft);
 }
@@ -2339,18 +2343,18 @@ button.entity-card {
 
 .system-provider-grid > div {
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.55rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .system-provider-grid span {
   display: block;
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .system-provider-grid strong {
@@ -2372,12 +2376,12 @@ button.entity-card {
   min-height: 1.45rem;
   align-items: center;
   border: 1px solid rgba(15, 118, 110, 0.2);
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.16rem 0.5rem;
   background: var(--accent-soft);
   color: var(--accent-strong);
   font-size: 0.74rem;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .provider-detail-stack {
@@ -2395,18 +2399,18 @@ button.entity-card {
 .provider-provenance-card {
   min-width: 0;
   border: 1px solid rgba(15, 118, 110, 0.16);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.55rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .provider-provenance-card span {
   display: block;
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .provider-provenance-card strong {
@@ -2433,17 +2437,17 @@ button.entity-card {
   gap: 0.14rem;
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.62rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .export-preview-summary-card span {
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .export-preview-summary-card strong {
@@ -2456,7 +2460,7 @@ button.entity-card {
   min-width: 0;
   margin-top: 0.75rem;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   overflow: hidden;
   background: #0f172a;
 }
@@ -2470,7 +2474,7 @@ button.entity-card {
   padding: 0.55rem 0.68rem;
   color: #cbd5e1;
   font-size: 0.78rem;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .export-preview-json-body {
@@ -2504,9 +2508,9 @@ button.entity-card {
   min-width: 0;
   border: 1px solid var(--line);
   border-left: 4px solid var(--accent);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.68rem 0.78rem;
-  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
 }
 
 .map-context-summary span,
@@ -2517,9 +2521,9 @@ button.entity-card {
 .map-context-summary span {
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 850;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .map-context-summary strong {
@@ -2548,9 +2552,9 @@ button.entity-card {
 .map-inspection-surface {
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .map-control-surface {
@@ -2560,7 +2564,7 @@ button.entity-card {
 
 .map-frame-surface {
   padding: 0.52rem;
-  background: #f7fbf8;
+  background: var(--gi-brand-50);
 }
 
 .map-frame-surface .map-container {
@@ -2601,7 +2605,7 @@ button.entity-card {
   gap: 0.25rem;
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.62rem 0.72rem;
   background: var(--panel-soft);
 }
@@ -2614,28 +2618,28 @@ button.entity-card {
 .map-status .viewport-vector-status {
   grid-column: 1 / -1;
   padding: 0.5rem 0.65rem;
-  border: 1px solid #bae6fd;
-  background: #f0f9ff;
-  color: #075985;
-  font-weight: 700;
+  border: 1px solid var(--gi-info-soft);
+  background: var(--gi-info-soft);
+  color: var(--gi-info);
+  font-weight: 600;
 }
 
 .map-status .viewport-vector-status-ready {
-  border-color: #bbf7d0;
-  background: #f0fdf4;
-  color: #166534;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
+  color: var(--gi-brand-600);
 }
 
 .map-status .viewport-vector-status-warning {
-  border-color: #fde68a;
-  background: #fffbeb;
-  color: #92400e;
+  border-color: var(--gi-warn-soft);
+  background: var(--gi-warn-soft);
+  color: var(--gi-warn);
 }
 
 .map-status .viewport-vector-status-error {
-  border-color: #fecaca;
-  background: #fef2f2;
-  color: #991b1b;
+  border-color: var(--gi-danger-soft);
+  background: var(--gi-danger-soft);
+  color: var(--gi-danger);
 }
 
 .layer-provenance-rail {
@@ -2650,11 +2654,11 @@ button.entity-card {
   grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
   gap: 0.65rem;
   align-items: center;
-  border: 1px solid #bfdbfe;
+  border: 1px solid var(--gi-info-soft);
   border-left: 4px solid #2563eb;
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: #eff6ff;
+  background: var(--gi-info-soft);
 }
 
 .qa-evidence-map-status span,
@@ -2663,16 +2667,16 @@ button.entity-card {
 }
 
 .qa-evidence-map-status > div:first-child span {
-  color: #1d4ed8;
+  color: var(--gi-info);
   font-size: 0.68rem;
-  font-weight: 850;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .qa-evidence-map-status > div:first-child strong {
   margin-top: 0.18rem;
-  color: #172554;
+  color: var(--gi-info);
 }
 
 .qa-evidence-legend {
@@ -2685,17 +2689,17 @@ button.entity-card {
   display: inline-flex;
   align-items: center;
   gap: 0.38rem;
-  color: #1e3a8a;
+  color: var(--gi-info);
   font-size: 0.78rem;
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .qa-evidence-swatch {
   display: inline-block;
   width: 0.72rem;
   height: 0.72rem;
-  border-radius: 999px;
-  border: 2px solid #ffffff;
+  border-radius: var(--gi-radius-pill);
+  border: 2px solid var(--gi-surface);
   box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
 }
 
@@ -2719,9 +2723,9 @@ button.entity-card {
 .feature-property-chip {
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.58rem 0.68rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .layer-provenance-rail span,
@@ -2729,9 +2733,9 @@ button.entity-card {
   display: block;
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .layer-provenance-rail strong,
@@ -2767,9 +2771,9 @@ button.entity-card {
   margin-bottom: 0.85rem;
   border: 1px solid rgba(3, 105, 161, 0.24);
   border-left: 4px solid #0369a1;
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: linear-gradient(180deg, #ffffff, #f6fbff);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-info-soft));
 }
 
 .bbox-select-surface .panel-title-row {
@@ -2780,17 +2784,17 @@ button.entity-card {
   display: grid;
   gap: 0.22rem;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.58rem 0.66rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .bbox-select-status span {
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 850;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .bbox-select-status strong {
@@ -2860,9 +2864,9 @@ button.entity-card {
   gap: 0.62rem;
   min-width: 0;
   border: 1px solid rgba(15, 118, 110, 0.2);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.68rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .map-selection-qa-evidence .panel-title-row {
@@ -2886,9 +2890,9 @@ button.entity-card {
 .map-selection-qa-warnings span {
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 850;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .map-selection-qa-warnings ul {
@@ -2936,15 +2940,15 @@ button.entity-card {
 .latest-artifact-surface,
 .export-actions-surface,
 .export-history-surface {
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.62rem;
-  background: #ffffff;
+  background: var(--gi-surface);
   box-shadow: none;
 }
 
 .quality-summary-surface,
 .export-summary-surface {
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .quality-results-shell .quality-summary-grid,
@@ -2963,9 +2967,9 @@ button.entity-card {
 .handoff-action-card,
 .export-card,
 .quality-check-card {
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.5rem 0.56rem;
-  background: #ffffff;
+  background: var(--gi-surface);
   box-shadow: none;
 }
 
@@ -3051,7 +3055,7 @@ button.entity-card {
 
 .quality-provenance-pre {
   max-height: 7.5rem;
-  border-radius: 5px;
+  border-radius: var(--gi-radius-xs);
   padding: 0.48rem;
   font-size: 0.68rem;
 }
@@ -3059,7 +3063,7 @@ button.entity-card {
 .quality-history-controls,
 .export-history-controls {
   margin-top: 0;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.52rem;
   gap: 0.45rem;
 }
@@ -3105,7 +3109,7 @@ button.entity-card {
 .quality-score-row > div,
 .quality-metric-card,
 .metric-list li {
-  border-radius: 5px;
+  border-radius: var(--gi-radius-xs);
   padding: 0.42rem 0.48rem;
 }
 
@@ -3199,7 +3203,7 @@ button.entity-card {
 
 .list-limit-banner {
   margin-top: 0;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.48rem 0.56rem;
 }
 
@@ -3246,9 +3250,9 @@ button.entity-card {
   margin-bottom: 0.85rem;
   border: 1px solid rgba(15, 118, 110, 0.24);
   border-left: 4px solid var(--accent);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
 }
 
 .feature-extract-surface .panel-title-row {
@@ -3265,18 +3269,18 @@ button.entity-card {
 .feature-extract-grid > div {
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.55rem 0.62rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .feature-extract-grid span {
   display: block;
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 850;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .feature-extract-grid strong {
@@ -3313,9 +3317,9 @@ button.entity-card {
   display: grid;
   gap: 0.28rem;
   border: 1px dashed var(--line-strong);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.68rem 0.72rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .feature-extract-empty p {
@@ -3355,24 +3359,24 @@ button.entity-card {
   gap: 0.68rem;
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.78rem;
-  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
   box-shadow: 0 1px 0 rgba(19, 32, 24, 0.03);
 }
 
 .ai-lab-results-surface {
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .calibration-comparison-surface {
-  border-color: #d6dfda;
-  background: #fbfdfb;
+  border-color: var(--gi-surface-sunken);
+  background: var(--gi-brand-50);
 }
 
 .guided-calibration-surface {
-  border-color: #d9e4dd;
-  background: linear-gradient(180deg, #ffffff, #f8fcf9);
+  border-color: var(--gi-surface-sunken);
+  background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50));
 }
 
 .calibration-progress-panel {
@@ -3380,9 +3384,9 @@ button.entity-card {
   gap: 0.55rem;
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.68rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .table-action {
@@ -3411,21 +3415,21 @@ button.entity-card {
   gap: 0.18rem;
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.64rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .calibration-summary-card-ready {
-  border-color: #b8d8c5;
-  background: #f7fcf8;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
 }
 
 .calibration-summary-card span {
   color: var(--muted);
   font-size: 0.76rem;
-  font-weight: 800;
-  text-transform: uppercase;
+  font-weight: 700;
+  text-transform: none;
 }
 
 .calibration-summary-card strong {
@@ -3478,15 +3482,15 @@ button.entity-card {
   display: grid;
   gap: 0.6rem;
   min-width: 0;
-  border-left: 4px solid #c9d8d1;
-  border-radius: 8px;
+  border-left: 4px solid var(--gi-line);
+  border-radius: var(--gi-radius-sm);
   padding: 0.64rem 0.68rem;
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .lab-readiness-panel-ready {
   border-left-color: #2f7d56;
-  background: #f5fbf6;
+  background: var(--gi-brand-50);
 }
 
 .lab-readiness-grid {
@@ -3500,22 +3504,22 @@ button.entity-card {
   display: grid;
   gap: 0.18rem;
   min-width: 0;
-  border: 1px solid #d8e3de;
-  border-radius: 7px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.52rem 0.58rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .lab-readiness-item-ready {
-  border-color: #b8dcc9;
-  background: #fbfffc;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
 }
 
 .lab-readiness-item span {
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 700;
-  text-transform: uppercase;
+  font-weight: 600;
+  text-transform: none;
 }
 
 .lab-readiness-item strong {
@@ -3529,11 +3533,11 @@ button.entity-card {
 .model-asset-guidance {
   display: grid;
   gap: 0.22rem;
-  border: 1px solid #d8e3de;
+  border: 1px solid var(--gi-surface-sunken);
   border-left: 4px solid #315a92;
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.58rem 0.68rem;
-  background: #f8fbff;
+  background: var(--gi-info-soft);
 }
 
 .model-asset-guidance strong {
@@ -3559,15 +3563,15 @@ button.entity-card {
   display: grid;
   gap: 0.48rem;
   min-width: 0;
-  border: 1px solid #d8e3de;
-  border-radius: 8px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .operator-profile-card-selected {
   border-color: var(--accent);
-  background: #f7fffc;
+  background: var(--gi-brand-50);
   box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
 }
 
@@ -3600,13 +3604,13 @@ button.entity-card {
 }
 
 .operator-profile-metrics span {
-  border: 1px solid #e0e9e4;
-  border-radius: 6px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.34rem 0.42rem;
-  background: #f9fbfa;
+  background: var(--gi-surface);
   color: var(--text);
   font-size: 0.76rem;
-  font-weight: 700;
+  font-weight: 600;
   overflow-wrap: anywhere;
 }
 
@@ -3621,23 +3625,23 @@ button.entity-card {
   align-items: center;
   justify-content: space-between;
   gap: 0.6rem;
-  border: 1px solid #d8e3de;
-  border-radius: 8px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.52rem 0.62rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .lab-action-guardrail-ready {
-  border-color: #b8dcc9;
-  background: #f8fff9;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
 }
 
 .lab-action-guardrail span {
   flex: 0 0 auto;
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 700;
-  text-transform: uppercase;
+  font-weight: 600;
+  text-transform: none;
 }
 
 .lab-action-guardrail strong {
@@ -3737,14 +3741,14 @@ button.entity-card {
   z-index: 3;
   border-bottom: 1px solid var(--line);
   padding-bottom: 0.65rem;
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .inspector-tab {
   min-width: 0;
   min-height: 2.2rem;
   padding: 0.38rem 0.42rem;
-  background: #ffffff;
+  background: var(--gi-surface);
   box-shadow: none;
   font-size: 0.78rem;
   line-height: 1.2;
@@ -3770,9 +3774,9 @@ button.entity-card {
   top: 6.3rem;
   z-index: 2;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.45rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .inspector-action-bar button {
@@ -3785,9 +3789,9 @@ button.entity-card {
   display: grid;
   gap: 0.48rem;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.7rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .inspector-card h3 {
@@ -3810,9 +3814,9 @@ button.entity-card {
 .inspector-field span {
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .inspector-field strong {
@@ -3875,9 +3879,9 @@ button.entity-card {
   min-width: 0;
   gap: 0.65rem;
   border: 1px solid rgba(31, 92, 71, 0.18);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.72rem;
-  background: linear-gradient(180deg, #f8fbfa 0%, #ffffff 100%);
+  background: linear-gradient(180deg, var(--gi-brand-50) 0%, var(--gi-surface) 100%);
 }
 
 .raster-readiness-surface .panel-title-row,
@@ -3915,9 +3919,9 @@ button.entity-card {
   min-width: 0;
   gap: 0.22rem;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.58rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .raster-manifest-details {
@@ -3930,17 +3934,17 @@ button.entity-card {
 
 .raster-manifest-details div {
   min-width: 0;
-  border: 1px solid #d8e3de;
-  border-radius: 6px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.42rem 0.48rem;
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .raster-manifest-details dt {
   color: var(--muted);
   font-size: 0.7rem;
-  font-weight: 850;
-  text-transform: uppercase;
+  font-weight: 700;
+  text-transform: none;
 }
 
 .raster-manifest-details dd {
@@ -3948,7 +3952,7 @@ button.entity-card {
   margin: 0.12rem 0 0;
   color: var(--text);
   font-size: 0.86rem;
-  font-weight: 750;
+  font-weight: 600;
   overflow-wrap: anywhere;
 }
 
@@ -3957,9 +3961,9 @@ button.entity-card {
   gap: 0.22rem;
   min-width: 0;
   border: 1px solid rgba(47, 125, 86, 0.24);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.6rem 0.65rem;
-  background: #f5fbf6;
+  background: var(--gi-brand-50);
 }
 
 .linked-manifest-card strong {
@@ -3982,10 +3986,10 @@ button.entity-card {
   grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 0.9fr) auto;
   gap: 0.75rem;
   align-items: end;
-  border: 1px solid #d8e3de;
-  border-radius: 8px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.75rem;
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .guided-raster-input > div,
@@ -4011,7 +4015,7 @@ button.entity-card {
 .guided-raster-input input[type="file"] {
   min-height: 2.45rem;
   padding: 0.42rem;
-  background: #ffffff;
+  background: var(--gi-surface);
   font-size: 0.78rem;
 }
 
@@ -4026,10 +4030,10 @@ button.entity-card {
   min-width: 0;
   align-items: center;
   gap: 0.45rem;
-  border: 1px solid #dce4e0;
-  border-radius: 7px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.52rem 0.6rem;
-  background: #ffffff;
+  background: var(--gi-surface);
   color: var(--muted);
 }
 
@@ -4040,9 +4044,9 @@ button.entity-card {
   flex: 0 0 1.25rem;
   place-items: center;
   border-radius: 50%;
-  background: #edf2ef;
+  background: var(--gi-surface-soft);
   font-size: 0.72rem;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .guided-detection-step strong {
@@ -4053,21 +4057,21 @@ button.entity-card {
 }
 
 .guided-detection-step-active {
-  border-color: #8fb9ad;
-  background: #f2faf7;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
   color: var(--accent-strong);
 }
 
 .guided-detection-step-complete {
-  border-color: #b8dcc9;
-  background: #f8fff9;
-  color: #235f43;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
+  color: var(--gi-brand-600);
 }
 
 .guided-detection-step-active span,
 .guided-detection-step-complete span {
-  background: #dcefe6;
-  color: #235f43;
+  background: var(--gi-brand-50);
+  color: var(--gi-brand-600);
 }
 
 .guided-detection-action {
@@ -4100,16 +4104,16 @@ button.entity-card {
 .raster-manifest-handoff span {
   color: var(--muted);
   font-size: 0.74rem;
-  font-weight: 850;
+  font-weight: 700;
   line-height: 1.2;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .raster-readiness-item strong,
 .raster-readiness-state {
   color: var(--text);
   font-size: 0.86rem;
-  font-weight: 850;
+  font-weight: 700;
   line-height: 1.25;
 }
 
@@ -4129,9 +4133,9 @@ button.entity-card {
   min-width: 0;
   gap: 0.5rem;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.62rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .dataset-tool-heading {
@@ -4167,7 +4171,7 @@ button.entity-card {
 .dataset-tool-label {
   color: var(--text);
   font-size: 0.78rem;
-  font-weight: 800;
+  font-weight: 700;
   line-height: 1.25;
 }
 
@@ -4180,12 +4184,12 @@ button.entity-card {
 .dataset-tool-error {
   margin: 0;
   border: 1px solid rgba(153, 27, 27, 0.24);
-  border-radius: 8px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.52rem 0.62rem;
   background: rgba(153, 27, 27, 0.07);
   color: var(--danger);
   font-size: 0.82rem;
-  font-weight: 750;
+  font-weight: 600;
   line-height: 1.35;
   overflow-wrap: anywhere;
 }
@@ -4541,7 +4545,7 @@ body {
 }
 
 button {
-  background: #ffffff;
+  background: var(--gi-surface);
   box-shadow: none;
 }
 
@@ -4551,7 +4555,7 @@ button:hover:not(:disabled) {
 
 section {
   border-color: var(--line);
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--gi-surface);
   box-shadow: none;
 }
 
@@ -4563,7 +4567,7 @@ section {
   grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
   min-height: 3.65rem;
   padding: 0.45rem 0.9rem;
-  background: rgba(255, 255, 255, 0.96);
+  background: color-mix(in srgb, var(--gi-surface) 96%, transparent);
   box-shadow: 0 1px 0 rgba(19, 32, 24, 0.04);
 }
 
@@ -4583,9 +4587,9 @@ section {
   min-width: 0;
   max-width: 13rem;
   border-color: transparent;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.28rem 0.52rem;
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .context-bar span {
@@ -4609,7 +4613,7 @@ section {
 
 .workbench-sidebar,
 .workbench-inspector {
-  background: #f8faf8;
+  background: var(--gi-surface);
 }
 
 .workbench-sidebar {
@@ -4622,7 +4626,7 @@ section {
 
 .nav-item {
   min-height: 2.55rem;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.42rem 0.52rem;
 }
 
@@ -4704,7 +4708,7 @@ section {
 .result-summary-card,
 .handoff-action-card,
 .system-provider-card {
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   box-shadow: none;
 }
 
@@ -4736,7 +4740,7 @@ section {
 .status-tile {
   min-height: auto;
   padding: 0.5rem;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
 }
 
 .status-tile-topline {
@@ -4766,14 +4770,14 @@ section {
 .status-pill,
 .workflow-step-status,
 .status-badge {
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.16rem 0.38rem;
   font-size: 0.62rem;
 }
 
 .workflow-guidance-panel {
   border-left: 0;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .workflow-guidance-steps {
@@ -4902,7 +4906,7 @@ section {
 .data-selection-summary {
   border-left-width: 3px;
   padding: 0.55rem 0.65rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .data-selection-summary strong {
@@ -4911,9 +4915,9 @@ section {
 
 .data-panel-form-block,
 .data-panel-list-block {
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.62rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .dataset-upload-form {
@@ -4939,7 +4943,7 @@ section {
 
 .dataset-role-summary {
   min-height: 3.1rem;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.48rem 0.55rem;
 }
 
@@ -4957,13 +4961,13 @@ section {
 }
 
 .dataset-card {
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.65rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .dataset-card-active {
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
   box-shadow: inset 3px 0 0 var(--accent);
 }
 
@@ -5004,9 +5008,9 @@ section {
 .dataset-metrics span {
   min-width: 0;
   overflow: hidden;
-  border-radius: 5px;
+  border-radius: var(--gi-radius-xs);
   padding: 0.32rem 0.42rem;
-  background: #f8fafc;
+  background: var(--gi-info-soft);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -5051,9 +5055,9 @@ section {
 
 .map-context-summary > div {
   border-left-width: 3px;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.5rem 0.58rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .map-context-summary span {
@@ -5073,7 +5077,7 @@ section {
 .map-frame-surface {
   order: 2;
   padding: 0.35rem;
-  background: #eef4f1;
+  background: var(--gi-surface-soft);
 }
 
 .workbench-main .map-container,
@@ -5106,7 +5110,7 @@ section {
 .map-layer-mode > span {
   color: var(--muted);
   font-size: 0.7rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .map-layer-mode > div {
@@ -5114,7 +5118,7 @@ section {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   overflow: hidden;
   border: 1px solid var(--line-strong);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   background: var(--panel-soft);
 }
 
@@ -5127,7 +5131,7 @@ section {
   background: transparent;
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 750;
+  font-weight: 600;
   line-height: 1.15;
 }
 
@@ -5147,7 +5151,7 @@ section {
 
 .layer-control-card,
 .map-status {
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.46rem 0.55rem;
 }
 
@@ -5165,7 +5169,7 @@ section {
 }
 
 .layer-provenance-rail > div {
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.46rem 0.55rem;
 }
 
@@ -5182,7 +5186,7 @@ section {
 .qa-evidence-map-status {
   order: 4;
   border-left-width: 3px;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.58rem;
 }
 
@@ -5203,7 +5207,7 @@ section {
 .feature-extract-surface,
 .map-inspection-surface .feature-inspector {
   margin: 0;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.62rem;
 }
 
@@ -5212,7 +5216,7 @@ section {
   gap: 0.58rem;
   border: 1px solid rgba(15, 118, 110, 0.24);
   border-left: 3px solid var(--accent);
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .gis-test-run-grid {
@@ -5224,18 +5228,18 @@ section {
 .gis-test-run-grid > div {
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 5px;
+  border-radius: var(--gi-radius-xs);
   padding: 0.42rem 0.48rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .gis-test-run-grid span {
   display: block;
   color: var(--muted);
   font-size: 0.6rem;
-  font-weight: 800;
-  letter-spacing: 0.055em;
-  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .gis-test-run-grid strong {
@@ -5253,22 +5257,22 @@ section {
   flex-wrap: wrap;
   gap: 0.28rem 0.55rem;
   align-items: center;
-  border: 1px solid #fde68a;
-  border-radius: 6px;
+  border: 1px solid var(--gi-warn-soft);
+  border-radius: var(--gi-radius-sm);
   padding: 0.46rem 0.58rem;
-  background: #fffbeb;
-  color: #713f12;
+  background: var(--gi-warn-soft);
+  color: var(--gi-warn);
   font-size: 0.76rem;
 }
 
 .basemap-policy-notice strong {
   font-size: 0.72rem;
-  letter-spacing: 0.045em;
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .basemap-policy-notice span {
-  color: #854d0e;
+  color: var(--gi-warn);
 }
 
 .guided-gis-flow {
@@ -5291,14 +5295,14 @@ section {
   align-items: center;
   min-width: 0;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.4rem 0.44rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .guided-gis-steps > div.complete {
   border-color: rgba(15, 118, 110, 0.26);
-  background: #f0fdfa;
+  background: var(--gi-brand-50);
 }
 
 .guided-gis-steps span {
@@ -5307,11 +5311,11 @@ section {
   grid-row: span 2;
   width: 1.35rem;
   height: 1.35rem;
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   background: var(--panel-soft);
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 850;
+  font-weight: 700;
 }
 
 .guided-gis-steps .complete span {
@@ -5370,19 +5374,19 @@ section {
   gap: 0.12rem;
   min-width: 0;
   border: 1px solid rgba(15, 118, 110, 0.22);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.44rem 0.52rem;
-  background: #f8fbf9;
+  background: var(--gi-brand-50);
 }
 
 .guided-gis-batch-status strong {
   overflow: hidden;
-  color: #0f766e;
+  color: var(--gi-brand-600);
   font-size: 0.68rem;
-  font-weight: 850;
-  letter-spacing: 0.045em;
+  font-weight: 700;
+  letter-spacing: 0;
   text-overflow: ellipsis;
-  text-transform: uppercase;
+  text-transform: none;
   white-space: nowrap;
 }
 
@@ -5401,7 +5405,7 @@ section {
 
 .map-inspection-surface .feature-inspector {
   border: 1px solid var(--line);
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .bbox-select-grid {
@@ -5433,7 +5437,7 @@ section {
 }
 
 .feature-extract-grid > div {
-  border-radius: 5px;
+  border-radius: var(--gi-radius-xs);
   padding: 0.42rem 0.48rem;
 }
 
@@ -5544,13 +5548,13 @@ section {
   align-items: end;
   justify-content: space-between;
   min-width: 0;
-  border-bottom: 1px solid #d7e0dc;
+  border-bottom: 1px solid var(--gi-surface-sunken);
   padding: 0 0 0.75rem;
 }
 
 .geo-explorer-header h2 {
   margin: 0.12rem 0 0;
-  color: #17211e;
+  color: var(--gi-ink-950);
   font-size: clamp(1.35rem, 2vw, 1.85rem);
   letter-spacing: 0;
   line-height: 1.12;
@@ -5559,7 +5563,7 @@ section {
 .geo-explorer-header p:last-child {
   max-width: 48rem;
   margin: 0.32rem 0 0;
-  color: #5a6964;
+  color: var(--gi-ink-600);
   font-size: 0.88rem;
 }
 
@@ -5571,27 +5575,27 @@ section {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   flex: 0 0 auto;
-  border: 1px solid #cdd8d4;
-  border-radius: 6px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.18rem;
-  background: #f3f6f5;
+  background: var(--gi-surface);
 }
 
 .geo-analysis-mode button {
   min-height: 2.15rem;
   border: 0;
-  border-radius: 4px;
+  border-radius: var(--gi-radius-xs);
   padding: 0.38rem 0.68rem;
   background: transparent;
-  color: #5a6964;
+  color: var(--gi-ink-600);
   font-size: 0.7rem;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .geo-analysis-mode button.active {
-  background: #ffffff;
-  color: #174f45;
-  box-shadow: 0 1px 3px rgba(23, 33, 30, 0.12);
+  background: var(--gi-surface);
+  color: var(--gi-brand-600);
+  box-shadow: var(--gi-shadow-xs);
 }
 
 .geo-explorer-layout {
@@ -5608,10 +5612,10 @@ section {
 .geo-results-panel,
 .geo-map-stage {
   min-width: 0;
-  border: 1px solid #d7e0dc;
-  border-radius: 7px;
-  background: #ffffff;
-  box-shadow: 0 1px 2px rgba(23, 33, 30, 0.05);
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-surface);
+  box-shadow: var(--gi-shadow-xs);
 }
 
 .geo-theme-panel,
@@ -5646,17 +5650,17 @@ section {
   place-items: center;
   width: 1.65rem;
   height: 1.65rem;
-  border-radius: 5px;
+  border-radius: var(--gi-radius-xs);
   background: #173e38;
   color: #ffffff;
   font-size: 0.76rem;
-  font-weight: 850;
+  font-weight: 700;
 }
 
 .geo-panel-heading h3,
 .geo-results-title-row h4 {
   margin: 0;
-  color: #17211e;
+  color: var(--gi-ink-950);
   font-size: 0.9rem;
   letter-spacing: 0;
   line-height: 1.2;
@@ -5664,7 +5668,7 @@ section {
 
 .geo-panel-heading p {
   margin: 0.16rem 0 0;
-  color: #6a7773;
+  color: var(--gi-ink-600);
   font-size: 0.72rem;
   line-height: 1.35;
 }
@@ -5684,9 +5688,9 @@ section {
 .geo-project-scope-select {
   display: grid;
   gap: 0.24rem;
-  color: #4c5b56;
+  color: var(--gi-ink-600);
   font-size: 0.66rem;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .geo-project-scope-select select {
@@ -5702,29 +5706,29 @@ section {
   align-items: center;
   width: 100%;
   min-height: 3.25rem;
-  border: 1px solid #e0e7e4;
-  border-radius: 6px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.48rem 0.52rem;
-  background: #ffffff;
-  color: #26332f;
+  background: var(--gi-surface);
+  color: var(--gi-ink-800);
   text-align: left;
 }
 
 .geo-theme-option:not(:disabled):hover {
-  border-color: #8eb8ac;
-  background: #f5faf8;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
 }
 
 .geo-theme-option-active {
   border-color: #397c6e;
-  background: #edf7f4;
+  background: var(--gi-brand-50);
   box-shadow: inset 3px 0 0 #176a5c;
 }
 
 .geo-theme-option:disabled {
   cursor: not-allowed;
-  background: #f6f8f7;
-  color: #7c8884;
+  background: var(--gi-surface);
+  color: var(--gi-ink-600);
   opacity: 0.72;
 }
 
@@ -5746,16 +5750,16 @@ section {
 
 .geo-theme-option small {
   margin-top: 0.12rem;
-  color: #65736e;
+  color: var(--gi-ink-600);
   font-size: 0.66rem;
 }
 
 .geo-theme-option i {
-  color: #357061;
+  color: var(--gi-brand-600);
   font-size: 0.58rem;
   font-style: normal;
-  font-weight: 800;
-  text-transform: uppercase;
+  font-weight: 700;
+  text-transform: none;
 }
 
 .geo-theme-option:disabled i {
@@ -5766,7 +5770,7 @@ section {
   display: block;
   width: 0.6rem;
   height: 1.85rem;
-  border-radius: 2px;
+  border-radius: var(--gi-radius-xs);
   background: #5c7c73;
 }
 
@@ -5789,29 +5793,29 @@ section {
 .geo-source-summary {
   display: grid;
   gap: 0.18rem;
-  border-top: 1px solid #e3e9e6;
+  border-top: 1px solid var(--gi-surface-soft);
   padding-top: 0.65rem;
 }
 
 .geo-source-summary span,
 .geo-primary-metrics span,
 .geo-selected-feature > span {
-  color: #6a7773;
+  color: var(--gi-ink-600);
   font-size: 0.62rem;
-  font-weight: 800;
-  text-transform: uppercase;
+  font-weight: 700;
+  text-transform: none;
 }
 
 .geo-source-summary strong {
   overflow: hidden;
-  color: #26332f;
+  color: var(--gi-ink-800);
   font-size: 0.76rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .geo-source-summary small {
-  color: #697671;
+  color: var(--gi-ink-600);
   font-size: 0.68rem;
   line-height: 1.35;
 }
@@ -5820,14 +5824,14 @@ section {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.45rem;
-  border-top: 1px solid #e3e9e6;
+  border-top: 1px solid var(--gi-surface-soft);
   padding-top: 0.65rem;
 }
 
 .geo-time-controls label {
-  color: #4c5b56;
+  color: var(--gi-ink-600);
   font-size: 0.66rem;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .geo-time-controls select {
@@ -5848,9 +5852,9 @@ section {
 
 .geo-scope-select {
   margin-top: auto;
-  color: #4c5b56;
+  color: var(--gi-ink-600);
   font-size: 0.7rem;
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .geo-scope-select select {
@@ -5869,9 +5873,9 @@ section {
   gap: 0.7rem;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid #d7e0dc;
+  border-bottom: 1px solid var(--gi-surface-sunken);
   padding: 0.62rem 0.7rem;
-  background: #fbfcfc;
+  background: var(--gi-surface);
 }
 
 .geo-map-step {
@@ -5898,7 +5902,7 @@ section {
 .geo-map-canvas {
   position: relative;
   min-height: 0;
-  background: #e7ece9;
+  background: var(--gi-surface-soft);
 }
 
 .workbench-main .geo-map-canvas .map-container {
@@ -5925,12 +5929,12 @@ section {
   gap: 0.55rem;
   align-items: center;
   border: 1px solid rgba(23, 33, 30, 0.18);
-  border-radius: 5px;
+  border-radius: var(--gi-radius-xs);
   padding: 0.38rem 0.5rem;
-  background: rgba(255, 255, 255, 0.94);
-  color: #42504b;
+  background: color-mix(in srgb, var(--gi-surface) 94%, transparent);
+  color: var(--gi-ink-600);
   font-size: 0.64rem;
-  box-shadow: 0 2px 8px rgba(23, 33, 30, 0.1);
+  box-shadow: var(--gi-shadow-sm);
 }
 
 .geo-map-legend span {
@@ -6024,7 +6028,7 @@ section {
 
 .geo-map-legend .geo-legend-imagery {
   border-color: #334155;
-  background: linear-gradient(135deg, #7a9b68 0 33%, #d1b37a 33% 66%, #8eb5cb 66%);
+  background: linear-gradient(135deg, #7a9b68 0 33%, var(--gi-warn-soft) 33% 66%, var(--gi-info-soft) 66%);
 }
 
 .geo-map-legend .geo-legend-thematic {
@@ -6034,9 +6038,9 @@ section {
 }
 
 .geo-map-legend .geo-legend-thematic small {
-  color: #42504c;
+  color: var(--gi-ink-600);
   font-size: 0.66rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .geo-map-legend .geo-legend-ramp {
@@ -6044,15 +6048,15 @@ section {
   width: 3.4rem;
   height: 0.62rem;
   border: 1px solid rgba(23, 39, 34, 0.25);
-  border-radius: 2px;
+  border-radius: var(--gi-radius-xs);
 }
 
-.geo-legend-ramp-space_occupation { background: linear-gradient(90deg, #fbe7d3, #be3e33); }
+.geo-legend-ramp-space_occupation { background: linear-gradient(90deg, var(--gi-warn-soft), #be3e33); }
 .geo-legend-ramp-open_space { background: linear-gradient(90deg, #ddeedb, #267a46); }
 .geo-legend-ramp-population { background: linear-gradient(90deg, #eee7f6, #673a97); }
-.geo-legend-ramp-accessibility { background: linear-gradient(90deg, #e9f1f4, #0f766e); }
-.geo-legend-ramp-services { background: linear-gradient(90deg, #fff4bf, #b66d16); }
-.geo-legend-ramp-bathymetry { background: linear-gradient(90deg, #cffafe, #0e7490); }
+.geo-legend-ramp-accessibility { background: linear-gradient(90deg, var(--gi-info-soft), #0f766e); }
+.geo-legend-ramp-services { background: linear-gradient(90deg, var(--gi-warn-soft), #b66d16); }
+.geo-legend-ramp-bathymetry { background: linear-gradient(90deg, var(--gi-info-soft), #0e7490); }
 
 .bathymetry-profile-summary {
   display: grid;
@@ -6060,9 +6064,9 @@ section {
   gap: 0.65rem;
   margin-bottom: 0.9rem;
   padding: 0.8rem;
-  border: 1px solid #a5d8e6;
-  border-radius: 6px;
-  background: #effbff;
+  border: 1px solid var(--gi-info-soft);
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-info-soft);
 }
 
 .bathymetry-profile-summary > div {
@@ -6073,13 +6077,13 @@ section {
 
 .bathymetry-profile-summary span,
 .bathymetry-profile-summary small {
-  color: #46646f;
+  color: var(--gi-ink-600);
   font-size: 0.75rem;
 }
 
 .bathymetry-profile-summary strong {
   overflow-wrap: anywhere;
-  color: #113d4b;
+  color: var(--gi-brand-600);
 }
 
 .bathymetry-profile-summary a,
@@ -6090,13 +6094,13 @@ section {
 
 .bathymetry-profile-summary a {
   width: fit-content;
-  color: #075985;
-  font-weight: 700;
+  color: var(--gi-info);
+  font-weight: 600;
 }
 
 .bathymetry-profile-summary p {
   margin: 0;
-  color: #315867;
+  color: var(--gi-brand-600);
   font-size: 0.78rem;
   line-height: 1.45;
 }
@@ -6130,16 +6134,16 @@ section {
   display: grid;
   width: min(31rem, calc(100% - 2rem));
   transform: translateX(-50%);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.58rem 0.72rem;
-  box-shadow: 0 4px 16px rgba(23, 33, 30, 0.18);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .geo-draw-instruction {
   top: 0.72rem;
-  border: 1px solid #d8936c;
+  border: 1px solid var(--gi-warn-soft);
   background: rgba(255, 248, 242, 0.96);
-  color: #6f3218;
+  color: var(--gi-warn);
 }
 
 .geo-draw-instruction strong,
@@ -6149,17 +6153,17 @@ section {
 
 .geo-viewport-status {
   bottom: 2.8rem;
-  border: 1px solid #b7ccc5;
+  border: 1px solid var(--gi-line);
   background: rgba(248, 252, 250, 0.95);
-  color: #38534b;
+  color: var(--gi-ink-800);
   font-size: 0.68rem;
   text-align: center;
 }
 
 .geo-viewport-status-error {
-  border-color: #e3a6a6;
+  border-color: var(--gi-danger-soft);
   background: rgba(255, 246, 246, 0.96);
-  color: #8b2d2d;
+  color: var(--gi-danger);
 }
 
 .geo-results-empty,
@@ -6168,23 +6172,23 @@ section {
   place-content: center;
   flex: 1 1 auto;
   min-height: 15rem;
-  border: 1px dashed #ccd7d3;
-  border-radius: 6px;
+  border: 1px dashed var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 1rem;
-  background: #fafcfa;
+  background: var(--gi-brand-50);
   text-align: center;
 }
 
 .geo-results-empty strong,
 .geo-results-loading strong {
-  color: #31413b;
+  color: var(--gi-ink-800);
   font-size: 0.82rem;
 }
 
 .geo-results-empty p {
   max-width: 15rem;
   margin: 0.35rem auto 0;
-  color: #6a7773;
+  color: var(--gi-ink-600);
   font-size: 0.72rem;
   line-height: 1.45;
 }
@@ -6193,7 +6197,7 @@ section {
   width: 1.4rem;
   height: 1.4rem;
   margin: 0 auto 0.6rem;
-  border: 2px solid #c6d6d0;
+  border: 2px solid var(--gi-line);
   border-top-color: #176a5c;
   border-radius: 50%;
   animation: geo-spin 0.8s linear infinite;
@@ -6202,11 +6206,11 @@ section {
 .geo-image-analysis {
   display: grid;
   gap: 0.55rem;
-  border: 1px solid #b9cec7;
+  border: 1px solid var(--gi-line);
   border-left: 3px solid #176a5c;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.65rem;
-  background: #f4faf8;
+  background: var(--gi-brand-50);
 }
 
 .geo-image-analysis > div {
@@ -6215,21 +6219,21 @@ section {
 }
 
 .geo-image-analysis span {
-  color: #4f6a62;
+  color: var(--gi-ink-600);
   font-size: 0.61rem;
-  font-weight: 850;
-  text-transform: uppercase;
+  font-weight: 700;
+  text-transform: none;
 }
 
 .geo-image-analysis strong {
-  color: #173e38;
+  color: var(--gi-brand-600);
   font-size: 0.78rem;
 }
 
 .geo-image-analysis small,
 .geo-image-analysis p {
   margin: 0;
-  color: #64736d;
+  color: var(--gi-ink-600);
   font-size: 0.65rem;
   line-height: 1.4;
 }
@@ -6247,11 +6251,11 @@ section {
 .geo-orthophoto-product select {
   width: 100%;
   min-height: 2.25rem;
-  border: 1px solid #b9cec7;
-  border-radius: 4px;
+  border: 1px solid var(--gi-line);
+  border-radius: var(--gi-radius-xs);
   padding: 0.35rem 0.5rem;
-  background: #fff;
-  color: #263a34;
+  background: var(--gi-surface);
+  color: var(--gi-ink-800);
   font: inherit;
   font-size: 0.72rem;
 }
@@ -6260,22 +6264,22 @@ section {
 .geo-image-analysis-detecting,
 .geo-image-analysis-validating {
   border-left-color: #b17a31;
-  background: #fffbeb;
+  background: var(--gi-warn-soft);
 }
 
 .geo-image-analysis-complete {
   border-left-color: #277749;
-  background: #f1faf4;
+  background: var(--gi-brand-50);
 }
 
 .geo-image-analysis-failed {
-  border-color: #e2b9b5;
+  border-color: var(--gi-danger-soft);
   border-left-color: #aa3f37;
-  background: #fff7f6;
+  background: var(--gi-danger-soft);
 }
 
 .geo-image-analysis .error {
-  color: #8b2d2d;
+  color: var(--gi-danger);
 }
 
 @keyframes geo-spin {
@@ -6292,15 +6296,15 @@ section {
   display: grid;
   gap: 0.18rem;
   min-width: 0;
-  border: 1px solid #e1e8e5;
-  border-radius: 5px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-xs);
   padding: 0.48rem;
-  background: #f8faf9;
+  background: var(--gi-surface);
 }
 
 .geo-primary-metrics strong {
   overflow: hidden;
-  color: #1e302a;
+  color: var(--gi-ink-950);
   font-size: 0.86rem;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -6318,49 +6322,49 @@ section {
   align-items: baseline;
   justify-content: space-between;
   min-width: 0;
-  border-bottom: 1px solid #e4ebe8;
+  border-bottom: 1px solid var(--gi-surface-soft);
   padding: 0.3rem 0.1rem;
 }
 
 .geo-supporting-metrics span {
-  color: #687570;
+  color: var(--gi-ink-600);
   font-size: 0.64rem;
 }
 
 .geo-supporting-metrics strong {
-  color: #263832;
+  color: var(--gi-ink-800);
   font-size: 0.72rem;
   white-space: nowrap;
 }
 
 .geo-temporal-metrics > div.positive {
-  border-color: #b8d8c5;
-  background: #f1faf4;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
 }
 
 .geo-temporal-metrics > div.negative {
-  border-color: #e2c1bd;
-  background: #fff6f5;
+  border-color: var(--gi-danger-soft);
+  background: var(--gi-danger-soft);
 }
 
 .geo-temporal-metrics small {
-  color: #64736d;
+  color: var(--gi-ink-600);
   font-size: 0.62rem;
 }
 
 .geo-temporal-summary {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  border: 1px solid #e1e8e5;
-  border-radius: 5px;
-  background: #fbfcfc;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-xs);
+  background: var(--gi-surface);
 }
 
 .geo-temporal-summary > div {
   display: grid;
   gap: 0.15rem;
   min-width: 0;
-  border-left: 1px solid #e1e8e5;
+  border-left: 1px solid var(--gi-surface-sunken);
   padding: 0.45rem;
 }
 
@@ -6369,15 +6373,15 @@ section {
 }
 
 .geo-temporal-summary span {
-  color: #6a7773;
+  color: var(--gi-ink-600);
   font-size: 0.6rem;
-  font-weight: 800;
-  text-transform: uppercase;
+  font-weight: 700;
+  text-transform: none;
 }
 
 .geo-temporal-summary strong {
   overflow: hidden;
-  color: #26332f;
+  color: var(--gi-ink-800);
   font-size: 0.7rem;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -6386,9 +6390,9 @@ section {
 .geo-temporal-chart {
   margin-top: 0.7rem;
   padding: 0.7rem;
-  border: 1px solid #e1e8e5;
-  border-radius: 5px;
-  background: #fbfcfc;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-xs);
+  background: var(--gi-surface);
 }
 
 .geo-temporal-chart-heading {
@@ -6405,7 +6409,7 @@ section {
 
 .geo-temporal-chart-heading span,
 .geo-temporal-chart-values span {
-  color: #6a7773;
+  color: var(--gi-ink-600);
   font-size: 0.64rem;
 }
 
@@ -6451,7 +6455,7 @@ section {
   display: grid;
   gap: 0.1rem;
   padding-top: 0.4rem;
-  border-top: 1px solid #e1e8e5;
+  border-top: 1px solid var(--gi-surface-sunken);
 }
 
 .geo-temporal-chart-values strong {
@@ -6467,24 +6471,24 @@ section {
 .geo-change-counts span {
   display: grid;
   gap: 0.1rem;
-  border: 1px solid #e1e8e5;
-  border-radius: 5px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-xs);
   padding: 0.4rem;
-  color: #687570;
+  color: var(--gi-ink-600);
   font-size: 0.64rem;
   text-align: center;
 }
 
 .geo-change-counts strong {
-  color: #26332f;
+  color: var(--gi-ink-800);
   font-size: 0.85rem;
 }
 
 .geo-theme-results {
   display: grid;
   gap: 0;
-  border: 1px solid #e1e8e5;
-  border-radius: 6px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   overflow: hidden;
 }
 
@@ -6492,11 +6496,11 @@ section {
   display: flex;
   justify-content: space-between;
   padding: 0.48rem 0.55rem;
-  background: #f4f7f5;
+  background: var(--gi-surface);
 }
 
 .geo-results-title-row span {
-  color: #697671;
+  color: var(--gi-ink-600);
   font-size: 0.65rem;
 }
 
@@ -6506,7 +6510,7 @@ section {
   gap: 0.45rem;
   align-items: center;
   min-height: 2.65rem;
-  border-top: 1px solid #e7ecea;
+  border-top: 1px solid var(--gi-surface-soft);
   padding: 0.38rem 0.5rem;
 }
 
@@ -6526,14 +6530,14 @@ section {
 
 .geo-theme-result-row small {
   overflow: hidden;
-  color: #71807a;
+  color: var(--gi-ink-600);
   font-size: 0.61rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .geo-theme-result-row b {
-  color: #24342e;
+  color: var(--gi-ink-800);
   font-size: 0.7rem;
   text-align: right;
 }
@@ -6553,37 +6557,37 @@ section {
   margin: 0;
   border-left: 3px solid #b17a31;
   padding: 0.45rem 0.55rem;
-  background: #fffbeb;
-  color: #76501d;
+  background: var(--gi-warn-soft);
+  color: var(--gi-warn);
   font-size: 0.68rem;
   line-height: 1.4;
 }
 
 .geo-result-details {
-  border: 1px solid #e1e8e5;
-  border-radius: 6px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
 }
 
 .geo-result-details summary {
   padding: 0.5rem 0.55rem;
-  color: #40514b;
+  color: var(--gi-ink-600);
   cursor: pointer;
   font-size: 0.72rem;
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .geo-result-details dl {
   display: grid;
   gap: 0;
   margin: 0;
-  border-top: 1px solid #e7ecea;
+  border-top: 1px solid var(--gi-surface-soft);
 }
 
 .geo-result-details dl > div {
   display: grid;
   grid-template-columns: minmax(6rem, 0.8fr) minmax(0, 1.2fr);
   gap: 0.5rem;
-  border-top: 1px solid #edf1ef;
+  border-top: 1px solid var(--gi-surface-soft);
   padding: 0.36rem 0.5rem;
 }
 
@@ -6598,12 +6602,12 @@ section {
 }
 
 .geo-result-details dt {
-  color: #66736f;
+  color: var(--gi-ink-600);
 }
 
 .geo-result-details dd {
   margin: 0;
-  color: #283832;
+  color: var(--gi-ink-800);
 }
 
 .geo-selected-feature {
@@ -6611,17 +6615,17 @@ section {
   gap: 0.16rem;
   border-left: 3px solid #a7792f;
   padding: 0.48rem 0.55rem;
-  background: #fffaf0;
+  background: var(--gi-warn-soft);
 }
 
 .geo-selected-feature strong {
   overflow-wrap: anywhere;
-  color: #4d3d22;
+  color: var(--gi-warn);
   font-size: 0.75rem;
 }
 
 .geo-selected-feature small {
-  color: #786a51;
+  color: var(--gi-ink-600);
   font-size: 0.65rem;
 }
 
@@ -6637,7 +6641,7 @@ section {
   grid-template-columns: minmax(0, 1fr) auto auto;
   gap: 0.45rem;
   align-items: center;
-  border-top: 1px solid #dfe7e3;
+  border-top: 1px solid var(--gi-surface-sunken);
   padding-top: 0.65rem;
 }
 
@@ -6648,7 +6652,7 @@ section {
 }
 
 .geo-result-next-actions small {
-  color: #687570;
+  color: var(--gi-ink-600);
   font-size: 0.66rem;
   line-height: 1.35;
 }
@@ -6658,12 +6662,12 @@ section {
   flex-wrap: wrap;
   gap: 0.4rem 1rem;
   align-items: center;
-  color: #687570;
+  color: var(--gi-ink-600);
   font-size: 0.68rem;
 }
 
 .geo-explorer-footer strong {
-  color: #45534f;
+  color: var(--gi-ink-600);
 }
 
 @media (min-width: 1800px) {
@@ -6775,7 +6779,7 @@ section {
   }
 
   .geo-temporal-summary > div {
-    border-top: 1px solid #e1e8e5;
+    border-top: 1px solid var(--gi-surface-sunken);
     border-left: 0;
   }
 
@@ -6865,11 +6869,11 @@ section {
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.42rem 0.7rem;
   min-width: 0;
-  border: 1px solid #d9e4df;
+  border: 1px solid var(--gi-surface-sunken);
   border-left: 3px solid #75968a;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.82rem;
-  background: #fbfcfc;
+  background: var(--gi-surface);
 }
 
 .source-domain-card > div {
@@ -6882,7 +6886,7 @@ section {
 .source-domain-card p,
 .source-domain-card small {
   margin: 0;
-  color: #62716c;
+  color: var(--gi-ink-600);
   font-size: 0.73rem;
   line-height: 1.42;
 }
@@ -6898,16 +6902,16 @@ section {
 }
 
 .source-domain-card small {
-  border-top: 1px solid #e6ece9;
+  border-top: 1px solid var(--gi-surface-soft);
   padding-top: 0.4rem;
 }
 
 .source-status-operational {
-  color: #286646;
+  color: var(--gi-brand-600);
 }
 
 .source-status-planned {
-  color: #8a5a16;
+  color: var(--gi-warn);
 }
 
 .source-theme-coverage,
@@ -6919,16 +6923,16 @@ section {
 .source-theme-coverage,
 .source-loaded-disclosure {
   margin-top: 0.8rem;
-  border-top: 1px solid #dfe7e4;
+  border-top: 1px solid var(--gi-surface-sunken);
   padding-top: 0.7rem;
 }
 
 .source-theme-coverage > summary,
 .source-loaded-disclosure > summary {
   cursor: pointer;
-  color: #34433e;
+  color: var(--gi-ink-800);
   font-size: 0.82rem;
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .source-catalog-grid {
@@ -6944,9 +6948,9 @@ section {
   gap: 0.45rem 0.75rem;
   min-width: 0;
   padding: 0.85rem;
-  border: 1px solid #dfe7e4;
-  border-radius: 6px;
-  background: #fbfcfc;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-surface);
 }
 
 .source-catalog-card > div {
@@ -6960,12 +6964,12 @@ section {
 .source-opportunity-list span,
 .source-opportunity-list p {
   margin: 0;
-  color: #66746f;
+  color: var(--gi-ink-600);
   font-size: 0.74rem;
 }
 
 .source-catalog-card b {
-  color: #286646;
+  color: var(--gi-brand-600);
   font-size: 0.7rem;
 }
 
@@ -6985,26 +6989,26 @@ section {
   gap: 0.2rem;
   border-left: 3px solid #287051;
   padding: 0.6rem 0.75rem;
-  background: #f2f8f5;
+  background: var(--gi-brand-50);
 }
 
 .source-catalog-loaded span,
 .source-catalog-loaded p {
   margin: 0;
-  color: #5d6d67;
+  color: var(--gi-ink-600);
   font-size: 0.72rem;
 }
 
 .source-opportunity-list {
   margin-top: 0.8rem;
-  border-top: 1px solid #dfe7e4;
+  border-top: 1px solid var(--gi-surface-sunken);
   padding-top: 0.75rem;
 }
 
 .source-opportunity-list > summary {
   cursor: pointer;
-  color: #34433e;
-  font-weight: 750;
+  color: var(--gi-ink-800);
+  font-weight: 600;
 }
 
 .source-opportunity-list > div {
@@ -7018,7 +7022,7 @@ section {
   display: grid;
   gap: 0.55rem;
   border: 0;
-  border-top: 1px solid #e2e8e6;
+  border-top: 1px solid var(--gi-surface-sunken);
   border-radius: 0;
   padding: 0.7rem 0 0;
   background: transparent;
@@ -7038,7 +7042,7 @@ section {
 }
 
 .source-opportunity-domain > header span {
-  color: #66746f;
+  color: var(--gi-ink-600);
   font-size: 0.7rem;
 }
 
@@ -7053,8 +7057,8 @@ section {
   display: grid;
   gap: 0.35rem;
   padding: 0.75rem;
-  border: 1px solid #e2e8e6;
-  border-radius: 5px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-xs);
 }
 
 .source-opportunity-list article > div {
@@ -7064,14 +7068,14 @@ section {
 
 .source-opportunity-list a {
   width: fit-content;
-  color: #17638a;
+  color: var(--gi-info);
   font-size: 0.72rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .source-opportunity-list article > small {
   margin: 0;
-  color: #52635d;
+  color: var(--gi-ink-600);
   font-size: 0.7rem;
   line-height: 1.4;
 }
@@ -7082,8 +7086,8 @@ section {
   right: 0.7rem;
   border-left: 2px solid #718096;
   padding-left: 0.38rem;
-  font-size: 0.65rem !important;
-  font-weight: 800;
+  font-size: 0.65rem;
+  font-weight: 700;
 }
 
 .source-opportunity-list article > div {
@@ -7092,12 +7096,12 @@ section {
 
 .source-priority-next {
   border-left-color: #287051;
-  color: #286646 !important;
+  color: var(--gi-brand-600);
 }
 
 .source-priority-planned {
   border-left-color: #a66a18;
-  color: #8a5a16 !important;
+  color: var(--gi-warn);
 }
 
 @media (max-width: 980px) {
@@ -7111,7 +7115,7 @@ section {
 
 @media (max-width: 640px) {
   section.source-catalog-panel > .panel-title-row {
-    display: grid !important;
+    display: grid;
     gap: 0.6rem;
   }
 
@@ -7148,9 +7152,9 @@ section {
   align-items: end;
   margin-top: 1rem;
   padding: 0.8rem;
-  border: 1px solid #dfe7e4;
-  border-radius: 6px;
-  background: #f7faf9;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-brand-50);
 }
 
 .assistant-context-strip > div,
@@ -7163,19 +7167,19 @@ section {
 .assistant-context-strip span,
 .assistant-composer label,
 .assistant-message > span {
-  color: #66746f;
+  color: var(--gi-ink-600);
   font-size: 0.68rem;
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .assistant-context-strip select {
   width: 100%;
   min-height: 2.5rem;
-  border: 1px solid #cfdad6;
-  border-radius: 5px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-xs);
   padding: 0 0.65rem;
-  background: #ffffff;
-  color: #26332f;
+  background: var(--gi-surface);
+  color: var(--gi-ink-800);
 }
 
 .assistant-suggestions {
@@ -7187,19 +7191,19 @@ section {
 
 .assistant-suggestions button {
   min-height: 3.5rem;
-  border: 1px solid #d8e3df;
-  border-radius: 5px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-xs);
   padding: 0.65rem;
-  background: #ffffff;
-  color: #34433e;
+  background: var(--gi-surface);
+  color: var(--gi-ink-800);
   font-size: 0.75rem;
-  font-weight: 650;
+  font-weight: 600;
   text-align: left;
 }
 
 .assistant-suggestions button:hover:not(:disabled) {
-  border-color: #7fa99a;
-  background: #f4f9f7;
+  border-color: var(--gi-line);
+  background: var(--gi-brand-50);
 }
 
 .assistant-conversation {
@@ -7209,17 +7213,17 @@ section {
   max-height: 52vh;
   margin-top: 0.8rem;
   overflow-y: auto;
-  border: 1px solid #dfe7e4;
-  border-radius: 6px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.9rem;
-  background: #f7f9f8;
+  background: var(--gi-surface);
 }
 
 .assistant-empty-state {
   align-self: center;
   justify-self: center;
   max-width: 34rem;
-  color: #66746f;
+  color: var(--gi-ink-600);
   text-align: center;
 }
 
@@ -7232,35 +7236,35 @@ section {
   gap: 0.3rem;
   width: min(82%, 48rem);
   padding: 0.8rem 0.9rem;
-  border: 1px solid #dfe7e4;
-  border-radius: 6px;
-  background: #ffffff;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-surface);
 }
 
 .assistant-message-user {
   justify-self: end;
-  border-color: #c9ddd5;
-  background: #eef6f3;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
 }
 
 .assistant-message p {
   margin: 0;
-  color: #26332f;
+  color: var(--gi-ink-800);
   line-height: 1.55;
   white-space: pre-wrap;
 }
 
 .assistant-message details {
   margin-top: 0.3rem;
-  border-top: 1px solid #e3e9e7;
+  border-top: 1px solid var(--gi-surface-soft);
   padding-top: 0.45rem;
 }
 
 .assistant-message summary {
   cursor: pointer;
-  color: #56655f;
+  color: var(--gi-ink-600);
   font-size: 0.7rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .assistant-evidence-grid {
@@ -7272,9 +7276,9 @@ section {
 
 .assistant-evidence-grid span {
   padding: 0.35rem 0.45rem;
-  border-radius: 4px;
-  background: #f1f5f3;
-  color: #596761;
+  border-radius: var(--gi-radius-xs);
+  background: var(--gi-surface-soft);
+  color: var(--gi-ink-600);
   font-size: 0.68rem;
 }
 
@@ -7282,14 +7286,14 @@ section {
   display: flex;
   align-items: center;
   gap: 0.55rem;
-  color: #53645e;
+  color: var(--gi-ink-600);
   font-size: 0.76rem;
 }
 
 .assistant-thinking > span {
   width: 0.8rem;
   height: 0.8rem;
-  border: 2px solid #b9cbc4;
+  border: 2px solid var(--gi-line);
   border-top-color: #347950;
   border-radius: 50%;
   animation: assistant-spin 0.8s linear infinite;
@@ -7308,10 +7312,10 @@ section {
 .assistant-composer textarea {
   width: 100%;
   resize: vertical;
-  border: 1px solid #cfdad6;
-  border-radius: 6px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-sm);
   padding: 0.75rem;
-  color: #26332f;
+  color: var(--gi-ink-800);
   font: inherit;
   line-height: 1.45;
 }
@@ -7325,7 +7329,7 @@ section {
 
 .assistant-composer > div p {
   margin: 0 auto 0 0;
-  color: #66746f;
+  color: var(--gi-ink-600);
   font-size: 0.68rem;
 }
 
@@ -7370,11 +7374,11 @@ section {
   gap: 0.7rem;
   align-items: center;
   min-height: 3.25rem;
-  border: 1px solid #b9d2ca;
-  border-radius: 6px;
+  border: 1px solid var(--gi-line);
+  border-radius: var(--gi-radius-sm);
   padding: 0.65rem 0.8rem;
-  background: #f1f8f6;
-  color: #24453d;
+  background: var(--gi-brand-50);
+  color: var(--gi-brand-600);
 }
 
 .geo-bootstrap-status > div {
@@ -7387,21 +7391,21 @@ section {
 }
 
 .geo-bootstrap-status small {
-  color: #5b6e68;
+  color: var(--gi-ink-600);
   font-size: 0.7rem;
 }
 
 .geo-bootstrap-status-error {
-  border-color: #d6aaa0;
-  background: #fff6f3;
-  color: #7a2f21;
+  border-color: var(--gi-danger-soft);
+  background: var(--gi-warn-soft);
+  color: var(--gi-danger);
 }
 
 .geo-loading-indicator {
   width: 1rem;
   height: 1rem;
   flex: 0 0 1rem;
-  border: 2px solid #a7c8bf;
+  border: 2px solid var(--gi-brand-50);
   border-top-color: #176a5c;
   border-radius: 50%;
   animation: geo-loading-spin 0.8s linear infinite;
@@ -7415,18 +7419,18 @@ section {
 
 .geo-performance-status {
   margin: 0;
-  border-left: 3px solid #79a89c;
+  border-left: 3px solid var(--gi-line);
   padding: 0.45rem 0.55rem;
-  background: #f5f9f8;
-  color: #4d625c;
+  background: var(--gi-brand-50);
+  color: var(--gi-ink-600);
   font-size: 0.68rem;
   line-height: 1.4;
 }
 
 .geo-performance-status-warning {
   border-left-color: #b36b1e;
-  background: #fff8ec;
-  color: #78450f;
+  background: var(--gi-warn-soft);
+  color: var(--gi-warn);
 }
 
 .geo-theme-option strong,
@@ -7440,7 +7444,7 @@ section {
 @media (prefers-reduced-motion: reduce) {
   .geo-loading-indicator {
     animation: none;
-    border-top-color: #a7c8bf;
+    border-top-color: var(--gi-brand-50);
     background: #176a5c;
   }
 }
@@ -7504,7 +7508,7 @@ section {
 .coverage-summary-row span {
   padding: 4px 8px;
   border: 1px solid var(--line);
-  border-radius: 4px;
+  border-radius: var(--gi-radius-xs);
   background: var(--surface-raised);
   color: var(--muted);
   font-size: 0.78rem;
@@ -7529,7 +7533,7 @@ section {
   padding: 10px 12px;
   border: 1px solid var(--line);
   border-left: 3px solid var(--muted);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   background: var(--surface-raised);
 }
 
diff --git a/frontend/src/styles/atlas-premium-v2.css b/frontend/src/styles/atlas-premium-v2.css
index 100f54fc..c4d7e828 100644
--- a/frontend/src/styles/atlas-premium-v2.css
+++ b/frontend/src/styles/atlas-premium-v2.css
@@ -86,7 +86,7 @@ body {
       transparent 15rem
     ),
     linear-gradient(180deg, var(--atlas-900), var(--atlas-950));
-  box-shadow: 12px 0 36px rgba(8, 42, 38, 0.12);
+  box-shadow: var(--gi-shadow-lg);
 }
 
 .sidebar-brand {
@@ -101,7 +101,7 @@ body {
   width: 2.65rem;
   height: 2.65rem;
   border: 1px solid rgba(173, 238, 227, 0.44);
-  border-radius: 0.8rem;
+  border-radius: var(--gi-radius-lg);
   object-fit: cover;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.14),
@@ -120,7 +120,7 @@ body {
 .itworx-signature > span {
   color: rgba(223, 250, 245, 0.48);
   font-size: 0.58rem;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
@@ -173,12 +173,12 @@ body {
   gap: 0.75rem;
   margin: 0.2rem 0;
   border: 1px solid transparent;
-  border-radius: 0.75rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.68rem 0.72rem;
   color: rgba(239, 252, 249, 0.7);
   background: transparent;
   font-size: 0.82rem;
-  font-weight: 650;
+  font-weight: 600;
   box-shadow: none;
 }
 
@@ -209,9 +209,9 @@ body {
   bottom: 0.68rem;
   left: -0.86rem;
   width: 0.22rem;
-  border-radius: 0 999px 999px 0;
-  background: #69d5c2;
-  box-shadow: 0 0 14px rgba(105, 213, 194, 0.72);
+  border-radius: 0 var(--gi-radius-pill) var(--gi-radius-pill) 0;
+  background: var(--gi-brand-50);
+  box-shadow: var(--gi-shadow-md);
   content: "";
 }
 
@@ -234,7 +234,7 @@ body {
   border-bottom: 1px solid rgba(194, 210, 205, 0.72);
   padding: 0.72rem 1.35rem;
   background: rgba(250, 252, 251, 0.9);
-  box-shadow: 0 8px 24px rgba(8, 42, 38, 0.055);
+  box-shadow: var(--gi-shadow-md);
   backdrop-filter: blur(18px) saturate(135%);
 }
 
@@ -246,7 +246,7 @@ body {
   position: relative;
   min-width: 0;
   border: 1px solid transparent;
-  border-radius: 0.72rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.48rem 0.72rem 0.52rem;
   background: rgba(238, 248, 246, 0.62);
   transition:
@@ -256,13 +256,13 @@ body {
 }
 
 .context-bar > div:first-child {
-  border-color: #c7ded8;
-  background: #eaf6f3;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
 }
 
 .workbench-shell .context-bar span {
   margin-bottom: 0.16rem;
-  color: #6d827c;
+  color: var(--gi-ink-600);
   font-size: 0.66rem;
   letter-spacing: 0.055em;
 }
@@ -270,16 +270,16 @@ body {
 .context-bar strong {
   color: var(--ink-950);
   font-size: 0.78rem;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .context-health {
   min-height: 2.45rem;
-  border: 1px solid #cfe0dc;
-  border-radius: 999px;
+  border: 1px solid var(--gi-surface-sunken);
+  border-radius: var(--gi-radius-pill);
   padding: 0.45rem 0.78rem;
   color: var(--atlas-800);
-  background: #f4faf8;
+  background: var(--gi-brand-50);
   font-size: 0.75rem;
 }
 
@@ -293,14 +293,14 @@ body {
 .context-account {
   min-height: 2.55rem;
   border: 1px solid var(--atlas-line);
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.22rem 0.28rem 0.22rem 0.68rem;
   background: var(--paper);
   box-shadow: var(--atlas-shadow-xs);
 }
 
 .context-account button {
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
 }
 
 /* Calm, singular operational notice */
@@ -315,10 +315,10 @@ body {
   width: min(26rem, calc(100vw - 2rem));
   gap: 0.7rem;
   align-items: start;
-  border: 1px solid #e6c9b2;
-  border-radius: 0.9rem;
+  border: 1px solid var(--gi-warn-soft);
+  border-radius: var(--gi-radius-lg);
   padding: 0.82rem 0.95rem;
-  color: #6f3b1c;
+  color: var(--gi-warn);
   background: rgba(255, 250, 244, 0.96);
   box-shadow: var(--atlas-shadow-floating);
   backdrop-filter: blur(18px);
@@ -327,7 +327,7 @@ body {
 .workspace-notice > svg {
   width: 1.08rem;
   margin-top: 0.08rem;
-  color: #b26530;
+  color: var(--gi-warn);
 }
 
 .workspace-notice > div {
@@ -340,7 +340,7 @@ body {
 }
 
 .workspace-notice span {
-  color: #865337;
+  color: var(--gi-warn);
   font-size: 0.74rem;
   line-height: 1.45;
 }
@@ -372,7 +372,7 @@ body {
   color: var(--ink-950);
   font-family: "Manrope", sans-serif;
   font-size: clamp(1.65rem, 2vw, 2.25rem);
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: -0.045em;
 }
 
@@ -388,21 +388,21 @@ body {
 .primary-action,
 .quick-action-button {
   min-height: 2.65rem;
-  border-radius: 0.68rem;
+  border-radius: var(--gi-radius-md);
   padding-inline: 1rem;
   font-size: 0.78rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .workbench-shell .primary-action {
   border-color: var(--atlas-700);
   background: linear-gradient(135deg, var(--atlas-700), var(--atlas-600));
-  box-shadow: 0 8px 20px rgba(13, 102, 91, 0.16);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .workbench-shell .primary-action:hover:not(:disabled) {
   transform: translateY(-1px);
-  box-shadow: 0 12px 26px rgba(13, 102, 91, 0.22);
+  box-shadow: var(--gi-shadow-md);
 }
 
 /* Shared premium surfaces */
@@ -418,7 +418,7 @@ body {
 .export-history-disclosure {
   border: 1px solid rgba(194, 210, 205, 0.78);
   border-radius: var(--atlas-radius-lg);
-  background: rgba(255, 255, 255, 0.94);
+  background: color-mix(in srgb, var(--gi-surface) 94%, transparent);
   box-shadow: var(--atlas-shadow-sm);
 }
 
@@ -429,12 +429,9 @@ body {
   letter-spacing: -0.025em;
 }
 
-.workbench-shell .eyebrow,
-.workbench-shell .section-kicker {
-  color: var(--atlas-700);
-  font-size: 0.69rem;
-  letter-spacing: 0.06em;
-}
+/* De regel voor .eyebrow en .section-kicker die hier stond, was een tweede
+   definitie van wat atlas-workbench.css al zette, met afwijkende waarden. Ze
+   verplichtte die andere regel tot !important. Eén definitie is genoeg. */
 
 .muted,
 .panel-title-row .muted,
@@ -448,17 +445,17 @@ body {
 .status-badge,
 .count-pill,
 .status-pill {
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.28rem 0.52rem;
   font-size: 0.66rem;
-  font-weight: 750;
+  font-weight: 600;
   letter-spacing: 0.015em;
 }
 
 .result-state,
 .empty-state {
   min-height: 9rem;
-  border: 1px dashed #bfd0cb;
+  border: 1px dashed var(--gi-line);
   border-radius: var(--atlas-radius-md);
   padding: 1.2rem;
   background:
@@ -467,13 +464,13 @@ body {
       rgba(21, 152, 137, 0.08),
       transparent 8rem
     ),
-    #fbfdfc;
+    var(--gi-brand-50);
 }
 
 .result-state-error {
   border-style: solid;
-  border-color: #ebc7bf;
-  background: #fff8f6;
+  border-color: var(--gi-danger-soft);
+  background: var(--gi-danger-soft);
 }
 
 /* Status becomes an executive health overview */
@@ -492,7 +489,7 @@ body {
       rgba(91, 204, 184, 0.22),
       transparent 14rem
     ),
-    linear-gradient(135deg, #f8fcfb, #eef7f4);
+    linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
 }
 
 .status-strip-header h2 {
@@ -520,7 +517,7 @@ body {
   border-radius: 50%;
   padding: 0;
   background: var(--paper);
-  box-shadow: 0 12px 30px rgba(8, 42, 38, 0.13);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .status-readiness-orbit {
@@ -578,7 +575,7 @@ body {
 .status-strip-grid {
   gap: 0.65rem;
   padding: 0.75rem;
-  background: #f7faf9;
+  background: var(--gi-brand-50);
 }
 
 .status-tile,
@@ -587,7 +584,7 @@ body {
   min-height: 8rem;
   overflow: hidden;
   border: 1px solid var(--atlas-line);
-  border-radius: 0.8rem;
+  border-radius: var(--gi-radius-lg);
   padding: 0.9rem;
   background: var(--paper);
 }
@@ -604,7 +601,7 @@ body {
 }
 
 .status-tile-ready {
-  border-color: #c6dfd8;
+  border-color: var(--gi-brand-50);
   box-shadow: inset 0 3px 0 #45a996;
 }
 
@@ -638,12 +635,12 @@ body {
 }
 
 .workbench-shell .workspace-grid-data > section.source-catalog-panel {
-  border-color: #c5dcd6;
+  border-color: var(--gi-brand-50);
   background:
     linear-gradient(
       135deg,
       rgba(238, 248, 246, 0.72),
-      rgba(255, 255, 255, 0.95) 28%
+      color-mix(in srgb, var(--gi-surface) 95%, transparent) 28%
     ),
     var(--paper);
 }
@@ -664,7 +661,7 @@ body {
 .workspace-grid-data .dataset-card {
   border-color: var(--atlas-line);
   padding: 0.9rem;
-  background: #fcfdfd;
+  background: var(--gi-surface);
   transition:
     transform 140ms ease,
     border-color 140ms ease,
@@ -674,7 +671,7 @@ body {
 .workspace-grid-data .entity-card:hover,
 .workspace-grid-data .dataset-card:hover {
   transform: translateY(-1px);
-  border-color: #9fc8be;
+  border-color: var(--gi-brand-50);
   box-shadow: var(--atlas-shadow-sm);
 }
 
@@ -698,7 +695,7 @@ body {
       rgba(84, 196, 176, 0.14),
       transparent 16rem
     ),
-    linear-gradient(135deg, #fbfdfc, #f3f9f7);
+    linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
 }
 
 .geo-explorer-header h2 {
@@ -714,13 +711,13 @@ body {
 
 .geo-explorer-layout {
   gap: 0;
-  background: #eef3f1;
+  background: var(--gi-surface-soft);
 }
 
 .geo-theme-panel,
 .geo-insight-panel {
   border: 0;
-  background: rgba(255, 255, 255, 0.97);
+  background: color-mix(in srgb, var(--gi-surface) 97%, transparent);
 }
 
 .geo-theme-panel {
@@ -735,7 +732,7 @@ body {
 .geo-insight-panel > .geo-panel-heading {
   min-height: 5rem;
   padding: 1rem;
-  background: #fbfdfc;
+  background: var(--gi-brand-50);
 }
 
 .geo-theme-list {
@@ -746,20 +743,20 @@ body {
 .geo-theme-option {
   min-height: 3.65rem;
   border: 1px solid transparent;
-  border-radius: 0.75rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.65rem 0.72rem;
   background: transparent;
 }
 
 .geo-theme-option:hover:not(:disabled) {
-  border-color: #c4d9d4;
-  background: #f5faf8;
+  border-color: var(--gi-line);
+  background: var(--gi-brand-50);
 }
 
 .geo-theme-option-active,
 .geo-theme-option-active:hover:not(:disabled) {
-  border-color: #9bc9be;
-  background: linear-gradient(135deg, #e7f5f1, #f4faf8);
+  border-color: var(--gi-brand-50);
+  background: linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
   box-shadow:
     inset 3px 0 0 var(--atlas-600),
     0 6px 16px rgba(8, 42, 38, 0.07);
@@ -777,7 +774,7 @@ body {
 .geo-map-panel,
 .geo-map-stage,
 .map-frame-surface {
-  background: #dce7e3;
+  background: var(--gi-surface-sunken);
 }
 
 .geo-explorer .map-container,
@@ -789,7 +786,7 @@ body {
 .map-frame-surface .maplibregl-ctrl-group {
   overflow: hidden;
   border: 1px solid rgba(171, 192, 186, 0.78);
-  border-radius: 0.65rem;
+  border-radius: var(--gi-radius-md);
   box-shadow: var(--atlas-shadow-md);
 }
 
@@ -802,8 +799,8 @@ body {
 .geo-map-toolbar,
 .map-toolbar {
   border: 1px solid rgba(172, 194, 188, 0.82);
-  border-radius: 0.78rem;
-  background: rgba(255, 255, 255, 0.94);
+  border-radius: var(--gi-radius-lg);
+  background: color-mix(in srgb, var(--gi-surface) 94%, transparent);
   box-shadow: var(--atlas-shadow-floating);
   backdrop-filter: blur(16px);
 }
@@ -811,7 +808,7 @@ body {
 .geo-explorer-footer {
   min-height: 3rem;
   border-top: 1px solid var(--atlas-line);
-  background: #fbfdfc;
+  background: var(--gi-brand-50);
   color: var(--ink-500);
   font-size: 0.7rem;
 }
@@ -829,7 +826,7 @@ body {
 .export-history-disclosure {
   border-color: var(--atlas-line);
   border-radius: var(--atlas-radius-md);
-  background: rgba(255, 255, 255, 0.9);
+  background: color-mix(in srgb, var(--gi-surface) 90%, transparent);
 }
 
 .technical-run-list > summary,
@@ -852,15 +849,15 @@ body {
 .workbench-shell textarea {
   min-height: 2.65rem;
   border-color: var(--atlas-line-strong);
-  border-radius: 0.62rem;
-  background: #fcfdfd;
+  border-radius: var(--gi-radius-md);
+  background: var(--gi-surface);
 }
 
 .workbench-shell input:focus,
 .workbench-shell select:focus,
 .workbench-shell textarea:focus {
   border-color: var(--atlas-600);
-  background: #ffffff;
+  background: var(--gi-surface);
   box-shadow: 0 0 0 4px rgba(21, 152, 137, 0.12);
 }
 
@@ -915,8 +912,8 @@ body {
 @media (max-width: 920px) {
   .workbench-sidebar {
     color: var(--ink-700);
-    background: rgba(255, 255, 255, 0.97);
-    box-shadow: 0 8px 24px rgba(8, 42, 38, 0.08);
+    background: color-mix(in srgb, var(--gi-surface) 97%, transparent);
+    box-shadow: var(--gi-shadow-md);
   }
 
   .workbench-sidebar .nav-item {
@@ -926,7 +923,7 @@ body {
 
   .workbench-sidebar .nav-item-active,
   .workbench-sidebar .nav-item-active:hover:not(:disabled) {
-    border-color: #acd2c9;
+    border-color: var(--gi-brand-50);
     color: var(--atlas-800);
     background: var(--atlas-50);
     box-shadow: none;
@@ -1024,14 +1021,14 @@ body {
   align-items: center;
   border-bottom: 1px solid var(--atlas-line);
   padding: 0.65rem 1rem;
-  background: #f4fbf9;
+  background: var(--gi-brand-50);
 }
 .municipality-search-copy { display: flex; min-width: 0; gap: 0.7rem; align-items: center; }
 .municipality-search-copy > div { display: grid; min-width: 0; gap: 0.12rem; }
 .municipality-search-copy strong { font-size: 0.78rem; }
-.municipality-search-copy strong small { margin-left: 0.35rem; color: var(--atlas-600); font-size: 0.56rem; font-weight: 750; text-transform: uppercase; }
+.municipality-search-copy strong small { margin-left: 0.35rem; color: var(--atlas-600); font-size: 0.56rem; font-weight: 600; text-transform: none; }
 .municipality-search-copy p { margin: 0; color: var(--atlas-muted); font-size: 0.62rem; overflow-wrap: anywhere; }
-.municipality-shortcut { display: inline-flex; flex: 0 0 auto; gap: 0.3rem; align-items: center; border-radius: 999px; padding: 0.35rem 0.52rem; background: #e0f3ee; color: var(--atlas-800); font-size: 0.57rem; font-weight: 750; text-transform: uppercase; }
+.municipality-shortcut { display: inline-flex; flex: 0 0 auto; gap: 0.3rem; align-items: center; border-radius: var(--gi-radius-pill); padding: 0.35rem 0.52rem; background: var(--gi-brand-50); color: var(--atlas-800); font-size: 0.57rem; font-weight: 600; text-transform: none; }
 .municipality-shortcut svg { width: 0.8rem; height: 0.8rem; }
 .municipality-search-control { position: relative; min-width: 0; }
 .municipality-search-control label { position: relative; display: block; min-width: 0; }
@@ -1039,19 +1036,19 @@ body {
 .municipality-search input { width: 100%; min-width: 0; padding-left: 2.15rem; }
 .municipality-search-clear { position: absolute; top: 50%; right: 0.35rem; display: grid; width: 1.8rem; height: 1.8rem; min-height: 0; place-items: center; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--atlas-muted); transform: translateY(-50%); }
 .municipality-search-clear svg { width: 0.9rem; height: 0.9rem; }
-.municipality-search-results { position: absolute; z-index: 70; top: calc(100% + 0.35rem); right: 0; left: 0; max-height: 18rem; overflow: auto; border: 1px solid var(--atlas-line-strong); border-radius: 0.75rem; padding: 0.35rem; background: #fff; box-shadow: var(--atlas-shadow-floating); }
+.municipality-search-results { position: absolute; z-index: 70; top: calc(100% + 0.35rem); right: 0; left: 0; max-height: 18rem; overflow: auto; border: 1px solid var(--atlas-line-strong); border-radius: var(--gi-radius-md); padding: 0.35rem; background: var(--gi-surface); box-shadow: var(--atlas-shadow-floating); }
 .municipality-search-results > p { margin: 0; padding: 0.75rem; color: var(--atlas-muted); font-size: 0.7rem; }
-.municipality-search-results > button { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; border: 0; border-radius: 0.55rem; padding: 0.65rem 0.7rem; background: transparent; text-align: left; }
+.municipality-search-results > button { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; border: 0; border-radius: var(--gi-radius-md); padding: 0.65rem 0.7rem; background: transparent; text-align: left; }
 .municipality-search-results > button:hover { background: var(--atlas-50); }
 .municipality-search-results > button span { display: grid; min-width: 0; gap: 0.12rem; }
 .municipality-search-results > button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .municipality-search-results > button small { color: var(--atlas-muted); font-size: 0.58rem; }
-.municipality-search-results > button em { flex: 0 0 auto; color: var(--atlas-700); font-size: 0.6rem; font-style: normal; font-weight: 750; }
+.municipality-search-results > button em { flex: 0 0 auto; color: var(--atlas-700); font-size: 0.6rem; font-style: normal; font-weight: 600; }
 .municipality-search-status { display: grid; min-width: 0; gap: 0.15rem; border-left: 1px solid var(--atlas-line); padding-left: 0.85rem; }
-.municipality-search-status span { color: var(--atlas-muted); font-size: 0.56rem; text-transform: uppercase; }
+.municipality-search-status span { color: var(--atlas-muted); font-size: 0.56rem; text-transform: none; }
 .municipality-search-status strong { overflow: hidden; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
 
-.geo-panel-heading h3 small { margin-left: 0.35rem; color: var(--atlas-600); font-size: 0.54rem; font-weight: 750; text-transform: uppercase; }
+.geo-panel-heading h3 small { margin-left: 0.35rem; color: var(--atlas-600); font-size: 0.54rem; font-weight: 600; text-transform: none; }
 .geo-theme-option { height: auto; min-height: 4.35rem; align-items: start; }
 .geo-theme-option > span:nth-child(2) { min-width: 0; align-self: start; }
 .geo-theme-option small { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }
@@ -1104,7 +1101,7 @@ body {
   border-radius: var(--atlas-radius-lg);
   background:
     radial-gradient(circle at 45% 0%, rgba(44, 163, 141, 0.09), transparent 12rem),
-    rgba(255, 255, 255, 0.76);
+    color-mix(in srgb, var(--gi-surface) 76%, transparent);
   box-shadow: var(--atlas-shadow-xs);
 }
 
@@ -1134,10 +1131,10 @@ body {
   height: 5.25rem;
   overflow: hidden;
   border: 1px solid rgba(13, 102, 91, 0.14);
-  border-radius: 1.1rem;
+  border-radius: var(--gi-radius-xl);
   background:
     radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--signal-accent) 18%, transparent), transparent 2.6rem),
-    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(235, 245, 242, 0.82));
+    linear-gradient(145deg, color-mix(in srgb, var(--gi-surface) 92%, transparent), rgba(235, 245, 242, 0.82));
   box-shadow: inset 0 1px 0 #fff, 0 12px 25px rgba(8, 42, 38, 0.08);
 }
 
@@ -1169,7 +1166,7 @@ body {
   height: 2.5rem;
   place-items: center;
   border: 1px solid color-mix(in srgb, var(--signal-accent) 28%, white);
-  border-radius: 0.8rem;
+  border-radius: var(--gi-radius-lg);
   color: #fff;
   background: linear-gradient(145deg, color-mix(in srgb, var(--signal-accent) 85%, white), var(--signal-accent));
   box-shadow: 0 8px 20px color-mix(in srgb, var(--signal-accent) 25%, transparent);
@@ -1294,7 +1291,7 @@ body {
   .workspace-signal {
     width: 4.7rem;
     height: 4.1rem;
-    border-radius: 0.85rem;
+    border-radius: var(--gi-radius-lg);
   }
 
   .workspace-signal-icon {
@@ -1372,7 +1369,7 @@ body {
 
 .project-atlas-copy > p strong {
   color: #fff;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .project-atlas-metrics {
@@ -1388,7 +1385,7 @@ body {
   gap: 0.35rem;
   padding: 0.55rem 0.7rem;
   border: 1px solid rgba(178, 230, 216, 0.16);
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   color: rgba(230, 247, 242, 0.7);
   background: rgba(255, 255, 255, 0.055);
   font-size: 0.7rem;
@@ -1413,8 +1410,8 @@ body {
   height: auto;
   overflow: visible;
   border: 1px solid rgba(157, 222, 205, 0.18);
-  border-radius: 1.75rem;
-  box-shadow: 0 30px 70px rgba(1, 19, 23, 0.36);
+  border-radius: var(--gi-radius-xl);
+  box-shadow: var(--gi-shadow-lg);
   transform: rotateX(2deg) rotateY(-3deg);
   transform-origin: center;
   transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 500ms ease;
@@ -1422,7 +1419,7 @@ body {
 
 .project-atlas:hover .project-atlas-visual svg,
 .project-atlas:focus-within .project-atlas-visual svg {
-  box-shadow: 0 35px 82px rgba(1, 19, 23, 0.46);
+  box-shadow: var(--gi-shadow-lg);
   transform: rotateX(0) rotateY(0) translateY(-0.2rem);
 }
 
@@ -1501,13 +1498,13 @@ body {
   gap: 0.4rem;
   padding: 0.45rem 0.6rem;
   border: 1px solid rgba(190, 236, 224, 0.16);
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   color: rgba(238, 252, 248, 0.78);
   background: rgba(5, 35, 37, 0.7);
   font-size: 0.62rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
   backdrop-filter: blur(12px);
 }
 
@@ -1515,7 +1512,7 @@ body {
   width: 0.42rem;
   height: 0.42rem;
   border-radius: 50%;
-  background: #62dfbd;
+  background: var(--gi-brand-50);
   box-shadow: 0 0 0 0 rgba(98, 223, 189, 0.55);
   animation: atlas-live-pulse 2.2s ease-out infinite;
 }
@@ -1538,7 +1535,7 @@ body {
   min-width: 0;
   padding: 0.68rem;
   border: 1px solid rgba(178, 230, 216, 0.14);
-  border-radius: 0.8rem;
+  border-radius: var(--gi-radius-lg);
   color: rgba(230, 247, 242, 0.7);
   background: rgba(255, 255, 255, 0.045);
   text-align: left;
@@ -1559,7 +1556,7 @@ body {
   width: 2rem;
   height: 2rem;
   place-items: center;
-  border-radius: 0.58rem;
+  border-radius: var(--gi-radius-md);
   background: rgba(255, 255, 255, 0.08);
 }
 
@@ -1581,15 +1578,15 @@ body {
 }
 
 .project-atlas-stage small {
-  color: rgba(213, 238, 232, 0.48);
+  color: rgba(213, 238, 232, 0.66);
   font-size: 0.6rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+  text-transform: none;
+  letter-spacing: 0;
 }
 
 .project-atlas-stage-ready > span {
-  color: #092f2b;
-  background: #79d7bd;
+  color: var(--gi-brand-600);
+  background: var(--gi-brand-50);
 }
 
 .project-atlas-stage-active {
@@ -1599,8 +1596,8 @@ body {
 }
 
 .project-atlas-stage-active > span {
-  color: #3a2b09;
-  background: #edc86c;
+  color: var(--gi-warn);
+  background: var(--gi-warn-soft);
   box-shadow: 0 0 0 0.25rem rgba(237, 200, 108, 0.1);
 }
 
diff --git a/frontend/src/styles/atlas-workbench.css b/frontend/src/styles/atlas-workbench.css
index ab24b4b8..7ab5fa49 100644
--- a/frontend/src/styles/atlas-workbench.css
+++ b/frontend/src/styles/atlas-workbench.css
@@ -65,10 +65,10 @@ textarea {
   right: 0.75rem;
   width: min(30rem, calc(100vw - 1.5rem));
   margin: 0;
-  border-color: #efc2bf;
+  border-color: var(--gi-danger-soft);
   border-radius: var(--atlas-radius);
   background: var(--atlas-danger-soft);
-  box-shadow: 0 8px 24px rgba(53, 31, 29, 0.12);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .workbench-layout {
@@ -130,7 +130,7 @@ textarea {
   color: var(--atlas-primary);
   font-family: "Manrope", "Segoe UI", sans-serif;
   font-size: 1.05rem;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .sidebar-brand-copy {
@@ -190,7 +190,7 @@ textarea {
 
 .workbench-sidebar .nav-item-active {
   border-left-color: var(--atlas-primary);
-  background: #eefaf7;
+  background: var(--gi-brand-50);
   box-shadow: none;
   color: var(--atlas-primary);
 }
@@ -222,7 +222,7 @@ textarea {
   min-height: var(--atlas-topbar-height);
   align-items: stretch;
   border-bottom: 1px solid var(--atlas-line);
-  background: #eefdf9;
+  background: var(--gi-brand-50);
 }
 
 .context-account {
@@ -277,8 +277,8 @@ textarea {
 }
 
 .context-bar span {
-  color: var(--atlas-muted) !important;
-  font-size: 0.58rem !important;
+  color: var(--atlas-muted);
+  font-size: 0.58rem;
   font-weight: 500;
   letter-spacing: 0;
   line-height: 1.1;
@@ -368,7 +368,7 @@ textarea {
   color: var(--atlas-ink);
   font-family: "Manrope", "Segoe UI", sans-serif;
   font-size: 1.08rem;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0;
 }
 
@@ -482,24 +482,24 @@ textarea {
 
 .section-kicker,
 .eyebrow {
-  color: var(--atlas-secondary) !important;
-  font-size: 0.62rem !important;
-  font-weight: 760;
+  color: var(--atlas-secondary);
+  font-size: 0.62rem;
+  font-weight: 600;
   letter-spacing: 0;
 }
 
 .status-badge,
 .count-pill {
   border-color: var(--atlas-line-strong);
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   background: var(--atlas-surface-muted);
   color: var(--atlas-ink-soft);
   box-shadow: none;
 }
 
 .status-badge-ready {
-  border-color: #bddacf;
-  background: #edf7f3;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
   color: var(--atlas-primary-strong);
 }
 
@@ -543,7 +543,7 @@ textarea {
   color: var(--atlas-ink);
   font-family: "Manrope", "Segoe UI", sans-serif;
   font-size: 1.08rem;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0;
 }
 
@@ -566,7 +566,7 @@ textarea {
 .geo-analysis-mode button {
   min-height: 1.65rem;
   border: 0;
-  border-radius: 3px;
+  border-radius: var(--gi-radius-xs);
   padding: 0.32rem 0.7rem;
   background: transparent;
   box-shadow: none;
@@ -577,7 +577,7 @@ textarea {
 .geo-analysis-mode button.active {
   background: var(--atlas-surface);
   color: var(--atlas-primary-strong);
-  box-shadow: 0 1px 2px rgba(21, 37, 34, 0.08);
+  box-shadow: var(--gi-shadow-xs);
 }
 
 .geo-explorer-advanced {
@@ -645,7 +645,7 @@ textarea {
 .geo-results-panel > .geo-panel-heading {
   padding: 0.85rem 1rem 0.75rem;
   border-bottom: 1px solid var(--atlas-line);
-  background: #fbfefd;
+  background: var(--gi-brand-50);
 }
 
 .geo-panel-heading {
@@ -677,10 +677,10 @@ textarea {
 .geo-loaded-scope {
   flex: 0 0 auto;
   margin: 0.7rem 0.85rem 0;
-  border: 1px solid #c7ded8;
+  border: 1px solid var(--gi-brand-50);
   border-radius: var(--atlas-radius);
   padding: 0.58rem;
-  background: #eefaf7;
+  background: var(--gi-brand-50);
 }
 
 .geo-loaded-scope span,
@@ -728,9 +728,9 @@ textarea {
 }
 
 .geo-theme-option-active {
-  border-color: #bddbd4;
+  border-color: var(--gi-brand-50);
   border-radius: var(--atlas-radius);
-  background: #f5fcfa;
+  background: var(--gi-brand-50);
   box-shadow: inset 4px 0 0 var(--atlas-primary);
 }
 
@@ -779,7 +779,7 @@ textarea {
   position: relative;
   display: block;
   overflow: hidden;
-  background: #dce8e6;
+  background: var(--gi-surface-sunken);
 }
 
 .geo-map-toolbar {
@@ -798,7 +798,7 @@ textarea {
   border-radius: var(--atlas-radius);
   padding: 0.22rem;
   background: var(--atlas-surface);
-  box-shadow: 0 2px 8px rgba(22, 38, 34, 0.1);
+  box-shadow: var(--gi-shadow-sm);
 }
 
 .geo-map-toolbar > .geo-panel-heading {
@@ -851,7 +851,7 @@ textarea {
   width: 100%;
   height: 100%;
   min-height: 0;
-  background: #dce8e6;
+  background: var(--gi-surface-sunken);
 }
 
 .geo-map-canvas .map-container {
@@ -862,8 +862,8 @@ textarea {
 .geo-map-legend {
   border: 1px solid rgba(21, 37, 34, 0.22);
   border-radius: var(--atlas-radius);
-  background: rgba(255, 255, 255, 0.96);
-  box-shadow: 0 2px 8px rgba(21, 37, 34, 0.1);
+  background: color-mix(in srgb, var(--gi-surface) 96%, transparent);
+  box-shadow: var(--gi-shadow-sm);
 }
 
 .geo-results-panel {
@@ -911,9 +911,9 @@ textarea {
 
 .geo-result-next-actions {
   margin: auto 0.85rem 0.85rem;
-  border-color: #bad7d1;
+  border-color: var(--gi-brand-50);
   border-radius: var(--atlas-radius);
-  background: #f0f8f6;
+  background: var(--gi-brand-50);
 }
 
 .geo-explorer-footer {
@@ -935,7 +935,7 @@ textarea {
 .source-catalog-panel > .panel-title-row {
   border-bottom: 1px solid var(--atlas-line);
   padding: 0.85rem 1rem;
-  background: #fbfefd;
+  background: var(--gi-brand-50);
 }
 
 .source-domain-grid {
@@ -1017,8 +1017,8 @@ textarea {
 }
 
 .workspace-grid-data .data-selection-summary {
-  border-color: #c7ded8;
-  background: #eefaf7;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
 }
 
 .workspace-grid-data .entity-card,
@@ -1044,7 +1044,7 @@ textarea {
   grid-column: 1 / -1;
   border-bottom: 1px solid var(--atlas-line);
   padding: 0.75rem 1rem;
-  background: #fbfefd;
+  background: var(--gi-brand-50);
 }
 
 .geo-assistant-panel > .panel-title-row h2 {
@@ -1069,7 +1069,7 @@ textarea {
   border-right: 1px solid var(--atlas-line);
   border-radius: 0;
   padding: 0.9rem;
-  background: #eefaf7;
+  background: var(--gi-brand-50);
 }
 
 .assistant-context-strip > div {
@@ -1083,8 +1083,8 @@ textarea {
 .assistant-context-strip label > span {
   color: var(--atlas-muted);
   font-size: 0.59rem;
-  font-weight: 700;
-  text-transform: uppercase;
+  font-weight: 600;
+  text-transform: none;
 }
 
 .assistant-context-strip > div strong {
@@ -1112,15 +1112,15 @@ textarea {
   align-items: center;
   border-top: 1px solid var(--atlas-line);
   padding: 0.5rem 0.75rem;
-  background: #fbfefd;
+  background: var(--gi-brand-50);
 }
 
 .assistant-suggestions button {
   min-height: 1.65rem;
-  border-color: #bddbd4;
+  border-color: var(--gi-brand-50);
   border-radius: var(--atlas-radius);
   padding: 0.3rem 0.55rem;
-  background: #f5fcfa;
+  background: var(--gi-brand-50);
   color: var(--atlas-ink-soft);
   font-size: 0.58rem;
   line-height: 1.15;
@@ -1150,7 +1150,7 @@ textarea {
 
 .assistant-message-assistant {
   border-left-color: var(--atlas-primary);
-  background: #f2f8f6;
+  background: var(--gi-brand-50);
 }
 
 .assistant-composer {
@@ -1161,7 +1161,7 @@ textarea {
   border-top: 1px solid var(--atlas-line);
   border-radius: 0;
   padding: 0.55rem 0.75rem;
-  background: #eefaf7;
+  background: var(--gi-brand-50);
 }
 
 .assistant-composer textarea {
@@ -1551,7 +1551,7 @@ textarea {
   width: min(22rem, 34vw);
   border-left: 1px solid var(--atlas-line);
   background: var(--atlas-surface);
-  box-shadow: -8px 0 20px rgba(21, 37, 34, 0.06);
+  box-shadow: var(--gi-shadow-md);
 }
 
 /* Ultrawide keeps text rails stable and gives the map the additional width. */
diff --git a/frontend/src/styles/geointel-system.css b/frontend/src/styles/geointel-system.css
index 73570b7d..ee2a0728 100644
--- a/frontend/src/styles/geointel-system.css
+++ b/frontend/src/styles/geointel-system.css
@@ -1,18 +1,23 @@
 /* ============================================================================
    GeoIntel designsysteem
    ----------------------------------------------------------------------------
-   Eén bron van waarheid voor tokens, layout en paneelchroom.
+   Eén bron van waarheid voor tokens,
+.workbench-shell layout en paneelchroom.
 
    Achtergrond: de vijf oudere stylesheets definieerden dezelfde selectors
    meerdere keren met tegenstrijdige waarden. Het scherpste voorbeeld was
-   .geo-explorer-layout, dat twaalf concurrerende grid-template-columns kreeg
-   uit vier bestanden. Omdat media queries geen specificiteit toevoegen, won
+   .geo-explorer-layout,
+.workbench-shell dat twaalf concurrerende grid-template-columns kreeg
+   uit vier bestanden. Omdat media queries geen specificiteit toevoegen,
+.workbench-shell won
    steeds de laatste onvoorwaardelijke regel en was al het responsieve werk
    dode code.
 
    Dit bestand wordt als laatste geladen en is leidend. Waar het een eigenschap
-   zet, is dat de geldende waarde. De breedtes gebruiken clamp() in plaats van
-   breakpoints, zodat één regel het hele desktopbereik dekt.
+   zet,
+.workbench-shell is dat de geldende waarde. De breedtes gebruiken clamp() in plaats van
+   breakpoints,
+.workbench-shell zodat één regel het hele desktopbereik dekt.
    ========================================================================== */
 
 /* ---------------------------------------------------------------- tokens -- */
@@ -29,12 +34,18 @@
   --gi-brand-100: #d8f0eb;
   --gi-brand-50: #eef8f6;
 
+  /* Labelkleur op de diepe merkstappen. In licht is dat wit; in de
+     donkere werkstand worden die stappen zelf licht en hoort er een
+     donker label op. Zonder dit token stond er op vier plaatsen een
+     harde color: #fff met !important. */
+  --gi-on-brand-strong: #ffffff;
+
   /* Neutraal. Licht koel-groen getint zodat wit naast de kaart niet schreeuwt. */
   --gi-ink-950: #101d1a;
   --gi-ink-800: #22322e;
   --gi-ink-600: #465954;
-  --gi-ink-400: #6b7e79;
-  --gi-ink-300: #8b9c97;
+  --gi-ink-400: #5b6e69;
+  --gi-ink-300: #748681;
 
   --gi-canvas: #f1f5f3;
   --gi-surface: #ffffff;
@@ -142,6 +153,24 @@
   --atlas-radius-md: var(--gi-radius-md);
   --atlas-radius-lg: var(--gi-radius-lg);
   --atlas-radius-xl: var(--gi-radius-lg);
+  --atlas-mint: var(--gi-brand-100);
+
+  /* Ontbrekende tokens. Deze werden op 87 plaatsen aangeroepen zonder ooit
+     gedefinieerd te zijn, waardoor elke color: var(--gi-text) ongeldig was en
+     terugviel op overerving. De namen blijven staan; hier krijgen ze hun
+     bedoelde waarde uit het bestaande palet. */
+  --gi-text: var(--gi-ink-950);
+  --gi-text-muted: var(--gi-ink-600);
+  --ink: var(--gi-ink-950);
+  --gi-ink-500: #576a65;
+  --gi-ink-700: #33443f;
+  --gi-ink-900: #18251f;
+  --gi-brand-400: #4fb3a3;
+  --gi-accent-500: var(--gi-brand-500);
+  --gi-surface-muted: var(--gi-surface-soft);
+  --gi-radius-xl: 18px;
+  --gi-font-display: "Manrope", "Segoe UI", sans-serif;
+  --success: var(--gi-ok);
 }
 
 /* ------------------------------------------------------------ typografie -- */
@@ -190,7 +219,7 @@
 .workbench-shell :where(.gi-eyebrow, .context-bar > div > span) {
   color: var(--gi-ink-400);
   font-size: var(--gi-text-3xs);
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0.09em;
   text-transform: uppercase;
 }
@@ -248,7 +277,7 @@
 
 .workbench-sidebar .nav-item :where(small, span:last-child) {
   font-size: var(--gi-text-3xs);
-  font-weight: 650;
+  font-weight: 600;
   letter-spacing: 0.04em;
   line-height: 1.15;
   text-transform: uppercase;
@@ -334,12 +363,12 @@
   overflow: auto;
 }
 
-.workbench-content > * {
+.workbench-shell .workbench-content > * {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   min-height: 0;
-  padding: var(--gi-space-3) var(--gi-space-4) var(--gi-space-4) !important;
+  padding: var(--gi-space-3) var(--gi-space-4) var(--gi-space-4);
 }
 
 .workspace-persistent-map {
@@ -455,7 +484,7 @@
   overflow: hidden;
   color: var(--gi-ink-950);
   font-size: var(--gi-text-sm);
-  font-weight: 650;
+  font-weight: 600;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -551,9 +580,9 @@
   height: 1.5rem;
   border-radius: var(--gi-radius-xs);
   background: var(--gi-brand-800);
-  color: #ffffff;
+  color: var(--gi-on-brand-strong);
   font-size: var(--gi-text-2xs);
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .geo-panel-heading h3 {
@@ -562,7 +591,7 @@
   align-items: baseline;
   color: var(--gi-ink-950);
   font-size: var(--gi-text-md);
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .geo-panel-heading h3 small {
@@ -573,9 +602,9 @@
   background: var(--gi-brand-50);
   color: var(--gi-brand-700);
   font-size: var(--gi-text-3xs);
-  font-weight: 700;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .geo-panel-heading p {
@@ -660,9 +689,9 @@
   color: var(--gi-ink-400);
   font-size: var(--gi-text-3xs);
   font-style: normal;
-  font-weight: 700;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
   white-space: nowrap;
 }
 
@@ -681,7 +710,7 @@
 .geo-empty-state h4 {
   color: var(--gi-ink-800);
   font-size: var(--gi-text-md);
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .geo-empty-state p {
@@ -781,8 +810,8 @@
   padding: 0;
 }
 
-.workbench-content > * {
-  padding: 0 !important;
+.workbench-shell .workbench-content > * {
+  padding: 0;
 }
 
 .workspace-persistent-map,
@@ -856,10 +885,10 @@
   align-content: center;
   justify-items: center;
   background: var(--gi-brand-800);
-  color: #ffffff;
+  color: var(--gi-on-brand-strong);
   content: 'INZICHTEN';
   font-size: var(--gi-text-3xs);
-  font-weight: 750;
+  font-weight: 600;
   letter-spacing: 0.14em;
   opacity: 0;
   pointer-events: none;
@@ -906,7 +935,7 @@
 
 .geo-theme-option > span:nth-child(2) > :where(strong, b) {
   font-size: var(--gi-text-xs);
-  font-weight: 650;
+  font-weight: 600;
 }
 
 /* -- 4. Rail: breed genoeg voor de labels, en sluitend --------------------- */
@@ -946,7 +975,7 @@
 .workbench-sidebar .sidebar-brand-copy strong {
   color: #ffffff;
   font-size: var(--gi-text-xs);
-  font-weight: 650;
+  font-weight: 600;
   letter-spacing: 0.01em;
 }
 
@@ -1039,15 +1068,15 @@
 .geo-primary-metrics :where(span, small):first-child {
   color: var(--gi-ink-400);
   font-size: var(--gi-text-3xs);
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .geo-primary-metrics :where(strong, b) {
   color: var(--gi-ink-950);
   font-size: var(--gi-text-lg);
-  font-weight: 650;
+  font-weight: 600;
   font-variant-numeric: tabular-nums;
   line-height: 1.15;
 }
@@ -1069,7 +1098,7 @@
 
 .geo-results-title-row h4 {
   font-size: var(--gi-text-md);
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .geo-theme-result-row {
@@ -1245,14 +1274,14 @@
     overflow: visible;
   }
 
-  .geo-results-panel {
+.workbench-shell .geo-results-panel {
     position: static;
     grid-column: 1 / -1;
     width: auto;
     height: auto;
     max-height: none;
     overflow: visible;
-    transform: none !important;
+    transform: none;
     border-top: 1px solid var(--gi-line);
     border-left: 0;
     box-shadow: none;
@@ -1328,14 +1357,14 @@
 .overview-command-card { position: relative; display: grid; gap: .35rem; min-width: 0; min-height: 8rem; padding: var(--gi-space-4); border: 1px solid var(--gi-line); border-radius: var(--gi-radius-md); color: var(--gi-ink-800); background: var(--gi-surface-soft); text-align: left; transition: transform .2s var(--gi-ease), border-color .2s var(--gi-ease), box-shadow .2s var(--gi-ease); }
 button.overview-command-card { cursor: pointer; }
 .overview-command-card:hover { transform: translateY(-2px); border-color: var(--gi-line-accent); box-shadow: var(--gi-shadow-md); }
-.overview-command-card > span { color: var(--gi-ink-400); font-size: var(--gi-text-3xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
+.overview-command-card > span { color: var(--gi-ink-400); font-size: var(--gi-text-3xs); font-weight: 600; letter-spacing: .08em; text-transform: none; }
 .overview-command-card > strong { overflow: hidden; color: var(--gi-ink-950); font: 700 1.2rem/1.2 Manrope,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
 .overview-command-card > p { margin: 0; color: var(--gi-ink-400); font-size: var(--gi-text-2xs); line-height: 1.55; }
 .overview-command-card-progress { color: #fff; background: linear-gradient(145deg,var(--gi-brand-800),#0a5148); }
 .overview-command-card-progress > :where(span,strong,p) { color: inherit; }
 .overview-command-card-progress > span, .overview-command-card-progress > p { color: rgba(239,255,250,.66); }
-.overview-command-card-progress > div { align-self: end; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.14); }
-.overview-command-card-progress > div > i { display: block; height: 100%; border-radius: inherit; background: #84e0c9; transition: width .5s var(--gi-ease-out); }
+.overview-command-card-progress > div { align-self: end; height: 4px; overflow: hidden; border-radius: var(--gi-radius-pill); background: rgba(255,255,255,.14); }
+.overview-command-card-progress > div > i { display: block; height: 100%; border-radius: inherit; background: var(--gi-brand-50); transition: width .5s var(--gi-ease-out); }
 
 .ai-pipeline::before {
   position: absolute;
@@ -1358,22 +1387,22 @@ button.overview-command-card { cursor: pointer; }
 .ai-pipeline-heading .eyebrow { color: #84dfca; }
 .ai-pipeline-heading h3 { margin: .25rem 0 0; color: #fff; font: 700 clamp(1.15rem, 2vw, 1.55rem)/1.15 Manrope, sans-serif; }
 .ai-pipeline-heading p:last-child { max-width: 68ch; margin: .45rem 0 0; color: rgba(231, 251, 245, .65); font-size: var(--gi-text-xs); line-height: 1.6; }
-.ai-pipeline-gpu { display: inline-flex; flex: 0 0 auto; gap: .45rem; align-items: center; padding: .48rem .65rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.06); font-size: var(--gi-text-2xs); font-weight: 700; }
-.ai-pipeline-gpu i { width: .48rem; height: .48rem; border-radius: 50%; background: #e3b867; }
-.ai-pipeline-gpu-ready i { background: #67e0bc; box-shadow: 0 0 0 5px rgba(103,224,188,.12); animation: ai-gpu-pulse 2.4s ease-out infinite; }
+.ai-pipeline-gpu { display: inline-flex; flex: 0 0 auto; gap: .45rem; align-items: center; padding: .48rem .65rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--gi-radius-pill); background: rgba(255,255,255,.06); font-size: var(--gi-text-2xs); font-weight: 600; }
+.ai-pipeline-gpu i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--gi-warn-soft); }
+.ai-pipeline-gpu-ready i { background: var(--gi-brand-50); box-shadow: 0 0 0 5px rgba(103,224,188,.12); animation: ai-gpu-pulse 2.4s ease-out infinite; }
 
 .ai-pipeline-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .55rem; margin-top: 1.35rem; }
 .ai-pipeline-flow { position: absolute; top: 1.55rem; right: 8%; left: 8%; height: 2px; overflow: hidden; background: rgba(154, 228, 211, .15); }
-.ai-pipeline-flow::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #76e1c7, transparent); content: ''; transform: translateX(-100%); animation: ai-flow 4.8s ease-in-out infinite; }
-.ai-pipeline-stage { position: relative; z-index: 1; display: grid; gap: .28rem; justify-items: center; min-width: 0; padding: .65rem .4rem; border: 1px solid rgba(190, 235, 224, .12); border-radius: .8rem; color: rgba(232, 249, 244, .58); background: rgba(4, 39, 36, .82); text-align: center; cursor: pointer; transition: transform .22s ease, border-color .22s ease, background .22s ease; }
+.ai-pipeline-flow::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--gi-brand-50), transparent); content: ''; transform: translateX(-100%); animation: ai-flow 4.8s ease-in-out infinite; }
+.ai-pipeline-stage { position: relative; z-index: 1; display: grid; gap: .28rem; justify-items: center; min-width: 0; padding: .65rem .4rem; border: 1px solid rgba(190, 235, 224, .12); border-radius: var(--gi-radius-lg); color: rgba(232, 249, 244, .58); background: rgba(4, 39, 36, .82); text-align: center; cursor: pointer; transition: transform .22s ease, border-color .22s ease, background .22s ease; }
 .ai-pipeline-stage:hover, .ai-pipeline-stage:focus-visible { transform: translateY(-3px); border-color: rgba(131, 226, 204, .52); }
-.ai-pipeline-stage[aria-selected='true'] { border-color: #79d9c3; color: #fff; background: rgba(25, 102, 89, .88); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
-.ai-pipeline-stage > span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: .65rem; background: rgba(255,255,255,.06); }
+.ai-pipeline-stage[aria-selected='true'] { border-color: var(--gi-brand-50); color: #fff; background: rgba(25, 102, 89, .88); box-shadow: var(--gi-shadow-md); }
+.ai-pipeline-stage > span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: var(--gi-radius-md); background: rgba(255,255,255,.06); }
 .ai-pipeline-stage-ready > span { color: #8ce6d1; }
 .ai-pipeline-stage svg { width: 1rem; height: 1rem; }
 .ai-pipeline-stage strong { overflow: hidden; max-width: 100%; font-size: var(--gi-text-2xs); text-overflow: ellipsis; white-space: nowrap; }
-.ai-pipeline-stage small { color: rgba(231, 250, 245, .45); font-size: var(--gi-text-3xs); text-transform: uppercase; }
-.ai-pipeline-detail { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .8rem; align-items: center; margin-top: .8rem; padding: .8rem; border-left: 2px solid #76dfc6; border-radius: 0 .7rem .7rem 0; background: rgba(255,255,255,.055); animation: ai-detail-in .36s ease both; }
+.ai-pipeline-stage small { color: rgba(231, 250, 245, .45); font-size: var(--gi-text-3xs); text-transform: none; }
+.ai-pipeline-detail { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .8rem; align-items: center; margin-top: .8rem; padding: .8rem; border-left: 2px solid var(--gi-brand-50); border-radius: 0 var(--gi-radius-md) var(--gi-radius-md) 0; background: rgba(255,255,255,.055); animation: ai-detail-in .36s ease both; }
 .ai-pipeline-detail > span { color: #7edfc9; font: 700 1.35rem/1 Manrope, sans-serif; }
 .ai-pipeline-detail strong { color: #fff; font-size: var(--gi-text-sm); }
 .ai-pipeline-detail p { margin: .2rem 0 0; color: rgba(233, 250, 246, .61); font-size: var(--gi-text-2xs); line-height: 1.55; }
@@ -1418,39 +1447,48 @@ button.overview-command-card { cursor: pointer; }
 
 /* De marketingillustratie wordt hier een echte productstatus. Alle stappen
    volgen API- en hookstate uit MapWorkspace; de laag onderschept geen kaartinput. */
+/* De statuskaart, de staprail en de resultaatchip zaten al in één component,
+   maar de opmaak zette ze op drie hoeken van de kaart: linksboven, onderaan en
+   rechtsboven. Ze zeggen alle drie hetzelfde soort ding — waar sta ik in de
+   analyse en kan ik het resultaat vertrouwen — dus horen ze op één regel.
+
+   De ouder is nu zelf het zwevende vlak; de drie kinderen zijn regio's daarin.
+   Dat haalt twee vlakken van de kaart en geeft de linkerbovenhoek terug, waar
+   de gebruiker juist wil kijken. */
 .live-analysis-journey {
   position: absolute;
   z-index: 4;
-  inset: 0;
+  bottom: var(--gi-space-4);
+  left: var(--gi-space-4);
+  display: flex;
+  gap: var(--gi-space-4);
+  align-items: center;
+  width: min(46rem, calc(100% - 17.5rem));
+  min-width: 21rem;
   overflow: hidden;
-  color: #f5fffc;
+  border: 1px solid var(--gi-line-strong);
+  border-radius: var(--gi-radius-md);
+  padding: 0.6rem 0.75rem;
+  background: color-mix(in srgb, var(--gi-surface) 92%, transparent);
+  color: var(--gi-ink-950);
+  box-shadow: var(--gi-shadow-md);
+  backdrop-filter: blur(10px);
   pointer-events: none;
 }
 
-.live-analysis-status-card,
-.live-analysis-proof,
-.live-analysis-steps {
-  border: 1px solid rgba(190, 244, 232, 0.24);
-  background: rgba(4, 45, 40, 0.86);
-  box-shadow: 0 14px 36px rgba(2, 28, 25, 0.24);
-  backdrop-filter: blur(12px);
-}
-
 .live-analysis-status-card {
-  position: absolute;
-  top: var(--gi-space-4);
-  left: var(--gi-space-4);
   display: grid;
-  gap: 2px;
-  width: min(14rem, calc(100% - 2rem));
-  border-radius: var(--gi-radius-md);
-  padding: 0.72rem 0.82rem;
+  flex: 0 1 13rem;
+  gap: 1px;
+  min-width: 0;
+  border-right: 1px solid var(--gi-line);
+  padding-right: var(--gi-space-4);
 }
 
 .live-analysis-kicker {
-  color: #8ee7d2;
+  color: var(--gi-brand-600);
   font-size: 0.55rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
@@ -1461,7 +1499,7 @@ button.overview-command-card { cursor: pointer; }
   height: 0.42rem;
   margin-right: 0.4rem;
   border-radius: 50%;
-  background: #77e2ca;
+  background: var(--gi-brand-50);
   box-shadow: 0 0 0 5px rgba(119, 226, 202, 0.12);
 }
 
@@ -1472,22 +1510,19 @@ button.overview-command-card { cursor: pointer; }
 
 .live-analysis-status-card small {
   overflow: hidden;
-  color: rgba(245, 255, 252, 0.68);
+  color: var(--gi-ink-600);
   font-size: 0.62rem;
   line-height: 1.35;
   text-overflow: ellipsis;
 }
 
 .live-analysis-steps {
-  position: absolute;
-  bottom: var(--gi-space-4);
-  left: var(--gi-space-4);
   display: grid;
-  grid-template-columns: repeat(4, minmax(3.6rem, 1fr));
-  width: min(25rem, calc(100% - 2rem));
+  flex: 1 1 auto;
+  grid-template-columns: repeat(4, minmax(3.2rem, 1fr));
+  min-width: 0;
   margin: 0;
-  border-radius: var(--gi-radius-md);
-  padding: 0.52rem 0.62rem;
+  padding: 0;
   list-style: none;
 }
 
@@ -1496,7 +1531,7 @@ button.overview-command-card { cursor: pointer; }
   display: grid;
   gap: 0.24rem;
   justify-items: center;
-  color: rgba(245, 255, 252, 0.45);
+  color: var(--gi-ink-600);
 }
 
 .live-analysis-step:not(:last-child)::after {
@@ -1514,7 +1549,7 @@ button.overview-command-card { cursor: pointer; }
   place-items: center;
   width: 1.45rem;
   height: 1.45rem;
-  border: 1px solid rgba(190, 244, 232, 0.24);
+  border: 1px solid var(--gi-line-accent);
   border-radius: 50%;
   background: #103f3a;
 }
@@ -1526,21 +1561,21 @@ button.overview-command-card { cursor: pointer; }
 
 .live-analysis-step small {
   font-size: 0.54rem;
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .live-analysis-step-active,
 .live-analysis-step-complete {
-  color: #a8f3e2;
+  color: var(--gi-brand-600);
 }
 
 .live-analysis-step-active > span {
-  border-color: #8ee7d2;
+  border-color: var(--gi-brand-50);
   box-shadow: 0 0 0 5px rgba(119, 226, 202, 0.12);
 }
 
 .live-analysis-step-complete > span {
-  border-color: #66d6bd;
+  border-color: var(--gi-brand-50);
   background: #176a5c;
 }
 
@@ -1555,30 +1590,28 @@ button.overview-command-card { cursor: pointer; }
 }
 
 .live-analysis-proof {
-  position: absolute;
-  top: var(--gi-space-4);
-  right: var(--gi-space-4);
   display: flex;
+  flex: 0 1 auto;
   gap: 0.46rem;
   align-items: center;
-  max-width: min(15rem, 42%);
-  border-radius: var(--gi-radius-md);
-  padding: 0.62rem 0.72rem;
-  color: rgba(245, 255, 252, 0.64);
+  max-width: 12rem;
+  border-left: 1px solid var(--gi-line);
+  padding-left: var(--gi-space-4);
+  color: var(--gi-ink-600);
   font-size: 0.59rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .live-analysis-proof svg {
   flex: 0 0 auto;
   width: 0.88rem;
   height: 0.88rem;
-  color: #8ee7d2;
+  color: var(--gi-brand-600);
 }
 
 .live-analysis-proof-ready {
   border-color: rgba(142, 231, 210, 0.62);
-  color: #f5fffc;
+  color: var(--gi-ink-950);
 }
 
 .live-analysis-journey-running::after {
@@ -1600,7 +1633,7 @@ button.overview-command-card { cursor: pointer; }
 @keyframes gi-live-analysis-scan {
   0%, 100% { opacity: 0; transform: translateX(0); }
   15%, 85% { opacity: 0.72; }
-  50% { opacity: 0.92; transform: translateX(34vw); }
+  50% { opacity: 0.92; transform: translateX(42rem); }
 }
 
 @keyframes gi-live-analysis-pulse {
@@ -1699,7 +1732,7 @@ button.overview-command-card { cursor: pointer; }
 .geo-theme-actions > span {
   color: var(--gi-ink-700);
   font-size: var(--gi-text-2xs);
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .geo-theme-actions button {
@@ -1739,7 +1772,7 @@ button.overview-command-card { cursor: pointer; }
   display: none;
 }
 
-.geo-results-toggle {
+.workbench-shell .geo-results-toggle {
   position: absolute;
   z-index: 7;
   top: 50%;
@@ -1752,18 +1785,18 @@ button.overview-command-card { cursor: pointer; }
   border-right: 0;
   border-radius: var(--gi-radius-md) 0 0 var(--gi-radius-md);
   padding: 0.55rem 0.7rem;
-  background: var(--gi-brand-800) !important;
-  color: #fff !important;
+  background: var(--gi-brand-800);
+  color: var(--gi-on-brand-strong);
   font-size: var(--gi-text-2xs);
-  font-weight: 750;
+  font-weight: 600;
   box-shadow: var(--gi-shadow-md);
   transform: translateY(-50%);
   transition: right var(--gi-dur-3) var(--gi-ease-out), background var(--gi-dur-2) var(--gi-ease);
 }
 
-.geo-results-toggle:hover,
-.geo-results-toggle:focus-visible {
-  background: var(--gi-brand-700) !important;
+.workbench-shell .geo-results-toggle:hover,
+.workbench-shell .geo-results-toggle:focus-visible {
+  background: var(--gi-brand-700);
 }
 
 .geo-results-toggle:active:not(:disabled) {
@@ -1779,8 +1812,7 @@ button.overview-command-card { cursor: pointer; }
   height: 0.9rem;
 }
 
-@media (max-width: 1240px) {
-  .geo-results-panel {
+@media (max-width: 1240px) {.workbench-shell .geo-results-panel {
     position: absolute;
     inset-block: 0;
     right: 0;
@@ -1791,11 +1823,11 @@ button.overview-command-card { cursor: pointer; }
     border-top: 0;
     border-left: 1px solid var(--gi-line);
     box-shadow: var(--gi-shadow-lg);
-    transform: translateX(100%) !important;
+    transform: translateX(100%);
   }
 
-  .geo-results-panel.geo-results-panel-open {
-    transform: translateX(0) !important;
+.workbench-shell .geo-results-panel.geo-results-panel-open {
+    transform: translateX(0);
   }
 
   .geo-results-toggle-open {
@@ -1837,9 +1869,9 @@ button.overview-command-card { cursor: pointer; }
 .model-selector-label {
   color: var(--gi-text-muted);
   font-size: var(--gi-text-2xs);
-  font-weight: 750;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .model-selector-trigger {
@@ -1877,7 +1909,7 @@ button.overview-command-card { cursor: pointer; }
   padding: 0;
   background: var(--gi-surface);
   color: var(--gi-text);
-  box-shadow: 0 1.5rem 4rem rgba(4, 45, 39, 0.24);
+  box-shadow: var(--gi-shadow-lg);
 }
 .model-selector-dialog::backdrop { background: rgba(3, 27, 24, 0.52); backdrop-filter: blur(3px); }
 .model-selector-dialog-header { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--gi-line); padding: 1.15rem 1.25rem 1rem; }
@@ -1886,7 +1918,7 @@ button.overview-command-card { cursor: pointer; }
 .model-selector-dialog .icon-action { flex: 0 0 auto; min-width: 2.75rem; min-height: 2.75rem; }
 .model-selector-options { display: grid; gap: 0.65rem; max-height: min(31rem, calc(100dvh - 15rem)); overflow-y: auto; padding: 1rem 1.25rem; }
 .model-selector-advanced { border-top: 1px solid var(--gi-line); padding-top: 0.65rem; }
-.model-selector-advanced > summary { display: flex; justify-content: space-between; min-height: 2.75rem; align-items: center; color: var(--gi-brand-800); font-weight: 750; cursor: pointer; }
+.model-selector-advanced > summary { display: flex; justify-content: space-between; min-height: 2.75rem; align-items: center; color: var(--gi-brand-800); font-weight: 600; cursor: pointer; }
 .model-selector-advanced > summary small { color: var(--gi-text-muted); font-weight: 600; }
 .model-selector-advanced-grid { display: grid; gap: 0.55rem; padding-top: 0.45rem; }
 
@@ -1914,11 +1946,11 @@ button.overview-command-card { cursor: pointer; }
 .model-option-copy > small { color: var(--gi-text); font-size: var(--gi-text-xs); }
 .model-option-heading { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: space-between; }
 .model-option-heading strong { font-size: var(--gi-text-md); }
-.model-option-heading em { border-radius: 999px; padding: 0.15rem 0.42rem; background: var(--gi-brand-100); color: var(--gi-brand-800); font-size: 0.62rem; font-style: normal; font-weight: 750; }
+.model-option-heading em { border-radius: var(--gi-radius-pill); padding: 0.15rem 0.42rem; background: var(--gi-brand-100); color: var(--gi-brand-800); font-size: 0.62rem; font-style: normal; font-weight: 600; }
 .model-option-facts { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin-top: 0.15rem; color: var(--gi-text-muted); }
 .model-option-facts small { font-size: 0.68rem; }
 .model-option-technical { margin-top: 0.2rem; }
-.model-option-technical summary { width: fit-content; color: var(--gi-brand-700); font-size: 0.68rem; font-weight: 700; cursor: pointer; }
+.model-option-technical summary { width: fit-content; color: var(--gi-brand-700); font-size: 0.68rem; font-weight: 600; cursor: pointer; }
 .model-option-technical small { display: block; margin-top: 0.2rem; color: var(--gi-text-muted); font-size: 0.65rem; }
 .model-option-check { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; align-self: center; border: 1px solid var(--gi-line-strong); border-radius: 50%; color: var(--gi-brand-700); }
 .model-option-selected .model-option-check { border-color: var(--gi-brand-600); background: var(--gi-brand-100); }
@@ -1929,7 +1961,7 @@ button.overview-command-card { cursor: pointer; }
 .model-selector-loading { display: flex; gap: 0.5rem; align-items: center; padding: 1rem 1.25rem; color: var(--gi-text-muted); }
 .model-selector-loading svg { width: 1rem; animation: gi-spin 1s linear infinite; }
 
-.assistant-context-strip { grid-template-columns: minmax(11rem, 0.8fr) minmax(18rem, 1.3fr) !important; }
+.workbench-shell .assistant-context-strip { grid-template-columns: minmax(11rem, 0.8fr) minmax(18rem, 1.3fr); }
 .assistant-context-strip .model-selector { min-width: 0; }
 
 @media (max-width: 700px) {
@@ -1985,7 +2017,7 @@ button.overview-command-card { cursor: pointer; }
   transform: translateY(-50%);
 }
 
-.context-bar span { font-size: 0.58rem !important; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
+.workbench-shell .context-bar span { font-size: 0.58rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
 .context-bar strong { max-width: 18rem; overflow: hidden; margin: 0; font-size: var(--gi-text-xs); text-overflow: ellipsis; white-space: nowrap; }
 .context-health { min-width: auto; border: 0; padding-inline: 0.45rem; background: transparent; box-shadow: none; }
 .context-account { border-color: var(--gi-line); box-shadow: none; }
@@ -1999,13 +2031,13 @@ button.overview-command-card { cursor: pointer; }
   justify-content: center;
   min-height: 2.35rem;
   border: 1px solid var(--gi-line);
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.45rem 0.75rem;
   background: var(--gi-surface);
   color: var(--gi-ink-700);
   font: inherit;
   font-size: var(--gi-text-2xs);
-  font-weight: 750;
+  font-weight: 600;
   cursor: pointer;
   transition: border-color var(--gi-dur-2) var(--gi-ease), background var(--gi-dur-2) var(--gi-ease), color var(--gi-dur-2) var(--gi-ease);
 }
@@ -2025,7 +2057,7 @@ button.overview-command-card { cursor: pointer; }
 .secondary-display-launch-active {
   border-color: var(--gi-brand-600);
   background: var(--gi-brand-800);
-  color: #fff;
+  color: var(--gi-on-brand-strong);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--gi-brand-500) 14%, transparent);
 }
 
@@ -2040,10 +2072,10 @@ button.overview-command-card { cursor: pointer; }
   display: flex;
   gap: 0.55rem;
   align-items: center;
-  border-bottom: 1px solid #f2c8c2;
+  border-bottom: 1px solid var(--gi-danger-soft);
   padding: 0.55rem 0.9rem;
-  background: #fff4f2;
-  color: #8b2f25;
+  background: var(--gi-danger-soft);
+  color: var(--gi-danger);
   font-size: var(--gi-text-xs);
 }
 
@@ -2080,7 +2112,7 @@ button.overview-command-card { cursor: pointer; }
   border-bottom: 1px solid var(--gi-line);
   padding: 0.65rem 0.85rem;
   background: color-mix(in srgb, var(--gi-surface) 96%, transparent);
-  box-shadow: 0 8px 24px rgba(5, 46, 43, 0.06);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .secondary-display-brand {
@@ -2103,7 +2135,7 @@ button.overview-command-card { cursor: pointer; }
 .secondary-display-brand small {
   color: var(--gi-brand-600);
   font-size: 0.58rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.09em;
 }
 
@@ -2119,12 +2151,12 @@ button.overview-command-card { cursor: pointer; }
   display: inline-flex;
   gap: 0.4rem;
   align-items: center;
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.45rem 0.65rem;
   background: var(--gi-brand-50);
   color: var(--gi-brand-800);
   font-size: 0.68rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .secondary-display-status i {
@@ -2144,7 +2176,7 @@ button.overview-command-card { cursor: pointer; }
   color: var(--gi-ink-700);
   font: inherit;
   font-size: 0.68rem;
-  font-weight: 700;
+  font-weight: 600;
   cursor: pointer;
 }
 
@@ -2164,24 +2196,24 @@ button.overview-command-card { cursor: pointer; }
 
 .secondary-display-content > .geo-results-panel,
 .secondary-display-content > .geo-results-panel.geo-results-panel-open {
-  position: static !important;
-  inset: auto !important;
+  position: static;
+  inset: auto;
   display: flex;
-  width: 100% !important;
-  max-width: none !important;
-  height: auto !important;
-  max-height: none !important;
+  width: 100%;
+  max-width: none;
+  height: auto;
+  max-height: none;
   min-height: calc(100dvh - 6.2rem);
-  overflow: visible !important;
-  border: 1px solid var(--gi-line) !important;
-  border-radius: var(--gi-radius-lg) !important;
-  background: var(--gi-surface) !important;
-  box-shadow: var(--gi-shadow-sm) !important;
-  visibility: visible !important;
-  opacity: 1 !important;
-  pointer-events: auto !important;
-  transform: none !important;
-  animation: none !important;
+  overflow: visible;
+  border: 1px solid var(--gi-line);
+  border-radius: var(--gi-radius-lg);
+  background: var(--gi-surface);
+  box-shadow: var(--gi-shadow-sm);
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+  animation: none;
 }
 
 .secondary-display-content .geo-results-panel > .geo-panel-heading {
@@ -2282,7 +2314,9 @@ button.overview-command-card { cursor: pointer; }
   .guest-mode-banner { min-height: 3.25rem; padding: 0.45rem 0.7rem; }
   .guest-mode-banner span:not(.guest-mode-badge) { display: none; }
   .guest-mode-badge { font-size: 0.58rem; }
-  .workbench-content, .workbench-content > * { padding: 0 !important; }
+
+.workbench-shell .workbench-content,
+.workbench-shell .workbench-content > * { padding: 0; }
   .geo-explorer { gap: 0; }
   .geo-explorer-header { padding: 0.55rem 0.7rem; }
   .geo-explorer-header p { max-width: 100%; line-height: 1.35; }
@@ -2294,7 +2328,8 @@ button.overview-command-card { cursor: pointer; }
   .geo-panel-heading p { display: none; }
   .geo-loaded-scope { display: none; }
   .geo-theme-search { margin: 0 0.7rem 0.45rem; min-height: 2.6rem; }
-  .geo-theme-list { max-height: 4.6rem; padding-inline: 0.7rem !important; }
+
+.workbench-shell .geo-theme-list { max-height: 4.6rem; padding-inline: 0.7rem; }
   .geo-theme-option { min-height: 3.75rem; }
   .geo-theme-actions { grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem; align-items: center; padding: 0.45rem 0.7rem; }
   .geo-theme-actions > span { display: none; }
@@ -2337,7 +2372,7 @@ button.overview-command-card { cursor: pointer; }
     position: fixed; z-index: 120; top: auto; right: 0; bottom: 0; left: 0; width: 100%;
     min-height: 4.15rem; max-height: 4.15rem; border-top: 1px solid rgba(153, 218, 202, 0.22);
     padding: 0.3rem 0.45rem max(0.3rem, env(safe-area-inset-bottom));
-    box-shadow: 0 -8px 24px rgba(3, 40, 35, 0.18);
+    box-shadow: var(--gi-shadow-md);
   }
   .workbench-sidebar .brand-block, .workbench-sidebar .itworx-signature { display: none; }
   .workbench-sidebar nav {
@@ -2390,38 +2425,38 @@ button.overview-command-card { cursor: pointer; }
 
 /* Full-workbench visual integrity: preserve the dark illustration surfaces
    and reclaim operator-only columns in the read-only guest source view. */
-.detection-lab-shell > .ai-pipeline {
+.workbench-shell .detection-lab-shell > .ai-pipeline {
   grid-column: 1 / -1;
   background:
     linear-gradient(115deg, rgba(255, 255, 255, 0.035), transparent 38%),
     radial-gradient(circle at 82% 10%, rgba(69, 209, 177, 0.15), transparent 20rem),
-    #082f2b !important;
+    #082f2b;
 }
 
-.detection-lab-shell .ai-pipeline-stage {
-  color: rgba(232, 249, 244, 0.68) !important;
-  background: rgba(4, 39, 36, 0.82) !important;
+.workbench-shell .detection-lab-shell .ai-pipeline-stage {
+  color: rgba(232, 249, 244, 0.68);
+  background: rgba(4, 39, 36, 0.82);
 }
 
-.detection-lab-shell .ai-pipeline-stage[aria-selected='true'] {
-  color: #fff !important;
-  background: rgba(25, 102, 89, 0.92) !important;
+.workbench-shell .detection-lab-shell .ai-pipeline-stage[aria-selected='true'] {
+  color: #fff;
+  background: rgba(25, 102, 89, 0.92);
 }
 
-.project-atlas {
+.workbench-shell .project-atlas {
   background:
     radial-gradient(circle at 18% 0%, rgba(64, 190, 164, 0.18), transparent 25rem),
-    linear-gradient(135deg, #092f2b 0%, #0b3f39 48%, #082c34 100%) !important;
+    linear-gradient(135deg, #092f2b 0%, #0b3f39 48%, #082c34 100%);
 }
 
-.project-atlas-stage {
-  color: rgba(230, 247, 242, 0.76) !important;
-  background: rgba(255, 255, 255, 0.045) !important;
+.workbench-shell .project-atlas-stage {
+  color: rgba(230, 247, 242, 0.76);
+  background: rgba(255, 255, 255, 0.045);
 }
 
-.project-atlas-stage-active {
-  color: #fff !important;
-  background: rgba(237, 200, 108, 0.1) !important;
+.workbench-shell .project-atlas-stage-active {
+  color: #fff;
+  background: rgba(237, 200, 108, 0.1);
 }
 
 @media (min-width: 921px) {
@@ -2441,3 +2476,820 @@ button.overview-command-card { cursor: pointer; }
     align-self: start;
   }
 }
+
+/* ============================================================================
+   Operationeel donker
+   ----------------------------------------------------------------------------
+   De werkbank staat tegen luchtbeelden en satellietdata aan; een lichte schil
+   daarnaast laat de kaart altijd verliezen. Vanaf hier is donker de werkstand
+   van de werkbank. De landingspagina blijft licht en raakt dit blok niet, want
+   die scopet op body.landing-body.
+
+   Werking: dit blok herdefinieert de basistokens en daarna nogmaals de
+   aliassen. Dat tweede deel is nodig, geen dubbelop. Een custom property met
+   een var()-waarde wordt opgelost op het element waar zij gedeclareerd staat;
+   --atlas-canvas: var(--gi-canvas) uit :root houdt dus de lichte waarde vast,
+   ook als --gi-canvas hier donker wordt. Door de aliassen hier opnieuw te
+   declareren lossen ze wel tegen het donkere palet op.
+   ========================================================================== */
+
+body.workbench-body:not([data-theme='light']),
+body.secondary-display-body:not([data-theme='light']),
+body:not([data-theme='light']) .workbench-shell {
+  /* Merk. De middenstappen blijven vullingen met witte tekst; de hoge stappen
+     worden licht omdat ze op zachte tinten als tekst staan. */
+  --gi-brand-950: #071b17;
+  --gi-brand-900: #0b2620;
+  --gi-brand-800: #6bdcc6;
+  --gi-brand-700: #158774;
+  --gi-brand-600: #38c0a5;
+  --gi-brand-500: #45cfb4;
+  --gi-brand-400: #5ad8bf;
+  --gi-brand-300: #2b8c7a;
+  --gi-brand-100: #143830;
+  --gi-brand-50: #0e2621;
+  --gi-on-brand-strong: var(--gi-brand-950);
+
+  /* Inkt omgekeerd: 950 is nu de helderste tekst op een donkere grond. */
+  --gi-ink-950: #e9f0ec;
+  --gi-ink-900: #dce6e1;
+  --gi-ink-800: #ccd9d3;
+  --gi-ink-700: #b4c4bd;
+  --gi-ink-600: #a6b8b1;
+  --gi-ink-500: #99aca5;
+  --gi-ink-400: #90a49d;
+  --gi-ink-300: #68796f;
+
+  --gi-canvas: #0a100e;
+  --gi-surface: #111a17;
+  --gi-surface-soft: #15201c;
+  --gi-surface-sunken: #0c1411;
+
+  --gi-line: #21302a;
+  --gi-line-strong: #31423b;
+  --gi-line-accent: #1e4a42;
+
+  /* Status. Op een donkere grond moet de kleur zelf licht zijn en de zachte
+     achtergrond juist donker. */
+  --gi-ok: #4cc48d;
+  --gi-ok-soft: #0f2a20;
+  --gi-info: #6fb0dd;
+  --gi-info-soft: #11242e;
+  --gi-warn: #dda45e;
+  --gi-warn-soft: #2a2114;
+  --gi-danger: #ec7d76;
+  --gi-danger-soft: #2c1918;
+
+  /* Hoogte. Een groengetinte schaduw is op donker onzichtbaar; hier telt
+     alleen zwart, en dieper dan in licht. */
+  --gi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --gi-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
+  --gi-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.5);
+  --gi-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.62);
+
+  --gi-focus-ring: 0 0 0 2px var(--gi-surface), 0 0 0 4px var(--gi-brand-500);
+
+  /* Aliassen opnieuw, zodat ze tegen het bovenstaande oplossen. */
+  --gi-text: var(--gi-ink-950);
+  --gi-text-muted: var(--gi-ink-600);
+  --ink: var(--gi-ink-950);
+  --success: var(--gi-ok);
+  --gi-accent-500: var(--gi-brand-500);
+  --gi-surface-muted: var(--gi-surface-soft);
+  --gi-font-display: "Manrope", "Segoe UI", sans-serif;
+
+  --atlas-canvas: var(--gi-canvas);
+  --atlas-surface: var(--gi-surface);
+  --atlas-surface-soft: var(--gi-surface-soft);
+  --atlas-surface-muted: var(--gi-surface-soft);
+  --atlas-ink: var(--gi-ink-950);
+  --atlas-ink-soft: var(--gi-ink-800);
+  --atlas-muted: var(--gi-ink-400);
+  --atlas-line: var(--gi-line);
+  --atlas-line-strong: var(--gi-line-strong);
+  --atlas-primary: var(--gi-brand-700);
+  --atlas-primary-strong: var(--gi-brand-600);
+  --atlas-primary-soft: var(--gi-brand-50);
+  --atlas-mint: var(--gi-brand-100);
+  --atlas-attention: var(--gi-warn);
+  --atlas-attention-soft: var(--gi-warn-soft);
+  --atlas-danger: var(--gi-danger);
+  --atlas-danger-soft: var(--gi-danger-soft);
+  --atlas-secondary: var(--gi-info);
+  --atlas-secondary-soft: var(--gi-info-soft);
+  --atlas-950: var(--gi-brand-950);
+  --atlas-900: var(--gi-brand-900);
+  --atlas-800: var(--gi-brand-800);
+  --atlas-700: var(--gi-brand-700);
+  --atlas-600: var(--gi-brand-600);
+  --atlas-500: var(--gi-brand-500);
+  --atlas-100: var(--gi-brand-100);
+  --atlas-50: var(--gi-brand-50);
+  --atlas-shadow-xs: var(--gi-shadow-xs);
+  --atlas-shadow-sm: var(--gi-shadow-sm);
+  --atlas-shadow-md: var(--gi-shadow-md);
+  --atlas-shadow-floating: var(--gi-shadow-lg);
+  --ink-950: var(--gi-ink-950);
+  --ink-700: var(--gi-ink-700);
+  --ink-500: var(--gi-ink-500);
+  --canvas: var(--gi-canvas);
+  --paper: var(--gi-surface);
+  --paper-muted: var(--gi-surface-soft);
+
+  /* De eigen tokens van app.css en premium.css lopen hier mee, zodat er
+     één palet overblijft in plaats van drie parallelle. */
+  --bg: var(--gi-canvas);
+  --panel: var(--gi-surface);
+  --panel-soft: var(--gi-surface-soft);
+  --surface-raised: var(--gi-surface);
+  --surface-sunken: var(--gi-surface-sunken);
+  --text: var(--gi-ink-950);
+  --muted: var(--gi-ink-600);
+  --line: var(--gi-line);
+  --line-strong: var(--gi-line-strong);
+  --accent: var(--gi-brand-600);
+  --accent-strong: var(--gi-brand-500);
+  --accent-soft: var(--gi-brand-50);
+  --focus-ring: var(--gi-brand-500);
+  --focus-ring-soft: rgba(69, 207, 180, 0.24);
+  --warning: var(--gi-warn);
+  --danger: var(--gi-danger);
+  --info: var(--gi-info);
+  --shadow: var(--gi-shadow-md);
+  --shadow-soft: var(--gi-shadow-sm);
+}
+
+body.workbench-body,
+body.secondary-display-body {
+  background: var(--gi-canvas);
+  color: var(--gi-ink-950);
+}
+
+.workbench-shell {
+  background: var(--gi-canvas);
+}
+
+/* De lichte werkstand valt terug op het palet in :root; er is dus geen tweede
+   tokenblok nodig. Alleen de kaartchroom van MapLibre moet expliciet terug,
+   omdat de donkere regels hieronder ongeconditioneerd zouden blijven gelden. */
+body[data-theme='light'] body:not([data-theme='light']) .workbench-shell .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
+  filter: none;
+}
+
+body[data-theme='light'] body:not([data-theme='light']) .workbench-shell .maplibregl-ctrl-attrib {
+  background: rgba(255, 255, 255, 0.82);
+  color: var(--gi-ink-600);
+}
+
+body[data-theme='light'] .workbench-shell :where(input, select, textarea) {
+  color-scheme: light;
+}
+
+/* Vier plekken zetten een witte tekstkleur hard bovenop --gi-brand-800. Die
+   stap is hier juist licht geworden, dus daar hoort nu een donker label. */
+/* Kaartchroom van MapLibre gaat mee in het donker; anders drijven er witte
+   knoppen op een donkere kaart. */
+body:not([data-theme='light']) .workbench-shell .maplibregl-ctrl-group {
+  border: 1px solid var(--gi-line-strong);
+  background: var(--gi-surface);
+  box-shadow: var(--gi-shadow-sm);
+}
+
+body:not([data-theme='light']) .workbench-shell .maplibregl-ctrl-group button + button {
+  border-top: 1px solid var(--gi-line);
+}
+
+body:not([data-theme='light']) .workbench-shell .maplibregl-ctrl-group button {
+  background: transparent;
+}
+
+body:not([data-theme='light']) .workbench-shell .maplibregl-ctrl-group button:hover {
+  background: var(--gi-surface-soft);
+}
+
+.workbench-shell .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
+  filter: invert(1) hue-rotate(180deg) brightness(1.1);
+}
+
+.workbench-shell .maplibregl-ctrl-attrib {
+  background: rgba(10, 16, 14, 0.78);
+  color: var(--gi-ink-400);
+}
+
+body:not([data-theme='light']) .workbench-shell .maplibregl-ctrl-attrib a {
+  color: var(--gi-ink-300);
+}
+
+body:not([data-theme='light']) .workbench-shell .maplibregl-popup-content {
+  border: 1px solid var(--gi-line-strong);
+  background: var(--gi-surface);
+  color: var(--gi-ink-950);
+  box-shadow: var(--gi-shadow-md);
+}
+
+/* Formuliervelden erven de donkere grond niet vanzelf in elke browser. */
+body:not([data-theme='light']) .workbench-shell :where(input, select, textarea) {
+  background: var(--gi-surface-sunken);
+  color: var(--gi-ink-950);
+  color-scheme: dark;
+}
+
+.workbench-shell :where(input, textarea)::placeholder {
+  color: var(--gi-ink-400);
+}
+
+/* ============================================================================
+   Eén kopbalk
+   ----------------------------------------------------------------------------
+   De kopbalk had drie kolommen en vijf kinderen, waardoor account en uitloggen
+   op een tweede rij over de volle breedte terechtkwamen. Samen met de
+   paginakop kostte dat ruim 200px voordat het werk begon; op het kaartscherm
+   kreeg de kaart wat overbleef.
+
+   Vier kolommen, één rij: context links en meelopend, status en bediening
+   rechts en zo smal als hun inhoud.
+   ========================================================================== */
+
+.workbench-topbar {
+  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
+  grid-auto-flow: column;
+  grid-auto-columns: auto;
+  row-gap: 0;
+}
+
+/* De contextvelden zijn labels, geen invoervelden. Zonder eigen kader en
+   achtergrond lezen ze als één regel in plaats van vier dozen. */
+.workbench-topbar .context-bar {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0;
+  overflow: hidden;
+}
+
+.workbench-topbar .context-bar > div {
+  display: flex;
+  gap: var(--gi-space-2);
+  align-items: baseline;
+  min-width: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 0 var(--gi-space-4) 0 0;
+  background: transparent;
+}
+
+.workbench-topbar .context-bar > div + div {
+  border-left: 1px solid var(--gi-line);
+  padding-left: var(--gi-space-4);
+}
+
+.workbench-topbar .context-account {
+  gap: var(--gi-space-2);
+  align-self: center;
+  min-height: 2.25rem;
+  border: 1px solid var(--gi-line);
+  border-radius: var(--gi-radius-pill);
+  padding: 0.2rem 0.3rem 0.2rem var(--gi-space-3);
+  background: var(--gi-surface-soft);
+}
+
+@media (max-width: 1180px) {
+  /* Onder deze breedte past de volledige context niet meer naast de bediening.
+     Werkruimte en gebied blijven; bron en kaartlaag staan al in het paneel. */
+  .workbench-topbar .context-bar > div:nth-child(n + 3) {
+    display: none;
+  }
+}
+
+/* ============================================================================
+   AI-vragen: raster zonder botsingen
+   ----------------------------------------------------------------------------
+   Het paneel plaatste vier van zijn zes kinderen expliciet in het raster en
+   liet de andere twee — de lege/foutmelding en de foutregel boven de composer —
+   automatisch plaatsen. Die belandden in cellen die de contextkolom al bezette,
+   waardoor de modelkiezer over de alinea viel en het foutblok linksonder
+   buiten het raster stond.
+
+   Nu heeft elk kind een eigen rij, en vangt een regel af dat een toekomstig
+   kind opnieuw in de contextkolom terechtkomt.
+   ========================================================================== */
+
+.workbench-shell .geo-assistant-panel {
+  /* De hoogte werd berekend uit de kopbalkhoogte plus een vaste marge. Die
+     som klopte niet meer zodra de kopbalk veranderde; de ouder regelt de
+     hoogte al. */
+  height: auto;
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
+}
+
+/* Alles behalve de kop en de contextkolom hoort in kolom 2. */
+.workbench-shell .geo-assistant-panel > *:not(.panel-title-row):not(.assistant-context-strip) {
+  grid-column: 2;
+}
+
+.workbench-shell .geo-assistant-panel > .panel-title-row {
+  grid-row: 1;
+}
+
+.workbench-shell .assistant-context-strip {
+  grid-row: 2 / -1;
+}
+
+.workbench-shell .geo-assistant-panel > .result-state {
+  grid-row: 2;
+}
+
+.workbench-shell .assistant-conversation {
+  grid-row: 3;
+}
+
+.workbench-shell .assistant-suggestions {
+  grid-row: 4;
+}
+
+.workbench-shell .geo-assistant-panel > .error {
+  grid-row: 5;
+  margin: 0;
+  padding: var(--gi-space-2) var(--gi-space-3);
+}
+
+.workbench-shell .assistant-composer {
+  grid-row: 6;
+}
+
+/* ============================================================================
+   Afgesneden en ingeklapte bediening
+   ========================================================================== */
+
+/* Deze knop toonde een leeg vakje rechtsboven de kaart. Het icoon rekende naar
+   width: 0: de knop erft de horizontale padding van .secondary-action, terwijl
+   haar breedte op 2rem staat, waardoor er geen inhoudsbreedte overbleef en de
+   svg als flexitem tot nul kromp. Eigen maatvoering, en het icoon krimpt niet
+   meer mee. */
+.workbench-shell .geo-explorer-advanced {
+  width: 2.25rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  flex: none;
+  padding: 0;
+}
+
+.workbench-shell .geo-explorer-advanced svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+
+/* De werkruimte-illustratie stond als lichte plaat op de donkere kop. */
+.workbench-shell .workspace-signal {
+  border-color: var(--gi-line);
+  background:
+    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--signal-accent) 30%, transparent), transparent 2.6rem),
+    var(--gi-surface-soft);
+  box-shadow: var(--gi-shadow-sm);
+}
+
+/* ============================================================================
+   Contrastcorrecties voor de donkere werkstand
+   ----------------------------------------------------------------------------
+   Elk van deze regels zette in de lichte werkstand een donkere merkkleur als
+   tekst. Die stappen zijn hier achtergrondkleuren geworden, waardoor de tekst
+   op zijn eigen ondergrond viel. Gemeten met een contrastaudit over de zes
+   werkbladen; alles hieronder haalt nu ten minste 4.5:1, koppen 3:1.
+   ========================================================================== */
+
+.workbench-shell .status-strip-header h2,
+.workbench-shell .status-readiness-copy strong {
+  color: var(--gi-ink-950);
+}
+
+/* Wit op een lichte muntgradiënt gaf 1.1:1. De vulling gaat terug naar de
+   diepe merkstappen, zodat het witte label blijft kloppen. */
+.workbench-shell .overview-command-card-progress {
+  background: linear-gradient(145deg, var(--gi-brand-700), var(--gi-brand-900));
+}
+
+/* Het uitgeklapte tabblad is een lichte muntvlek; daar hoort een donker
+   label op, geen licht. */
+
+/* ============================================================================
+   Twee gezichten met elk een rol
+   ----------------------------------------------------------------------------
+   Public Sans droeg alles: lopende tekst, labels én koppen. Daardoor was een
+   kop niets anders dan een groter label en had de typografie geen
+   registerwissel. Manrope werd wel geladen maar raakte drie elementen.
+
+   Vanaf hier draagt Manrope de koppen — hetzelfde gezicht als de
+   landingspagina, zodat de werkbank achter de knop niet als een ander product
+   leest — en blijft Public Sans de tekst en de bediening.
+
+   De gewichtsschaal telt vier stappen, en elke stap wordt ook echt geladen:
+   400 lopende tekst · 500 zachte nadruk · 600 labels en nadruk · 700 koppen.
+   ========================================================================== */
+
+.workbench-shell :where(h1, h2, h3, h4, h5) {
+  font-family: var(--gi-font-display);
+  letter-spacing: -0.014em;
+}
+
+/* Getallen en codes horen uit te lijnen in kolommen. */
+.workbench-shell :where(td, .metric-value, [data-numeric], .status-readiness-copy strong) {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================================
+   Eén rand per niveau
+   ----------------------------------------------------------------------------
+   Op Bronnen zat een statvak in een kaart in een kaart in een paneel, elk met
+   een eigen lijn van 1px. Randen deden daar het werk dat ruimte en één
+   toonverschil horen te doen, en dat is precies het verschil tussen een
+   dashboard dat duur oogt en een dat ingewikkeld oogt.
+
+   Het buitenste paneel houdt zijn rand. Wat daarbinnen ligt scheidt op toon.
+   Knoppen en invoervelden houden hun rand wel: die moeten er bedienbaar
+   uitzien.
+   ========================================================================== */
+
+.workbench-shell .workspace-panel :where(
+    .data-selection-summary,
+    .data-panel-list-block,
+    .data-panel-form-block,
+    .source-loaded-disclosure,
+    .source-theme-coverage
+  ) {
+  border: 0;
+  background: var(--gi-surface-soft);
+}
+
+/* Het statblok labelde elk getal twee keer, boven én onder, allebei in
+   dezelfde microkapitaal — en het eerste label werd afgekapt. Nu één label,
+   onder het getal, in gewone schrijfwijze zodat het past. */
+.workbench-shell .dataset-role-summary {
+  display: grid;
+  gap: 0.15rem;
+  align-content: start;
+  border: 0;
+  padding: var(--gi-space-3);
+  background: var(--gi-surface-soft);
+}
+
+.workbench-shell .dataset-role-summary strong {
+  color: var(--gi-ink-950);
+  font-family: var(--gi-font-display);
+  font-size: var(--gi-text-xl);
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.workbench-shell .dataset-role-summary span {
+  color: var(--gi-ink-600);
+  font-size: var(--gi-text-2xs);
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+  overflow-wrap: break-word;
+}
+
+/* ============================================================================
+   Overgenomen uit de eerdere stylesheets
+   ----------------------------------------------------------------------------
+   Elk van onderstaande declaraties stond in app.css, premium.css of
+   atlas-workbench.css met !important, om een regel te verslaan die later
+   geladen werd. Dat is de omgekeerde wereld: dit bestand is leidend, dus het
+   hoort deze waarden zelf te bezitten en op specificiteit te winnen.
+
+   De eerdere bestanden houden hun regel, maar zonder !important; wint deze
+   sectie, dan is dat omdat ze scoped is en later komt, niet omdat ze schreeuwt.
+   ========================================================================== */
+
+.workbench-shell .source-priority {
+  font-size: 0.65rem;
+}
+
+.workbench-shell .source-priority-next {
+  color: var(--gi-brand-600);
+}
+
+.workbench-shell .source-priority-planned {
+  color: var(--gi-warn);
+}
+
+.workbench-shell .source-freshness-header {
+  display: flex;
+}
+
+.workbench-shell .source-freshness-status {
+  color: var(--gi-ink-800);
+}
+
+/* De contextlabels in de kopbalk. Kleur en maat stonden in atlas-workbench.css,
+   de rest van de regel hier; dat liep uiteen zodra een van beide wijzigde. */
+.workbench-shell .context-bar span {
+  color: var(--gi-ink-400);
+}
+
+/* .eyebrow en .section-kicker stonden op één klasse diep in atlas-workbench.css
+   en verloren daardoor van elke regel met twee klassen; vandaar hun !important.
+   Hier winnen ze op specificiteit. Het duplicaat in atlas-premium-v2.css, dat
+   dezelfde selectors met andere waarden zette, is verwijderd. */
+.workbench-shell .eyebrow,
+.workbench-shell .section-kicker {
+  color: var(--atlas-secondary);
+  font-size: 0.62rem;
+}
+
+@media (max-width: 640px) {
+  .workbench-shell section.source-catalog-panel > .panel-title-row {
+    display: grid;
+  }
+}
+
+/* ============================================================================
+   De werkruimte-illustratie krijgt een plek
+   ----------------------------------------------------------------------------
+   De illustratie zweefde met justify-self: center tussen de paginatitel en de
+   rechts uitgelijnde metatekst in, uitgelijnd op geen van beide. En haar accent
+   wisselde per werkruimte tussen paars, oranje en blauw, terwijl de
+   navigatiebalk al aangeeft waar je bent; dat brak het merk zonder iets toe te
+   voegen dat de gebruiker nodig heeft.
+
+   Nu staat ze links, direct naast de titel, als bijbehorend merkteken. Eén
+   accent, ontleend aan het merk.
+   ========================================================================== */
+
+.workbench-shell .workspace-signal {
+  --signal-accent: var(--gi-brand-500);
+  justify-self: start;
+  width: 5.5rem;
+  height: 3.75rem;
+}
+
+.workbench-shell :where(
+    .workspace-signal-data,
+    .workspace-signal-assistant,
+    .workspace-signal-analysis,
+    .workspace-signal-ai,
+    .workspace-signal-exports,
+    .workspace-signal-system
+  ) {
+  --signal-accent: var(--gi-brand-500);
+}
+
+/* ============================================================================
+   Eén niveau kapitalen
+   ----------------------------------------------------------------------------
+   Op één scherm stonden WERKRUIMTE, GEBIED, BRON, KAARTLAAG, SNELKEUZE,
+   ACTIEF WERKGEBIED, INGELADEN BEREIK, ACTIEVE BRON, GEGEVENSCONTEXT en
+   CONTROLES. Als alles een bovenkop is, is niets meer een bovenkop.
+
+   De paneelkop (.eyebrow) houdt de kapitalen: dat is het enige niveau waar ze
+   structuur dragen. Alles daaronder is gewone schrijfwijze en onderscheidt
+   zich op gewicht en kleur.
+   ========================================================================== */
+
+.workbench-shell :is(
+    .context-bar span,
+    .data-selection-summary > span,
+    .data-section-label,
+    .status-tile-topline > span
+  ) {
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.workbench-shell .context-bar span {
+  font-size: var(--gi-text-2xs);
+}
+
+/* ============================================================================
+   Eén oppervlak boven de kaart
+   ----------------------------------------------------------------------------
+   Boven de kaart dreven zes vlakken: het live-analyseblok linksboven, de
+   gereedschapscluster in het midden, de resultaatchip rechtsboven, de staprail
+   onderaan, het inzichten-tabblad rechts en de legenda rechtsonder. Elk met een
+   eigen radius, achtergrond en schaduw, waardoor ze bij elkaar noch bij de
+   kaart hoorden.
+
+   Ze delen nu één oppervlak. Het inzichten-tabblad houdt bewust zijn accent:
+   dat is het enige van de zes dat een actie is in plaats van een mededeling.
+
+   Wat hier niet is opgelost: het blijven zes clusters. Terugbrengen naar drie
+   verplaatst bediening en is een ontwerpbeslissing, geen opmaakkwestie.
+   ========================================================================== */
+
+.workbench-shell :is(
+    .live-analysis-journey,
+    .geo-map-toolbar,
+    .geo-map-legend
+  ) {
+  border: 1px solid var(--gi-line-strong);
+  border-radius: var(--gi-radius-md);
+  background: color-mix(in srgb, var(--gi-surface) 92%, transparent);
+  box-shadow: var(--gi-shadow-md);
+  backdrop-filter: blur(8px);
+}
+
+/* Onder deze breedte is er geen ruimte voor alle drie de regio's naast elkaar.
+   De resultaatchip vervalt als eerste: die herhaalt wat de vierde stap in de
+   rail al toont. De fase en de voortgang blijven, want die vertellen waar de
+   gebruiker staat. */
+@media (max-width: 1280px) {
+  .workbench-shell .live-analysis-proof {
+    display: none;
+  }
+
+  .workbench-shell .live-analysis-status-card {
+    flex: 0 1 10rem;
+  }
+
+  .workbench-shell .live-analysis-steps {
+    grid-template-columns: repeat(4, minmax(2.4rem, 1fr));
+  }
+
+  .workbench-shell .live-analysis-step > small {
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+/* Nog smaller: de staprail alleen, zonder losse fasebeschrijving. */
+@media (max-width: 1040px) {
+  .workbench-shell .live-analysis-status-card small {
+    display: none;
+  }
+}
+
+/* ============================================================================
+   Werkblad dat het liet afweten
+   ----------------------------------------------------------------------------
+   De melding van WorkspaceErrorBoundary. Zichtbaar maar niet alarmerend: de
+   rest van de werkbank doet het nog, en dat moet de toon ook uitstralen.
+   ========================================================================== */
+
+.workbench-shell .workspace-error {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--gi-space-4);
+  align-items: start;
+  margin: var(--gi-space-4);
+  border: 1px solid var(--gi-warn);
+  border-radius: var(--gi-radius-md);
+  padding: var(--gi-space-5);
+  background: var(--gi-warn-soft);
+}
+
+.workbench-shell .workspace-error > svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--gi-warn);
+}
+
+.workbench-shell .workspace-error strong {
+  display: block;
+  margin-bottom: var(--gi-space-1);
+  font-family: var(--gi-font-display);
+  font-size: var(--gi-text-lg);
+}
+
+.workbench-shell .workspace-error p {
+  margin: 0;
+  max-width: 62ch;
+  color: var(--gi-ink-800);
+  font-size: var(--gi-text-sm);
+}
+
+.workbench-shell .workspace-error .workspace-error-detail {
+  margin-top: var(--gi-space-2);
+  color: var(--gi-ink-600);
+  font-family: 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
+  font-size: var(--gi-text-xs);
+  overflow-wrap: anywhere;
+}
+
+/* ============================================================================
+   Systeem: kolommen die te smal werden
+   ----------------------------------------------------------------------------
+   Op het systeemwerkblad werd de titelkolom zo smal dat "Gebiedsverwerking"
+   middenin het woord afbrak, terwijl er rechts een groot leeg vlak stond. De
+   kop en zijn beschrijving horen over de volle breedte, met het resultaat
+   eronder in plaats van ernaast.
+   ========================================================================== */
+
+.workbench-shell .system-provider-capability-surface {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.workbench-shell .system-provider-capability-surface > .panel-title-row {
+  gap: var(--gi-space-4);
+  align-items: center;
+  width: 100%;
+}
+
+.workbench-shell .system-provider-capability-surface > .panel-title-row > div {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.workbench-shell .system-provider-capability-surface > .panel-title-row > button {
+  flex: 0 0 auto;
+}
+
+/* Normale woorden mogen niet middenin afbreken. Alleen strings zonder
+   woordgrens — URL's, bestandspaden, NIS-codes — mogen dat, en die vangt
+   overflow-wrap: anywhere op de plekken waar ze voorkomen. */
+.workbench-shell :where(h1, h2, h3, h4, h5, strong) {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+
+/* De werkstandschakelaar. Klein en rustig: het is een voorkeur, geen actie in
+   het werkproces. */
+.workbench-shell .workbench-theme-toggle {
+  display: inline-flex;
+  width: 2.25rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  border: 1px solid var(--gi-line);
+  border-radius: var(--gi-radius-pill);
+  padding: 0;
+  background: var(--gi-surface-soft);
+  color: var(--gi-ink-600);
+}
+
+.workbench-shell .workbench-theme-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+
+.workbench-shell .workbench-theme-toggle:hover {
+  border-color: var(--gi-line-strong);
+  color: var(--gi-ink-950);
+}
+
+/* ============================================================================
+   Labels op de primaire knop
+   ----------------------------------------------------------------------------
+   De primaire knop is een verloop tussen twee merkstappen. In de donkere
+   werkstand zijn die stappen helder, en wit daarop haalde 3.1:1 — onder de
+   norm van 4.5:1 voor tekst van deze grootte. Het is me eerder ontgaan omdat
+   mijn contrastmeting alleen background-color las en het verloop niet zag.
+
+   Het label gebruikt nu hetzelfde token als de andere vullingen op een heldere
+   merkstap: wit in de lichte werkstand, diep merkgroen in de donkere.
+   ========================================================================== */
+
+.workbench-shell .primary-action {
+  color: var(--gi-on-brand-strong);
+}
+
+.workbench-shell .primary-action svg {
+  color: inherit;
+}
+
+/* ============================================================================
+   Panelen die in beide werkstanden donker zijn
+   ----------------------------------------------------------------------------
+   De projectatlas en de commandokaart houden bewust een donker vlak, ook in de
+   lichte werkstand: het zijn illustraties, geen leesoppervlakken. Hun tekst
+   erfde daar de donkere inkt van het lichte palet en verdween.
+   ========================================================================== */
+
+/* Geen token maar een vaste waarde: het vlak eronder is in beide werkstanden
+   donker, dus de tekst hoort in beide werkstanden licht te zijn. Een token dat
+   met het thema meedraait zou hier juist omslaan naar donker-op-donker. */
+.workbench-shell :is(.project-atlas, .overview-command-card-progress) :where(span, p, small, .eyebrow) {
+  color: rgba(233, 240, 236, 0.82);
+}
+
+.workbench-shell :is(.project-atlas, .overview-command-card-progress) strong {
+  color: #ffffff;
+}
+
+/* Melding wanneer een deel van de gegevens niet opgehaald kon worden. Apart van
+   de werkruimtefout: dit gaat niet over een mislukte handeling maar over een
+   onvolledig beeld, en dat verschil hoort de gebruiker te zien. */
+.workbench-shell .workspace-notice-load {
+  border-color: var(--gi-warn);
+  background: var(--gi-warn-soft);
+}
+
+.workbench-shell .workspace-notice-load > svg {
+  color: var(--gi-warn);
+}
+
+/* De melding is een smalle toast; de knop past er niet naast en krijgt daarom
+   een eigen rij onder de tekst. */
+.workbench-shell .workspace-notice-load button {
+  grid-column: 2;
+  justify-self: start;
+  margin-top: var(--gi-space-2);
+  white-space: nowrap;
+}
diff --git a/frontend/src/styles/landing-project-story.css b/frontend/src/styles/landing-project-story.css
index 8075dedf..2aad7af9 100644
--- a/frontend/src/styles/landing-project-story.css
+++ b/frontend/src/styles/landing-project-story.css
@@ -40,7 +40,7 @@
   justify-items: start;
   min-width: 0;
   border: 1px solid var(--landing-line);
-  border-radius: .8rem;
+  border-radius: var(--gi-radius-lg);
   padding: .8rem;
   background: rgba(255, 255, 255, .72);
   color: var(--landing-muted);
@@ -54,7 +54,7 @@
   bottom: 0;
   left: .8rem;
   height: 2px;
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   background: var(--landing-primary);
   content: '';
   opacity: 0;
@@ -69,7 +69,7 @@
   color: var(--landing-primary-strong);
 }
 .landing-story-tabs button[aria-selected='true']::after { opacity: 1; transform: scaleX(1); }
-.landing-story-tabs button > span { font-size: .54rem; font-weight: 800; letter-spacing: .1em; }
+.landing-story-tabs button > span { font-size: .54rem; font-weight: 700; letter-spacing: .1em; }
 .landing-story-tabs svg { width: 1rem; height: 1rem; }
 .landing-story-tabs strong { overflow: hidden; max-width: 100%; font-size: .65rem; text-overflow: ellipsis; }
 
@@ -80,13 +80,13 @@
   align-items: end;
   margin-top: 1rem;
   border-left: 3px solid var(--landing-primary);
-  border-radius: 0 .8rem .8rem 0;
+  border-radius: 0 var(--gi-radius-lg) var(--gi-radius-lg) 0;
   padding: 1rem 1.1rem;
   background: linear-gradient(90deg, rgba(222, 247, 241, .8), rgba(247, 252, 251, .55));
   animation: landing-story-enter .42s ease both;
 }
 
-.landing-story-detail small { color: var(--landing-primary); font-size: .55rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
+.landing-story-detail small { color: var(--landing-primary); font-size: .55rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
 .landing-story-detail h3 { margin: .25rem 0 0; font-family: "Manrope", sans-serif; font-size: 1rem; }
 .landing-story-detail p { max-width: 54ch; margin: .35rem 0 0; color: var(--landing-muted); font-size: .69rem; line-height: 1.6; }
 .landing-story-metric { display: grid; min-width: 6.5rem; text-align: right; }
@@ -99,15 +99,20 @@
   min-height: 38rem;
   overflow: hidden;
   border: 1px solid rgba(161, 215, 204, .6);
-  border-radius: 1.6rem;
+  border-radius: var(--gi-radius-xl);
   background: #072f2c;
-  box-shadow: 0 35px 90px rgba(10, 67, 59, .2);
+  box-shadow: var(--gi-shadow-lg);
 }
 
 .landing-story-map {
   position: absolute;
   inset: 0;
-  background: linear-gradient(145deg, rgba(4, 35, 32, .2), rgba(2, 26, 24, .78)), url('/portfolio/geointel-building-qa.webp') center / cover;
+  /* De afbeelding komt pas wanneer het blok in de buurt van het scherm is;
+     zie useDeferredBackground. De gradiënt staat er meteen, zodat het vlak
+     nooit leeg oogt. */
+  background: linear-gradient(145deg, rgba(4, 35, 32, .2), rgba(2, 26, 24, .78));
+  background-size: cover;
+  background-position: center;
   filter: saturate(.78) contrast(1.03);
   transform: scale(1.035);
   transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
@@ -132,14 +137,14 @@
   z-index: 2;
   display: grid;
   border: 1px solid rgba(196, 244, 234, .24);
-  border-radius: .9rem;
+  border-radius: var(--gi-radius-lg);
   background: rgba(3, 39, 35, .78);
   color: #fff;
-  box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
+  box-shadow: var(--gi-shadow-lg);
   backdrop-filter: blur(13px);
 }
 .landing-story-status { top: 1.25rem; left: 1.25rem; gap: .2rem; min-width: 10rem; padding: .8rem .95rem; }
-.landing-story-status span { color: #8ee7d2; font-size: .52rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
+.landing-story-status span { color: #8ee7d2; font-size: .52rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
 .landing-story-status i { display: inline-block; width: .42rem; height: .42rem; margin-right: .4rem; border-radius: 50%; background: #77e2ca; box-shadow: 0 0 0 5px rgba(119, 226, 202, .11); }
 .landing-story-status strong { font-family: "Manrope", sans-serif; font-size: .92rem; }
 .landing-story-status small { color: rgba(255, 255, 255, .58); font-size: .59rem; }
@@ -163,7 +168,7 @@
   .landing-story-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .landing-story-detail { grid-template-columns: 1fr; }
   .landing-story-metric { text-align: left; }
-  .landing-story-visual { min-height: 28rem; border-radius: 1.15rem; }
+  .landing-story-visual { min-height: 28rem; border-radius: var(--gi-radius-xl); }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -172,3 +177,10 @@
     transition-duration: .01ms !important;
   }
 }
+
+
+.landing-story-map[data-achtergrond='geladen'] {
+  background:
+    linear-gradient(145deg, rgba(4, 35, 32, .2), rgba(2, 26, 24, .78)),
+    url('/portfolio/geointel-building-qa.webp') center / cover;
+}
diff --git a/frontend/src/styles/landing.css b/frontend/src/styles/landing.css
index 3e45e327..7872aa39 100644
--- a/frontend/src/styles/landing.css
+++ b/frontend/src/styles/landing.css
@@ -61,13 +61,13 @@ body.landing-body {
   z-index: 200;
   top: -5rem;
   left: 1rem;
-  border-radius: 0.65rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.75rem 1rem;
   background: var(--landing-primary-dark);
   color: #fff;
-  font-weight: 700;
+  font-weight: 600;
   text-decoration: none;
-  box-shadow: 0 12px 30px rgba(4, 42, 37, 0.24);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .landing-skip-link:focus {
@@ -104,8 +104,8 @@ body.landing-body {
 .landing-brand-mark {
   width: 2.35rem;
   height: 2.35rem;
-  border-radius: 0.7rem;
-  box-shadow: 0 8px 22px rgba(3, 55, 49, 0.2);
+  border-radius: var(--gi-radius-md);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .landing-brand-copy {
@@ -122,7 +122,7 @@ body.landing-body {
 .landing-brand-copy small {
   color: var(--landing-muted);
   font-size: 0.59rem;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
@@ -138,7 +138,7 @@ body.landing-body {
   padding: 0.55rem 0;
   color: #3c5a55;
   font-size: 0.78rem;
-  font-weight: 650;
+  font-weight: 600;
   text-decoration: none;
 }
 
@@ -148,7 +148,7 @@ body.landing-body {
   bottom: 0.25rem;
   left: 0;
   height: 2px;
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   background: var(--landing-primary);
   content: '';
   opacity: 0;
@@ -176,10 +176,10 @@ body.landing-body {
 .landing-header-login,
 .landing-header-guest {
   min-height: 2.55rem;
-  border-radius: 0.62rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.5rem 1rem;
   font-size: 0.76rem;
-  font-weight: 750;
+  font-weight: 600;
   transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
 }
 
@@ -187,7 +187,7 @@ body.landing-body {
   border: 1px solid var(--landing-primary);
   background: var(--landing-primary);
   color: #fff;
-  box-shadow: 0 9px 22px rgba(8, 120, 108, 0.18);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .landing-header-guest {
@@ -315,17 +315,17 @@ body.landing-body {
   margin: 0;
   color: var(--landing-primary-strong);
   font-size: 0.67rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.105em;
   text-transform: uppercase;
 }
 
 .landing-kicker {
   border: 1px solid rgba(104, 182, 169, 0.52);
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   padding: 0.48rem 0.8rem;
   background: rgba(225, 250, 245, 0.82);
-  box-shadow: 0 6px 18px rgba(48, 111, 101, 0.08);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .landing-kicker svg {
@@ -339,7 +339,7 @@ body.landing-body {
   color: var(--landing-ink);
   font-family: "Manrope", "Segoe UI", sans-serif;
   font-size: clamp(3.1rem, 5.2vw, 5.35rem);
-  font-weight: 750;
+  font-weight: 600;
   letter-spacing: -0.06em;
   line-height: 0.99;
   text-wrap: balance;
@@ -372,10 +372,10 @@ body.landing-body {
   gap: 0.6rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.72rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.8rem 1.2rem;
   font-size: 0.82rem;
-  font-weight: 750;
+  font-weight: 600;
   text-decoration: none;
   transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
 }
@@ -384,7 +384,7 @@ body.landing-body {
   border: 1px solid var(--landing-primary);
   background: var(--landing-primary);
   color: #fff;
-  box-shadow: 0 14px 30px rgba(8, 120, 108, 0.2);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .landing-secondary-action {
@@ -401,7 +401,7 @@ body.landing-body {
 
 .landing-primary-action:hover:not(:disabled) {
   background: var(--landing-primary-strong);
-  box-shadow: 0 18px 34px rgba(8, 120, 108, 0.24);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .landing-secondary-action:hover {
@@ -478,7 +478,7 @@ body.landing-body {
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(103, 147, 138, 0.48);
-  border-radius: 1.25rem;
+  border-radius: var(--gi-radius-xl);
   background: rgba(255, 255, 255, 0.96);
   box-shadow: var(--landing-shadow);
   scroll-margin-top: 6rem;
@@ -543,7 +543,7 @@ body.landing-body {
   justify-content: space-between;
   color: rgba(255, 255, 255, 0.78);
   font-size: 0.61rem;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
 }
@@ -571,10 +571,10 @@ body.landing-body {
   align-items: center;
   margin: 1.4rem auto 1.1rem 0.7rem;
   border: 1px solid rgba(189, 240, 230, 0.25);
-  border-radius: 0.8rem;
+  border-radius: var(--gi-radius-lg);
   padding: 0.72rem 0.85rem;
   background: rgba(5, 36, 32, 0.78);
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
+  box-shadow: var(--gi-shadow-lg);
   backdrop-filter: blur(8px);
 }
 
@@ -583,7 +583,7 @@ body.landing-body {
   width: 2.15rem;
   height: 2.15rem;
   place-items: center;
-  border-radius: 0.62rem;
+  border-radius: var(--gi-radius-md);
   background: rgba(83, 223, 196, 0.16);
   color: #7be7d1;
 }
@@ -615,7 +615,7 @@ body.landing-body {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border: 1px solid rgba(214, 246, 240, 0.18);
-  border-radius: 0.72rem;
+  border-radius: var(--gi-radius-md);
   background: rgba(5, 33, 30, 0.66);
   backdrop-filter: blur(8px);
 }
@@ -666,7 +666,7 @@ body.landing-body {
 .landing-login-icon {
   width: 2.45rem;
   height: 2.45rem;
-  border-radius: 0.68rem;
+  border-radius: var(--gi-radius-md);
 }
 
 .landing-login-icon svg,
@@ -683,7 +683,7 @@ body.landing-body {
   margin: 0 0 0.22rem;
   color: var(--landing-primary);
   font-size: 0.59rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.09em;
   text-transform: uppercase;
 }
@@ -714,7 +714,7 @@ body.landing-body {
   margin-top: 0.35rem;
   color: #49645f;
   font-size: 0.58rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.055em;
   text-transform: uppercase;
 }
@@ -723,7 +723,7 @@ body.landing-body {
   width: 100%;
   min-height: 2.85rem;
   border: 1px solid #b8d1cc;
-  border-radius: 0.62rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.7rem 0.78rem;
   background: #f4fbf9;
   color: var(--landing-ink);
@@ -759,7 +759,7 @@ body.landing-body {
   height: 2.15rem;
   place-items: center;
   border: 0;
-  border-radius: 0.5rem;
+  border-radius: var(--gi-radius-sm);
   background: transparent;
   color: #55716b;
   transform: translateY(-50%);
@@ -784,19 +784,19 @@ body.landing-body {
   justify-content: center;
   margin-top: 0.55rem;
   border: 1px solid var(--landing-primary);
-  border-radius: 0.66rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.72rem 1rem;
   background: var(--landing-primary);
   color: #fff;
   font-size: 0.77rem;
-  font-weight: 750;
-  box-shadow: 0 10px 24px rgba(8, 120, 108, 0.16);
+  font-weight: 600;
+  box-shadow: var(--gi-shadow-md);
   transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
 }
 
 .landing-operator-submit:hover:not(:disabled) {
   background: var(--landing-primary-strong);
-  box-shadow: 0 14px 26px rgba(8, 120, 108, 0.22);
+  box-shadow: var(--gi-shadow-md);
   transform: translateY(-1px);
 }
 
@@ -814,7 +814,7 @@ body.landing-body {
   margin: 0.5rem 0 0;
   border: 1px solid #efc4c1;
   border-left: 3px solid #a23e38;
-  border-radius: 0.5rem;
+  border-radius: var(--gi-radius-sm);
   padding: 0.62rem 0.72rem;
   background: #fff3f2;
   color: #7c2d29;
@@ -830,7 +830,7 @@ body.landing-body {
   margin: 1.15rem 0;
   color: #78908b;
   font-size: 0.58rem;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .landing-access-divider::before,
@@ -846,7 +846,7 @@ body.landing-body {
   gap: 0.7rem;
   align-items: start;
   border: 1px solid #bfe0d9;
-  border-radius: 0.75rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.78rem;
   background: linear-gradient(135deg, #f2fcfa, #ecf8f5);
 }
@@ -854,7 +854,7 @@ body.landing-body {
 .landing-guest-icon {
   width: 2.15rem;
   height: 2.15rem;
-  border-radius: 0.58rem;
+  border-radius: var(--gi-radius-md);
 }
 
 .landing-guest-access > div {
@@ -881,12 +881,12 @@ body.landing-body {
   align-items: center;
   justify-content: space-between;
   border: 1px solid #90c8bd;
-  border-radius: 0.6rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.62rem 0.78rem;
   background: #fff;
   color: var(--landing-primary-strong);
   font-size: 0.71rem;
-  font-weight: 750;
+  font-weight: 600;
   transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
 }
 
@@ -970,12 +970,12 @@ body.landing-body {
   overflow: hidden;
   min-height: 18rem;
   border: 1px solid var(--landing-line-soft);
-  border-radius: 1rem;
+  border-radius: var(--gi-radius-lg);
   padding: clamp(1.35rem, 2.5vw, 1.85rem);
   background:
     linear-gradient(180deg, rgba(242, 250, 248, 0.58), transparent 55%),
     #fff;
-  box-shadow: 0 18px 45px rgba(19, 63, 56, 0.07);
+  box-shadow: var(--gi-shadow-lg);
   transition: border-color 170ms ease, transform 170ms ease, box-shadow 170ms ease;
 }
 
@@ -992,7 +992,7 @@ body.landing-body {
 
 .landing-capability:hover {
   border-color: #acd1ca;
-  box-shadow: 0 23px 52px rgba(19, 63, 56, 0.1);
+  box-shadow: var(--gi-shadow-lg);
   transform: translateY(-3px);
 }
 
@@ -1007,7 +1007,7 @@ body.landing-body {
   width: 2.85rem;
   height: 2.85rem;
   place-items: center;
-  border-radius: 0.78rem;
+  border-radius: var(--gi-radius-lg);
   background: var(--landing-mint);
   color: var(--landing-primary);
 }
@@ -1021,7 +1021,7 @@ body.landing-body {
   color: #9aafaa;
   font-family: "Manrope", sans-serif;
   font-size: 0.68rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.1em;
 }
 
@@ -1058,9 +1058,9 @@ body.landing-body {
   min-height: 37rem;
   overflow: hidden;
   border: 1px solid rgba(115, 151, 144, 0.45);
-  border-radius: 1.2rem;
+  border-radius: var(--gi-radius-xl);
   background: #0a2824;
-  box-shadow: 0 28px 70px rgba(10, 48, 42, 0.17);
+  box-shadow: var(--gi-shadow-lg);
   isolation: isolate;
 }
 
@@ -1112,7 +1112,7 @@ body.landing-body {
   margin: 0 0 0.7rem;
   color: #7be6d1;
   font-size: 0.65rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
@@ -1145,11 +1145,11 @@ body.landing-body {
   gap: 0.65rem;
   align-items: center;
   border: 1px solid rgba(202, 244, 236, 0.28);
-  border-radius: 0.72rem;
+  border-radius: var(--gi-radius-md);
   padding: 0.68rem 0.78rem;
   background: rgba(4, 38, 34, 0.76);
   color: #fff;
-  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.23);
+  box-shadow: var(--gi-shadow-lg);
   backdrop-filter: blur(10px);
 }
 
@@ -1203,12 +1203,12 @@ body.landing-body {
   width: 2rem;
   height: 2rem;
   place-items: center;
-  border-radius: 0.55rem;
+  border-radius: var(--gi-radius-md);
   background: var(--landing-mint);
   color: var(--landing-primary-strong);
   font-family: "Manrope", sans-serif;
   font-size: 0.61rem;
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .landing-workflow-steps h3 {
@@ -1231,7 +1231,7 @@ body.landing-body {
   align-items: start;
   margin-top: 1.35rem;
   border: 1px solid #c2ddd7;
-  border-radius: 0.8rem;
+  border-radius: var(--gi-radius-lg);
   padding: 1rem;
   background: linear-gradient(135deg, #effbf8, #f7fcfb);
   scroll-margin-top: 6rem;
@@ -1278,7 +1278,7 @@ body.landing-body {
 .landing-footer-mark {
   width: 2.25rem;
   height: 2.25rem;
-  border-radius: 0.65rem;
+  border-radius: var(--gi-radius-md);
 }
 
 .landing-footer strong {
@@ -1308,7 +1308,7 @@ body.landing-body {
 .landing-footer .itworx-signature > span {
   color: rgba(255, 255, 255, 0.45);
   font-size: 0.53rem;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0.07em;
   text-transform: uppercase;
 }
@@ -1388,7 +1388,7 @@ body.landing-body {
     height: 2.45rem;
     place-items: center;
     border: 1px solid var(--landing-line);
-    border-radius: 0.62rem;
+    border-radius: var(--gi-radius-md);
     background: rgba(255, 255, 255, 0.9);
     color: var(--landing-ink);
   }
@@ -1409,10 +1409,10 @@ body.landing-body {
     align-items: stretch;
     overflow: hidden;
     border: 1px solid var(--landing-line);
-    border-radius: 0.8rem;
+    border-radius: var(--gi-radius-lg);
     padding: 0.35rem;
     background: rgba(255, 255, 255, 0.98);
-    box-shadow: 0 18px 45px rgba(10, 55, 48, 0.15);
+    box-shadow: var(--gi-shadow-lg);
   }
 
   .landing-nav-open {
@@ -1420,7 +1420,7 @@ body.landing-body {
   }
 
   .landing-nav a {
-    border-radius: 0.55rem;
+    border-radius: var(--gi-radius-md);
     padding: 0.75rem 0.8rem;
   }
 
@@ -1720,3 +1720,13 @@ body.landing-body {
     transition-duration: 0.01ms !important;
   }
 }
+
+/* De storingsmelding onder de knop, zolang de bezoeker nog niets geprobeerd
+   heeft. Een mededeling, geen fout: zie de toelichting in LandingPage.tsx. */
+.landing-login-note {
+  margin: 0.7rem 0 0;
+  color: var(--landing-muted);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  text-align: center;
+}
diff --git a/frontend/src/styles/premium.css b/frontend/src/styles/premium.css
index df1df7e3..b23305e0 100644
--- a/frontend/src/styles/premium.css
+++ b/frontend/src/styles/premium.css
@@ -60,14 +60,14 @@ body {
 
 .workbench-shell button {
   border-color: var(--line-strong);
-  background: #ffffff;
+  background: var(--gi-surface);
   box-shadow: none;
   transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
 }
 
 .workbench-shell button:hover:not(:disabled) {
-  border-color: #8fa3ae;
-  background: #f8fafb;
+  border-color: var(--gi-line);
+  background: var(--gi-info-soft);
   box-shadow: 0 0 0 3px rgba(40, 105, 168, 0.08);
 }
 
@@ -87,7 +87,7 @@ body {
 .workbench-shell select,
 .workbench-shell textarea {
   border-color: var(--line-strong);
-  background: #ffffff;
+  background: var(--gi-surface);
   box-shadow: none;
 }
 
@@ -96,9 +96,9 @@ body {
 .workbench-shell .context-bar span,
 .workbench-shell .status-tile-topline > span:first-child,
 .workbench-shell .inspector-field > span {
-  color: #6b7782;
+  color: var(--gi-ink-600);
   font-size: 0.69rem;
-  font-weight: 750;
+  font-weight: 600;
   text-transform: uppercase;
 }
 
@@ -115,7 +115,7 @@ body {
   align-items: center;
   border-bottom: 1px solid var(--line);
   padding: 0.65rem 1.25rem;
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--gi-surface);
   box-shadow: 0 1px 0 rgba(23, 33, 43, 0.03);
   backdrop-filter: blur(14px);
 }
@@ -133,11 +133,11 @@ body {
   height: 2.25rem;
   flex: 0 0 2.25rem;
   place-items: center;
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   background: #123238;
   color: #ffffff;
   font-size: 0.78rem;
-  font-weight: 850;
+  font-weight: 700;
 }
 
 .brand-block h1 {
@@ -160,8 +160,8 @@ body {
   gap: 0;
   justify-content: stretch;
   border: 1px solid var(--line);
-  border-radius: 7px;
-  background: #f8fafb;
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-info-soft);
 }
 
 .context-bar > div {
@@ -188,7 +188,7 @@ body {
   display: block;
   overflow: hidden;
   margin-top: 0.16rem;
-  color: #27343f;
+  color: var(--gi-ink-800);
   font-size: 0.78rem;
   line-height: 1.2;
   text-overflow: ellipsis;
@@ -208,7 +208,7 @@ body {
   overflow: auto;
   border-right: 1px solid var(--line);
   padding: 0.9rem 0.7rem;
-  background: #f8fafb;
+  background: var(--gi-info-soft);
 }
 
 .workbench-sidebar nav {
@@ -233,16 +233,16 @@ body {
   width: 100%;
   min-height: 2.7rem;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.52rem 0.65rem;
   background: transparent;
-  color: #34424d;
+  color: var(--gi-ink-800);
   text-align: left;
 }
 
 .nav-item span {
   font-size: 0.86rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .nav-item small {
@@ -250,7 +250,7 @@ body {
 }
 
 .nav-item-active {
-  border-color: #c8ded9;
+  border-color: var(--gi-brand-50);
   background: var(--accent-soft);
   color: var(--accent-strong);
   box-shadow: inset 3px 0 0 var(--accent);
@@ -259,9 +259,9 @@ body {
 .nav-item-active small {
   display: block;
   margin-top: 0.18rem;
-  color: #50746e;
+  color: var(--gi-ink-600);
   font-size: 0.69rem;
-  font-weight: 550;
+  font-weight: 500;
   line-height: 1.2;
 }
 
@@ -271,7 +271,7 @@ body {
 }
 
 .workbench-sidebar .nav-item-active {
-  border-color: #c8ded9;
+  border-color: var(--gi-brand-50);
   background: var(--accent-soft);
 }
 
@@ -359,8 +359,8 @@ body {
   border: 0;
   border-left: 1px solid var(--line);
   padding: 1rem;
-  background: #ffffff;
-  box-shadow: -18px 0 44px rgba(28, 42, 53, 0.16);
+  background: var(--gi-surface);
+  box-shadow: var(--gi-shadow-lg);
 }
 
 .inspector-header {
@@ -374,7 +374,7 @@ body {
   margin: -1rem -1rem 0.8rem;
   border-bottom: 1px solid var(--line);
   padding: 1rem;
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--gi-surface);
 }
 
 .inspector-header h2 {
@@ -409,7 +409,7 @@ body {
 }
 
 .inspector-tab-active {
-  border-color: #b6d6d0;
+  border-color: var(--gi-brand-50);
   background: var(--accent-soft);
   color: var(--accent-strong);
 }
@@ -448,8 +448,8 @@ body {
 .handoff-action-card,
 .system-provider-card {
   border-color: var(--line);
-  border-radius: 7px;
-  background: #ffffff;
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-surface);
   box-shadow: none;
 }
 
@@ -469,10 +469,10 @@ body {
 .status-pill,
 .status-badge,
 .workflow-step-status {
-  border-radius: 999px;
-  background: #edf2f4;
-  color: #4e5d68;
-  font-weight: 700;
+  border-radius: var(--gi-radius-pill);
+  background: var(--gi-info-soft);
+  color: var(--gi-ink-600);
+  font-weight: 600;
 }
 
 .data-panel-form-block,
@@ -488,23 +488,23 @@ body {
 
 .table-scroll {
   border-color: var(--line);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
 }
 
 table thead th {
-  background: #f4f7f8;
-  color: #53616d;
+  background: var(--gi-info-soft);
+  color: var(--gi-ink-600);
 }
 
 table tbody tr:hover {
-  background: #f7fafb;
+  background: var(--gi-info-soft);
 }
 
 .error,
 .warning-message,
 .success-message,
 .demo-message {
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
 }
 
 /* Data workspace */
@@ -512,9 +512,9 @@ table tbody tr:hover {
 details.data-panel-form-block {
   overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0;
-  background: #f8fafb;
+  background: var(--gi-info-soft);
 }
 
 details.data-panel-form-block > summary {
@@ -524,9 +524,9 @@ details.data-panel-form-block > summary {
   align-items: center;
   justify-content: space-between;
   padding: 0.65rem 0.75rem;
-  color: #33424d;
+  color: var(--gi-ink-800);
   font-size: 0.8rem;
-  font-weight: 750;
+  font-weight: 600;
   list-style: none;
 }
 
@@ -542,7 +542,7 @@ details.data-panel-form-block > summary::after {
 
 details.data-panel-form-block[open] > summary {
   border-bottom: 1px solid var(--line);
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 details.data-panel-form-block[open] > summary::after {
@@ -560,7 +560,7 @@ details.data-panel-form-block > form {
 
 .workspace-grid-data .data-selection-summary {
   border-left: 3px solid var(--accent);
-  background: #f7faf9;
+  background: var(--gi-brand-50);
 }
 
 .workspace-grid-data .data-panel-list-block {
@@ -576,26 +576,26 @@ details.data-panel-form-block > form {
   gap: 0.55rem;
   padding: 0.65rem;
   border-bottom: 1px solid var(--line);
-  background: #f8fafb;
+  background: var(--gi-info-soft);
 }
 
 .catalog-browser-toolbar-datasets {
   margin-bottom: 0.65rem;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
 }
 
 .catalog-search-field {
   display: grid;
   gap: 0.3rem;
-  color: #53616d;
+  color: var(--gi-ink-600);
   font-size: 0.74rem;
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .catalog-search-field input {
   margin: 0;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .catalog-pagination {
@@ -662,9 +662,9 @@ details.data-panel-form-block > form {
 details.ai-lab-model-surface {
   overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0;
-  background: #f8fafb;
+  background: var(--gi-info-soft);
 }
 
 details.ai-lab-model-surface > summary {
@@ -675,9 +675,9 @@ details.ai-lab-model-surface > summary {
   align-items: center;
   justify-content: space-between;
   padding: 0.65rem 0.75rem;
-  color: #33424d;
+  color: var(--gi-ink-800);
   font-size: 0.8rem;
-  font-weight: 750;
+  font-weight: 600;
   list-style: none;
 }
 
@@ -699,13 +699,13 @@ details.ai-lab-model-surface > summary strong {
   margin-left: auto;
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .ai-lab-disclosure-body {
   border-top: 1px solid var(--line);
   padding: 0.75rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .ai-lab-shell .lab-block,
@@ -714,8 +714,8 @@ details.ai-lab-model-surface > summary strong {
 .ai-lab-shell .ai-lab-qa-surface,
 .ai-lab-shell > .ai-lab-model-surface[aria-label="Local model asset selection"] {
   border-color: var(--line);
-  border-radius: 6px;
-  background: #ffffff;
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-surface);
   box-shadow: none;
 }
 
@@ -773,9 +773,9 @@ details.ai-lab-model-surface > summary strong {
 .workbench-status-strip {
   overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 0;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .status-strip-header {
@@ -786,7 +786,7 @@ details.ai-lab-model-surface > summary strong {
   margin: 0;
   border-bottom: 1px solid var(--line);
   padding: 1.1rem 1.2rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .status-strip-header h2 {
@@ -821,7 +821,7 @@ details.ai-lab-model-surface > summary strong {
   margin-top: 0.25rem;
   color: var(--muted);
   font-size: 0.72rem;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .status-strip-grid {
@@ -838,7 +838,7 @@ details.ai-lab-model-surface > summary strong {
   border-right: 1px solid var(--line);
   border-radius: 0;
   padding: 0.75rem 0.8rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .status-tile:last-child {
@@ -861,7 +861,7 @@ details.ai-lab-model-surface > summary strong {
   display: -webkit-box;
   overflow: hidden;
   margin-top: 0.4rem;
-  color: #23313b;
+  color: var(--gi-ink-800);
   font-size: 0.87rem;
   line-height: 1.25;
   -webkit-box-orient: vertical;
@@ -882,12 +882,12 @@ details.ai-lab-model-surface > summary strong {
 .source-freshness-panel {
   overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 7px;
-  background: #ffffff;
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-surface);
 }
 
 .source-freshness-header {
-  display: flex !important;
+  display: flex;
   gap: 1rem;
   align-items: center;
   justify-content: space-between;
@@ -925,7 +925,7 @@ details.ai-lab-model-surface > summary strong {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
-  background: #f8fafb;
+  background: var(--gi-info-soft);
 }
 
 .source-freshness-summary span {
@@ -942,7 +942,7 @@ details.ai-lab-model-surface > summary strong {
 .source-freshness-summary strong {
   display: block;
   margin-bottom: 0.15rem;
-  color: #24333d;
+  color: var(--gi-ink-800);
   font-size: 1.05rem;
 }
 
@@ -985,7 +985,7 @@ details.ai-lab-model-surface > summary strong {
 }
 
 .source-freshness-main strong {
-  color: #23313b;
+  color: var(--gi-ink-800);
   font-size: 0.86rem;
 }
 
@@ -1002,8 +1002,8 @@ details.ai-lab-model-surface > summary strong {
 
 .source-freshness-status {
   flex: 0 0 auto;
-  color: #33424d !important;
-  font-weight: 750;
+  color: var(--gi-ink-800);
+  font-weight: 600;
 }
 
 .source-freshness-meta {
@@ -1026,7 +1026,7 @@ details.ai-lab-model-surface > summary strong {
 
 .source-catalog-section {
   border-top: 1px solid var(--line);
-  background: #fbfcfd;
+  background: var(--gi-info-soft);
 }
 
 .source-catalog-heading {
@@ -1043,7 +1043,7 @@ details.ai-lab-model-surface > summary strong {
 }
 
 .source-catalog-heading strong {
-  color: #23313b;
+  color: var(--gi-ink-800);
   font-size: 0.84rem;
 }
 
@@ -1055,7 +1055,7 @@ details.ai-lab-model-surface > summary strong {
 
 .source-catalog-heading > span {
   flex: 0 0 auto;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .source-catalog-empty {
@@ -1105,7 +1105,7 @@ details.ai-lab-model-surface > summary strong {
 
 .grb-refresh-plan {
   border-top: 1px solid var(--line);
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .grb-refresh-plan-heading {
@@ -1123,7 +1123,7 @@ details.ai-lab-model-surface > summary strong {
 }
 
 .grb-refresh-plan-heading strong {
-  color: #23313b;
+  color: var(--gi-ink-800);
   font-size: 0.84rem;
 }
 
@@ -1134,7 +1134,7 @@ details.ai-lab-model-surface > summary strong {
 
 .grb-refresh-plan-heading > span {
   flex: 0 0 auto;
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .grb-refresh-layer-list {
@@ -1181,9 +1181,9 @@ details.ai-lab-model-surface > summary strong {
 }
 
 .grb-refresh-layer > div:first-child span {
-  color: #4d5c66;
+  color: var(--gi-ink-600);
   font-size: 0.72rem;
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .grb-refresh-layer p {
@@ -1198,9 +1198,9 @@ details.ai-lab-model-surface > summary strong {
   gap: 1rem;
   justify-content: space-between;
   padding: 0.72rem 1rem;
-  color: #33424d;
+  color: var(--gi-ink-800);
   font-size: 0.78rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .source-freshness-list {
@@ -1274,7 +1274,7 @@ details.ai-lab-model-surface > summary strong {
   border: 1px solid var(--line);
   border-left: 1px solid var(--line);
   padding: 1rem 1.1rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .workflow-guidance-panel .panel-title-row {
@@ -1295,23 +1295,23 @@ details.ai-lab-model-surface > summary strong {
   min-width: 0;
   min-height: 5rem;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.65rem;
-  background: #f5f7f8;
+  background: var(--gi-surface);
   text-align: left;
 }
 
 .workflow-guidance-step:hover:not(:disabled) {
-  border-color: #bdcbd2;
-  background: #f0f4f5;
+  border-color: var(--gi-line);
+  background: var(--gi-surface-soft);
 }
 
 .workflow-guidance-step-ready {
-  background: #f0f7f4;
+  background: var(--gi-brand-50);
 }
 
 .workflow-guidance-step-active {
-  border-color: #91c5ba;
+  border-color: var(--gi-brand-50);
   background: var(--accent-soft);
 }
 
@@ -1334,7 +1334,7 @@ details.ai-lab-model-surface > summary strong {
   border: 1px solid var(--line);
   border-left: 1px solid var(--line);
   padding: 0.8rem 1rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .overview-action-copy h2 {
@@ -1380,7 +1380,7 @@ details.ai-lab-model-surface > summary strong {
   order: 1;
   border: 1px solid var(--line);
   padding: 0.75rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .map-workspace-shell .map-toolbar {
@@ -1398,9 +1398,9 @@ details.ai-lab-model-surface > summary strong {
 .layer-control-card {
   min-height: 3.9rem;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.45rem 0.55rem;
-  background: #f8fafb;
+  background: var(--gi-info-soft);
 }
 
 .map-status {
@@ -1411,9 +1411,9 @@ details.ai-lab-model-surface > summary strong {
   min-height: auto;
   align-content: center;
   border-left: 3px solid var(--accent);
-  border-radius: 4px;
+  border-radius: var(--gi-radius-xs);
   padding: 0.45rem 0.65rem;
-  background: #f3f8f7;
+  background: var(--gi-brand-50);
 }
 
 .map-status strong {
@@ -1445,8 +1445,8 @@ details.ai-lab-model-surface > summary strong {
 .detection-qa-diagnostic span {
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 800;
-  text-transform: uppercase;
+  font-weight: 700;
+  text-transform: none;
 }
 
 .detection-qa-diagnostic strong {
@@ -1461,15 +1461,15 @@ details.ai-lab-model-surface > summary strong {
 
 .detection-qa-diagnostic-caution {
   border-left-color: var(--warning);
-  background: #fff8eb;
+  background: var(--gi-warn-soft);
 }
 
 .basemap-policy-notice {
   margin-bottom: 0.65rem;
   border: 0;
-  border-radius: 5px;
+  border-radius: var(--gi-radius-xs);
   padding: 0.45rem 0.6rem;
-  background: #f3f6f8;
+  background: var(--gi-info-soft);
 }
 
 .basemap-policy-notice strong,
@@ -1480,11 +1480,11 @@ details.ai-lab-model-surface > summary strong {
 .map-frame-surface {
   order: 2;
   overflow: hidden;
-  border: 1px solid #aebac2;
-  border-radius: 7px;
+  border: 1px solid var(--gi-line);
+  border-radius: var(--gi-radius-sm);
   padding: 0;
-  background: #e9eff1;
-  box-shadow: 0 7px 22px rgba(29, 43, 54, 0.09);
+  background: var(--gi-info-soft);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .map-frame-surface .map-container,
@@ -1499,8 +1499,8 @@ details.ai-lab-model-surface > summary strong {
 .map-advanced-tools {
   overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 7px;
-  background: #ffffff;
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-surface);
 }
 
 .map-layer-details {
@@ -1524,9 +1524,9 @@ details.ai-lab-model-surface > summary strong {
   align-items: center;
   justify-content: space-between;
   padding: 0.7rem 0.85rem;
-  color: #263540;
+  color: var(--gi-ink-800);
   font-size: 0.82rem;
-  font-weight: 750;
+  font-weight: 600;
   list-style: none;
 }
 
@@ -1597,8 +1597,8 @@ details.ai-lab-model-surface > summary strong {
 
 .map-empty-state {
   margin: 0;
-  border: 1px dashed #afbdc5;
-  background: #f8fafb;
+  border: 1px dashed var(--gi-line);
+  background: var(--gi-info-soft);
 }
 
 .map-inspection-surface {
@@ -1613,9 +1613,9 @@ details.ai-lab-model-surface > summary strong {
 
 .gis-test-run-surface {
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: var(--gi-radius-sm);
   padding: 1rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .gis-test-run-grid,
@@ -1635,7 +1635,7 @@ details.ai-lab-model-surface > summary strong {
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   border-radius: 0;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .map-advanced-tools-body > div:nth-child(2n) {
@@ -1644,8 +1644,8 @@ details.ai-lab-model-surface > summary strong {
 
 .qa-evidence-map-status {
   border: 1px solid var(--line);
-  border-radius: 7px;
-  background: #ffffff;
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-surface);
 }
 
 /* Responsive shell */
@@ -1736,7 +1736,7 @@ details.ai-lab-model-surface > summary strong {
     border: 0;
     border-bottom: 1px solid var(--line);
     padding: 0.45rem 0.65rem;
-    background: #ffffff;
+    background: var(--gi-surface);
   }
 
   .workbench-sidebar nav {
@@ -1953,9 +1953,9 @@ details.ai-lab-model-surface > summary strong {
   display: grid;
   gap: 0.2rem;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.65rem 0.7rem;
-  background: #f7faf9;
+  background: var(--gi-brand-50);
 }
 
 .geo-loaded-scope span,
@@ -1974,7 +1974,7 @@ details.ai-lab-model-surface > summary strong {
   gap: 0.8rem;
   border-top: 1px solid var(--line);
   padding: 0.8rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .technical-management-body > .compact-form {
@@ -1992,8 +1992,8 @@ details.ai-lab-model-surface > summary strong {
 .export-history-disclosure {
   overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 6px;
-  background: #f8fafb;
+  border-radius: var(--gi-radius-sm);
+  background: var(--gi-info-soft);
 }
 
 .technical-run-list > summary,
@@ -2012,9 +2012,9 @@ details.ai-lab-model-surface > summary strong {
   align-items: center;
   justify-content: space-between;
   padding: 0.62rem 0.75rem;
-  color: #33424d;
+  color: var(--gi-ink-800);
   font-size: 0.8rem;
-  font-weight: 750;
+  font-weight: 600;
   list-style: none;
 }
 
@@ -2063,7 +2063,7 @@ details.ai-lab-model-surface > summary strong {
   overflow: auto;
   border-top: 1px solid var(--line);
   padding: 0.65rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .quality-advanced-disclosure {
@@ -2083,8 +2083,8 @@ details.ai-lab-model-surface > summary strong {
   margin: -0.25rem 0 0.65rem;
   border-left: 3px solid #b37a2d;
   padding: 0.45rem 0.65rem;
-  background: #fffbeb;
-  color: #6f4b18;
+  background: var(--gi-warn-soft);
+  color: var(--gi-warn);
 }
 
 .quality-advanced-disclosure > summary strong {
@@ -2138,7 +2138,7 @@ details.ai-lab-model-surface > summary strong {
   overflow: auto;
   padding: 0.5rem;
   list-style: none;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .dataset-history-list li {
@@ -2183,13 +2183,13 @@ details.ai-lab-model-surface > summary strong {
   min-width: 0;
   gap: 0.25rem;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.75rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .ai-user-summary-card-primary {
-  border-color: #bfd8d2;
+  border-color: var(--gi-brand-50);
   background: var(--accent-soft);
 }
 
@@ -2263,7 +2263,7 @@ details.ai-lab-model-surface > summary strong {
   gap: 0.75rem;
   border-top: 1px solid var(--line);
   padding: 0.75rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .export-history-body > div:first-child {
@@ -2321,15 +2321,15 @@ details.ai-lab-model-surface > summary strong {
 
   .workflow-guidance-steps .workflow-guidance-step {
     border-color: transparent;
-    background: #f5f7f8;
+    background: var(--gi-surface);
   }
 
   .workflow-guidance-steps .workflow-guidance-step-ready {
-    background: #f0f7f4;
+    background: var(--gi-brand-50);
   }
 
   .workflow-guidance-steps .workflow-guidance-step-active {
-    border-color: #91c5ba;
+    border-color: var(--gi-brand-50);
     background: var(--accent-soft);
   }
 }
@@ -2349,7 +2349,7 @@ details.ai-lab-model-surface > summary strong {
   width: fit-content;
   cursor: pointer;
   color: var(--muted);
-  font-weight: 750;
+  font-weight: 600;
 }
 
 .technical-inline-details[open] > summary {
@@ -2429,7 +2429,7 @@ details.ai-lab-model-surface > summary strong {
   min-width: 0;
   gap: 0.15rem;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.55rem;
   background: var(--panel-soft);
 }
@@ -2449,7 +2449,7 @@ details.ai-lab-model-surface > summary strong {
 
 .geo-image-quality-context {
   margin: 0;
-  border-left: 2px solid #91c5ba;
+  border-left: 2px solid var(--gi-brand-50);
   padding-left: 0.55rem;
   color: var(--muted);
   font-size: 0.7rem;
@@ -2500,9 +2500,9 @@ details.ai-lab-model-surface > summary strong {
   display: grid;
   gap: 0.6rem;
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: var(--gi-radius-sm);
   padding: 0.7rem;
-  background: #ffffff;
+  background: var(--gi-surface);
 }
 
 .detection-review-item-heading {
diff --git a/frontend/src/styles/professionalization.css b/frontend/src/styles/professionalization.css
index c677e7d3..a5fb4293 100644
--- a/frontend/src/styles/professionalization.css
+++ b/frontend/src/styles/professionalization.css
@@ -36,13 +36,13 @@
 }
 
 .context-account-guest {
-  border-color: #9fcfc4;
-  color: #0c5e55;
-  background: linear-gradient(180deg, #f7fffc, #e8f7f3);
+  border-color: var(--gi-brand-50);
+  color: var(--gi-brand-600);
+  background: linear-gradient(180deg, var(--gi-brand-50), var(--gi-brand-50));
 }
 
 .context-account-guest > svg {
-  color: #0d7d6f;
+  color: var(--gi-brand-600);
 }
 
 .workbench-shell-guest .workbench-stage {
@@ -57,18 +57,18 @@
   gap: 0.72rem;
   align-items: center;
   min-width: 0;
-  border-bottom: 1px solid #b7dbd3;
+  border-bottom: 1px solid var(--gi-brand-50);
   padding: 0.68rem 1.35rem;
-  color: #164d47;
+  color: var(--gi-brand-600);
   background:
     radial-gradient(circle at 12% 0%, rgba(57, 172, 151, 0.13), transparent 16rem),
-    linear-gradient(90deg, #edf9f6, #f7fcfa);
+    linear-gradient(90deg, var(--gi-brand-50), var(--gi-brand-50));
 }
 
 .guest-mode-banner > svg {
   width: 1.2rem;
   height: 1.2rem;
-  color: #0f766e;
+  color: var(--gi-brand-600);
 }
 
 .guest-mode-banner > div {
@@ -85,7 +85,7 @@
 
 .guest-mode-banner span:not(.guest-mode-badge) {
   overflow: hidden;
-  color: #52736d;
+  color: var(--gi-ink-600);
   font-size: 0.72rem;
   line-height: 1.4;
   text-overflow: ellipsis;
@@ -93,13 +93,13 @@
 }
 
 .guest-mode-badge {
-  border: 1px solid #9bcfc3;
-  border-radius: 999px;
+  border: 1px solid var(--gi-brand-50);
+  border-radius: var(--gi-radius-pill);
   padding: 0.33rem 0.62rem;
-  color: #0d665b;
-  background: rgba(255, 255, 255, 0.82);
+  color: var(--gi-brand-600);
+  background: color-mix(in srgb, var(--gi-surface) 82%, transparent);
   font-size: 0.66rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.045em;
   text-transform: uppercase;
 }
@@ -112,12 +112,12 @@
   max-width: min(28rem, calc(100vw - 2rem));
   gap: 0.65rem;
   align-items: center;
-  border: 1px solid #b7d9d1;
-  border-radius: 0.85rem;
+  border: 1px solid var(--gi-brand-50);
+  border-radius: var(--gi-radius-lg);
   padding: 0.72rem 0.9rem;
-  color: #164d47;
+  color: var(--gi-brand-600);
   background: rgba(250, 255, 253, 0.97);
-  box-shadow: 0 18px 44px rgba(9, 65, 57, 0.16);
+  box-shadow: var(--gi-shadow-lg);
   backdrop-filter: blur(16px);
 }
 
@@ -125,9 +125,9 @@
   width: 0.85rem;
   height: 0.85rem;
   flex: 0 0 auto;
-  border: 2px solid #b5ddd4;
+  border: 2px solid var(--gi-brand-50);
   border-top-color: #0f766e;
-  border-radius: 999px;
+  border-radius: var(--gi-radius-pill);
   animation: geointel-guest-spin 0.8s linear infinite;
 }
 
@@ -145,9 +145,9 @@
   grid-template-columns: auto minmax(0, 1fr);
   gap: 0.78rem;
   align-items: start;
-  border: 1px solid #b9ddd5;
-  color: #174f48;
-  background: linear-gradient(135deg, #eef9f6, #fbfefd);
+  border: 1px solid var(--gi-brand-50);
+  color: var(--gi-brand-600);
+  background: linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
 }
 
 .geo-guest-preview-note {
@@ -160,7 +160,7 @@
   width: 1.12rem;
   height: 1.12rem;
   margin-top: 0.08rem;
-  color: #0f766e;
+  color: var(--gi-brand-600);
 }
 
 .geo-guest-preview-note > div,
@@ -177,21 +177,21 @@
 
 .geo-guest-preview-note span,
 .guest-readonly-card span {
-  color: #54756f;
+  color: var(--gi-ink-600);
   font-size: 0.72rem;
   line-height: 1.45;
 }
 
 .guest-readonly-card {
-  border-radius: 0.9rem;
+  border-radius: var(--gi-radius-lg);
   padding: 0.9rem 1rem;
-  box-shadow: 0 8px 22px rgba(20, 81, 71, 0.06);
+  box-shadow: var(--gi-shadow-md);
 }
 
 .geo-result-next-actions-readonly {
   grid-template-columns: minmax(0, 1fr);
-  border-color: #b9dcd4;
-  background: #f1faf7;
+  border-color: var(--gi-brand-50);
+  background: var(--gi-brand-50);
 }
 
 .geo-result-next-actions-readonly small {