rebrand theme: throwback → loch, --tb- → --ds-, drop Press Start 2P

Rename the design system from "throwback" to "loch" — a deep-navy design system. CSS variable prefix --tb- → --ds-. Press Start 2P replaced with IBM Plex Mono weight 600 for headings. Same hex colours, same layout, same mood — just a grown-up name. fix #50, fix #51, refs #54
2026-03-21 14:26:41 -04:00
parent cfeb09eff4
commit 5c088b50a8
16 changed files with 881 additions and 904 deletions
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@

 ![coverage](styles/coverage.svg)

-Self-hosted infrastructure stack with GPU support, S3-compatible storage, Git server with container registry, CI/CD, data lakehouse, observability, documentation, and research tools. All services share a unified retro "throwback" theme injected via Traefik middleware.
+Self-hosted infrastructure stack with GPU support, S3-compatible storage, Git server with container registry, CI/CD, data lakehouse, observability, documentation, and research tools. All services share a unified deep-navy design system ("loch") injected via Traefik middleware.

 ## Services

@@ -81,28 +81,28 @@ Routes are defined in `traefik/dynamic/services.yml` using Go templates with Spr
 "gitea" (dict "port" "3000" "theme" true "mw" "secure-headers")
 ```

- **`theme: true`** applies the `inject-throwback` middleware (injects favicon + CSS via HTML rewrite)
+- **`theme: true`** applies the `inject-loch` middleware (injects favicon + CSS via HTML rewrite)
 - **`theme: false`** skips injection (API-only services like Nessie, Polaris, Loki)
 - **`mw`** is a comma-separated list of additional middlewares (`secure-headers`, `local-only`, `infra-headers`)
 - **`subdomain`** overrides the FQDN prefix (e.g. `woodpecker-server` → `ci.homelab.fhirworx.io`)

 To add a new service, add one line to the `$reef` dict and a service block to `compose.yml`.

-### Throwback Theme
+### Loch Design System

-All HTML-serving services get a unified retro theme via the `inject-throwback` Traefik middleware, which uses the [rewrite-body](https://github.com/packruler/rewrite-body) plugin to inject `<link>` tags before `</head>`:
+All HTML-serving services get a unified deep-navy design system via the `inject-loch` Traefik middleware, which uses the [rewrite-body](https://github.com/packruler/rewrite-body) plugin to inject `<link>` tags before `</head>`:

 - **`fav32.png`** — 32x32 PNG favicon served from the dashboard container
- **`throwback.css`** — Global CSS overrides (colors, fonts, borders)
- **`inject.css`** — Served as `throwback.css`, hides service-specific logos and applies the palette
+- **`loch.css`** — Global CSS overrides (colors, fonts, borders)
+- **`inject.css`** — Served as `loch.css`, hides service-specific logos and applies the palette

 Per-service CSS files handle service-specific overrides:

 | File | Purpose |
 |------|---------|
-| `styles/inject.css` | Global throwback palette + logo hiding (served as `throwback.css`) |
+| `styles/inject.css` | Global loch palette + logo hiding (served as `loch.css`) |
 | `styles/dashboard.css` | Dashboard tile grid layout |
-| `styles/gitea.css` | Gitea theme (registered as `throwback` in Gitea UI settings) |
+| `styles/gitea.css` | Gitea theme (registered as `loch` in Gitea UI settings) |
 | `styles/woodpecker.css` | Woodpecker custom CSS (via `WOODPECKER_CUSTOM_CSS_FILE`) |
 | `styles/marimo.css` | Marimo notebook theme |
 | `styles/fav32.png` | 32x32 PNG favicon (canonical, injected by Traefik) |
@@ -173,114 +173,44 @@ EOF
 ```bash
 docker compose up -d postgres rustfs traefik

-# Bootstrap: creates DB roles, databases, derives all credentials, writes .env
+# Bootstrap: creates DB roles, databases, RustFS buckets/users/IAM,
+# derives all 21 credentials, rotates Grafana password, writes .env
 ROOT_KEY=$ROOT_KEY uv run python -m api.auth bootstrap $(git rev-parse HEAD)
 ```

-### 3. Configure RustFS
+Bootstrap automatically handles:
+- PostgreSQL roles and databases (gitea, woodpecker, nessie, polaris)
+- RustFS buckets (`gitea`, `gitea-lfs`, `gitea-packages`, `lakehouse`)
+- RustFS IAM users and per-user policies from `rustfs/policies/`
+- Gitea admin password rotation and API token creation
+- Grafana admin password rotation (non-fatal if unreachable)
+- Woodpecker CI secret provisioning

-1. Access console at `s3console.homelab.fhirworx.io`
-2. Create user `git` with S3 credentials matching `.env`
-3. Create buckets: `gitea`, `gitea-lfs`, `gitea-packages`
-4. Create user `nessie` with S3 credentials matching `.env`
-5. Create bucket: `lakehouse`
-6. Apply IAM policies to users (see below)
-
-**Gitea IAM Policy:**
-
-```json
-{
-  "Version": "2012-10-17",
-  "Statement": [
-    {
-      "Effect": "Allow",
-      "Action": [
-        "s3:GetBucketLocation",
-        "s3:ListBucket",
-        "s3:ListBucketMultipartUploads"
-      ],
-      "Resource": [
-        "arn:aws:s3:::gitea",
-        "arn:aws:s3:::gitea-lfs",
-        "arn:aws:s3:::gitea-packages"
-      ]
-    },
-    {
-      "Effect": "Allow",
-      "Action": [
-        "s3:GetObject",
-        "s3:PutObject",
-        "s3:DeleteObject",
-        "s3:ListMultipartUploadParts",
-        "s3:AbortMultipartUpload"
-      ],
-      "Resource": [
-        "arn:aws:s3:::gitea/*",
-        "arn:aws:s3:::gitea-lfs/*",
-        "arn:aws:s3:::gitea-packages/*"
-      ]
-    }
-  ]
-}
-```
-
-**Nessie IAM Policy:**
-
-```json
-{
-  "Version": "2012-10-17",
-  "Statement": [
-    {
-      "Effect": "Allow",
-      "Action": [
-        "s3:GetBucketLocation",
-        "s3:ListBucket",
-        "s3:ListBucketMultipartUploads"
-      ],
-      "Resource": ["arn:aws:s3:::lakehouse"]
-    },
-    {
-      "Effect": "Allow",
-      "Action": [
-        "s3:GetObject",
-        "s3:PutObject",
-        "s3:DeleteObject",
-        "s3:ListMultipartUploadParts",
-        "s3:AbortMultipartUpload"
-      ],
-      "Resource": ["arn:aws:s3:::lakehouse/*"]
-    }
-  ]
-}
-```
-
-### 4. Start All Services
+### 3. Start All Services

 ```bash
 docker compose up -d
 ```

-### 5. Configure Gitea
+### 4. Configure Gitea

 1. Complete initial setup at `gitea.homelab.fhirworx.io`
 2. Create organization `homelab`
 3. Create repository `stack`
-4. Generate API token for container registry access
-5. Create OAuth2 application for Woodpecker:
+4. Create OAuth2 application for Woodpecker:
   - Name: `Woodpecker CI`
   - Redirect URI: `http://ci.homelab.fhirworx.io/authorize`
   - Copy Client ID and Secret to `.env`

-### 6. Configure Woodpecker Secrets
+### 5. Configure Woodpecker Root Key

-Add secrets in Woodpecker UI (`ci.homelab.fhirworx.io`):
+Add one secret in Woodpecker UI (`ci.homelab.fhirworx.io`):
 - `root_key` — The hex-encoded root key (enables auto-rotation on every deploy)
 - `registry_user` — Gitea username
- `registry_pass` — Gitea token
- `s3_access_key` — RustFS access key
- `s3_secret_key` — RustFS secret key

-### 7. Verify Services
+All other Woodpecker secrets (`registry_pass`, `s3_access_key`, `s3_secret_key`, `gitea_token`, `gitea_url`) are provisioned automatically by `bootstrap` and rotated on each deploy by `provision`.
+
+### 6. Verify Services

 ```bash
 # Check Traefik routes
@@ -346,7 +276,7 @@ The derivation uses two tiers:
 | **Bootstrap** | `b"bootstrap"` | Only when root key changes | Superuser passwords, OAuth2 app |
 | **Service** | `commit_sha` | Every deploy | DB passwords, S3 keys, API tokens |

-### Managed Credentials (18 derived, 2 skipped)
+### Managed Credentials (19 derived, 2 skipped)

 | Variable | Tier | Format | Backend |
 |----------|------|--------|---------|
@@ -359,8 +289,9 @@ The derivation uses two tiers:
 | `RUSTFS_SECRET_KEY` | Service | hex | env only |
 | `GITEA_S3_*`, `NESSIE_S3_*`, `POLARIS_S3_*` | Service | hex | env only (aliases of RUSTFS) |
 | `WOODPECKER_AGENT_SECRET` | Service | hex | env only |
+| `STACK_API_SECRET` | Service | hex | env only |
 | `POLARIS_ROOT_SECRET` | Service | password | env only |
-| `GF_ADMIN_PASSWORD` | Service | password | env only |
+| `GF_ADMIN_PASSWORD` | Service | password | Grafana (admin API) |
 | `GITEA_ADMIN_PASSWORD` | Service | password | Gitea (change-password) |
 | `GITEA_TOKEN` | Service | — | Gitea (API token) |

@@ -381,7 +312,15 @@ ROOT_KEY=$KEY uv run python -m api.auth derive $COMMIT_SHA --redact

 ### Auto-Rotation via CI

-The `provision` step in `.woodpecker/deploy.yml` runs after every deploy, deriving fresh service-tier credentials from the commit SHA and rotating PostgreSQL passwords and Gitea tokens automatically.
+The `provision` step in `.woodpecker/deploy.yml` runs after every deploy, deriving fresh service-tier credentials from the commit SHA and rotating PostgreSQL passwords, Gitea tokens, Grafana admin password, and Woodpecker CI secrets automatically.
+
+### Troubleshooting
+
+**CI provision step fails with `No module named 'api'`**: The provision step needs `UV_PROJECT_ENVIRONMENT: .venv` and `UV_LINK_MODE: copy` in its environment block (matching the CI pipeline pattern). Without these, `uv run` creates a fresh venv in the CI container and doesn't find the installed project.
+
+**Grafana password rotation fails**: This is non-fatal — bootstrap/provision will log a warning but continue. Check that Grafana is running and reachable at its internal URL. On first bootstrap with default `admin`/`admin` credentials, rotation should succeed. On subsequent provisions, the old password is read from `.env` before overwrite.
+
+**RustFS bucket creation fails**: Ensure RustFS is running and the `RUSTFS_ACCESS_KEY`/`RUSTFS_SECRET_KEY` in `.env` match the root credentials configured in the RustFS container environment.

 ## Documentation Site

@@ -468,9 +407,9 @@ stack/
 ├── .env                         # Environment variables (not in git)
 ├── README.md
 ├── styles/                         # Centralized theme assets
-│   ├── inject.css               # Global throwback CSS (served as throwback.css)
+│   ├── inject.css               # Global loch CSS (served as loch.css)
 │   ├── dashboard.css            # Dashboard tile grid
-│   ├── gitea.css                # Gitea throwback theme
+│   ├── gitea.css                # Gitea loch theme
 │   ├── woodpecker.css           # Woodpecker custom CSS
 │   ├── marimo.css               # Marimo notebook theme
 │   ├── fav32.png                # 32x32 PNG favicon (canonical, injected by Traefik)
@@ -551,8 +490,8 @@ Custom images use the `fhirworx/<svc>:<sha>` naming convention locally. The regi
 echo "<GITEA_TOKEN>" | docker login localhost:3000 -u <username> --password-stdin

 # Tag and push
-docker tag fhirworx/<svc>:latest localhost:3000/fhirworx/<svc>:latest
-docker push localhost:3000/fhirworx/<svc>:latest
+docker tag fhirworx/<svc>:latest localhost:3000/homelab/<svc>:latest
+docker push localhost:3000/homelab/<svc>:latest
 ```

 Custom images: `notebooks`, `zotero`, `docs`. Compose resolves `fhirworx/<svc>:${COMMIT_SHA:-latest}`.
--- a/compose.yml
+++ b/compose.yml
@@ -110,13 +110,13 @@ services:
      - GITEA__server__ROOT_URL=http://gitea.${DOMAIN:-homelab.fhirworx.io}/
      - GITEA__server__SSH_DOMAIN=${DOMAIN:-homelab.fhirworx.io}
      - GITEA__webhook__ALLOWED_HOST_LIST=woodpecker-server,ci.${DOMAIN:-homelab.fhirworx.io},${HOST_IP:-192.168.1.192},172.19.0.0/16
-      - GITEA__ui__THEMES=gitea-auto,gitea-light,gitea-dark,throwback
-      - GITEA__ui__DEFAULT_THEME=throwback
+      - GITEA__ui__THEMES=gitea-auto,gitea-light,gitea-dark,loch
+      - GITEA__ui__DEFAULT_THEME=loch
    volumes:
      - gitea_data:/var/lib/gitea
      - gitea_config:/etc/gitea
      - ./gitea/custom:/var/lib/gitea/custom
-      - ./styles/gitea.css:/var/lib/gitea/custom/public/assets/css/theme-throwback.css:ro
+      - ./styles/gitea.css:/var/lib/gitea/custom/public/assets/css/theme-loch.css:ro
    ports:
      - "2222:2222"
      - "3000:3000"
@@ -186,7 +186,7 @@ services:
    volumes:
      - ./notebooks:/home/kert/notebooks
      - ./notebooks/.marimo-config:/home/kert/.config/marimo
-      - ./styles/marimo.css:/home/kert/.config/marimo/retro-arcade.css:ro
+      - ./styles/marimo.css:/home/kert/.config/marimo/loch.css:ro
      - ./notebooks/home-page-DUMF8ZY4.js:/home/kert/workspace/.venv/lib/python3.13/site-packages/marimo/_static/assets/home-page-DUMF8ZY4.js:ro
      - ./data:/home/kert/data
      - ./zotero/data:/home/kert/zotero:ro
@@ -336,7 +336,7 @@ services:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
      - ./nginx/index.html:/usr/share/nginx/html/index.html:ro
      - ./styles/dashboard.css:/usr/share/nginx/html/dashboard.css:ro
-      - ./styles/inject.css:/usr/share/nginx/html/throwback.css:ro
+      - ./styles/inject.css:/usr/share/nginx/html/loch.css:ro
      - ./styles/fav32.png:/usr/share/nginx/html/fav32.png:ro
    security_opt:
      - no-new-privileges:true
@@ -349,6 +349,38 @@ services:
      - gateway
    restart: unless-stopped

+  api:
+    image: fhirworx/api:${COMMIT_SHA:-latest}
+    container_name: api
+    networks:
+      - gateway
+      - storage
+      - data
+      - observability
+    environment:
+      - STACK_API_SECRET=${STACK_API_SECRET}
+      - GITEA_TOKEN=${GITEA_TOKEN}
+      # Postgres
+      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD:-changeme}
+      # S3 / RustFS
+      - NESSIE_S3_ACCESS_KEY=${NESSIE_S3_ACCESS_KEY}
+      - NESSIE_S3_SECRET_KEY=${NESSIE_S3_SECRET_KEY}
+      - S3_ENDPOINT=${S3_ENDPOINT:-http://rustfs:9000}
+      - S3_REGION=${S3_REGION:-us-east-1}
+      - S3_WAREHOUSE=${S3_WAREHOUSE:-s3://lakehouse/}
+      # OpenTelemetry
+      - OTEL_SERVICE_NAME=api
+      - OTEL_EXPORTER_OTLP_ENDPOINT=http://jaeger:4317
+    volumes:
+      - ./data:/app/data
+    depends_on:
+      - postgres
+      - rustfs
+      - nessie
+    security_opt:
+      - no-new-privileges:true
+    restart: unless-stopped
+
  # Observability Stack
  jaeger:
    image: jaegertracing/all-in-one:latest
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -1,4 +1,4 @@
-/* Throwback palette — matches styles/inject.css */
+/* LOCH — deep-navy design system — matches styles/inject.css */

 :root {
  --ifm-color-primary: #3366cc;
--- a/gitea/custom/templates/home.tmpl
+++ b/gitea/custom/templates/home.tmpl
@@ -11,7 +11,7 @@
    border-bottom: 4px solid var(--color-red);
 }
 .homelab-dashboard .hdr h1 {
-    font-family: 'Press Start 2P', monospace !important;
+    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 2rem !important;
    color: var(--color-text) !important;
    letter-spacing: 6px !important;
@@ -20,7 +20,7 @@
    border: none !important;
 }
 .homelab-dashboard .subtitle {
-    font-family: 'Press Start 2P', monospace;
+    font-family: 'IBM Plex Mono', monospace;
    color: var(--color-primary);
    font-size: 0.55rem;
    margin-top: 15px;
@@ -31,7 +31,7 @@
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
-    font-family: 'Press Start 2P', monospace;
+    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.5rem;
 }
 .homelab-dashboard .score-item {
@@ -81,7 +81,7 @@
 .homelab-dashboard .tile.logs .icon { color: var(--color-primary-light-1); }
 .homelab-dashboard .tile.proxy .icon { color: var(--color-text); }
 .homelab-dashboard .tile-title {
-    font-family: 'Press Start 2P', monospace !important;
+    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 0.7rem !important;
    color: var(--color-text) !important;
    margin-bottom: 10px;
@@ -119,7 +119,7 @@
    position: absolute;
    top: -1px;
    left: 20px;
-    font-family: 'Press Start 2P', monospace;
+    font-family: 'IBM Plex Mono', monospace;
    color: var(--color-text);
    font-size: 0.35rem;
    padding: 4px 8px;
--- a/notebooks/.marimo-config/retro-arcade.css
+++ b/notebooks/.marimo-config/retro-arcade.css
@@ -1,7 +1,7 @@
-/* THROWBACK THEME - Tecmo Super Bowl */
+/* LOCH — deep-navy design system */
 /* Uses marimo's native CSS variable system for proper theming */

-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

 /* ============================================
   FONT CONFIGURATION
@@ -9,30 +9,30 @@
 :root {
  --marimo-monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
  --marimo-text-font: 'IBM Plex Mono', 'Courier New', monospace;
-  --marimo-heading-font: 'Press Start 2P', 'IBM Plex Mono', monospace;
+  --marimo-heading-font: 'IBM Plex Mono', monospace;
 }

 /* ============================================
-   THROWBACK COLOR PALETTE
+   LOCH COLOR PALETTE
   ============================================ */
 :root {
-  --tb-navy: #0a1628;
-  --tb-navy-light: #162040;
-  --tb-navy-mid: #1e2d50;
-  --tb-slate: #2a3f5f;
-  --tb-steel: #8a9fbb;
-  --tb-white: #f0f0f0;
+  --ds-navy: #0a1628;
+  --ds-navy-light: #162040;
+  --ds-navy-mid: #1e2d50;
+  --ds-slate: #2a3f5f;
+  --ds-steel: #8a9fbb;
+  --ds-white: #f0f0f0;

-  --tb-blue: #4477dd;
-  --tb-blue-light: #6699ee;
-  --tb-blue-bright: #99bbff;
+  --ds-blue: #4477dd;
+  --ds-blue-light: #6699ee;
+  --ds-blue-bright: #99bbff;

-  --tb-red: #cc2244;
-  --tb-red-light: #ee6688;
+  --ds-red: #cc2244;
+  --ds-red-light: #ee6688;

-  --tb-green: #44aa44;
-  --tb-green-light: #77dd77;
-  --tb-yellow: #eebb44;
+  --ds-green: #44aa44;
+  --ds-green-light: #77dd77;
+  --ds-yellow: #eebb44;
 }

 /* ============================================
@@ -40,39 +40,39 @@
   ============================================ */
 :root {
  /* Base colors */
-  --background: var(--tb-navy);
-  --foreground: var(--tb-white);
+  --background: var(--ds-navy);
+  --foreground: var(--ds-white);

  /* Muted/secondary text */
-  --muted: var(--tb-navy-light);
-  --muted-foreground: var(--tb-steel);
+  --muted: var(--ds-navy-light);
+  --muted-foreground: var(--ds-steel);

  /* Popover/dropdown backgrounds */
-  --popover: var(--tb-navy-light);
-  --popover-foreground: var(--tb-white);
+  --popover: var(--ds-navy-light);
+  --popover-foreground: var(--ds-white);

  /* Cards (cells) */
-  --card: var(--tb-navy);
-  --card-foreground: var(--tb-white);
+  --card: var(--ds-navy);
+  --card-foreground: var(--ds-white);

  /* Borders and inputs */
-  --border: var(--tb-slate);
-  --input: var(--tb-navy-mid);
+  --border: var(--ds-slate);
+  --input: var(--ds-navy-mid);

  /* Primary action color */
-  --primary: var(--tb-blue);
-  --primary-foreground: var(--tb-white);
+  --primary: var(--ds-blue);
+  --primary-foreground: var(--ds-white);

  /* Secondary elements */
-  --secondary: var(--tb-slate);
-  --secondary-foreground: var(--tb-white);
+  --secondary: var(--ds-slate);
+  --secondary-foreground: var(--ds-white);

  /* Accent/highlight */
-  --accent: var(--tb-blue-light);
-  --accent-foreground: var(--tb-white);
+  --accent: var(--ds-blue-light);
+  --accent-foreground: var(--ds-white);

  /* Focus ring */
-  --ring: var(--tb-blue-light);
+  --ring: var(--ds-blue-light);
 }

 /* ============================================
@@ -80,23 +80,23 @@
   ============================================ */
 :root {
  /* Error states */
-  --destructive: var(--tb-red);
-  --destructive-foreground: var(--tb-white);
-  --error: var(--tb-red);
-  --error-foreground: var(--tb-white);
+  --destructive: var(--ds-red);
+  --destructive-foreground: var(--ds-white);
+  --error: var(--ds-red);
+  --error-foreground: var(--ds-white);

  /* Success states */
-  --success: var(--tb-green);
-  --success-foreground: var(--tb-white);
+  --success: var(--ds-green);
+  --success-foreground: var(--ds-white);

  /* Action buttons (run, etc) */
-  --action: var(--tb-green);
-  --action-hover: var(--tb-green-light);
-  --action-foreground: var(--tb-white);
+  --action: var(--ds-green);
+  --action-hover: var(--ds-green-light);
+  --action-foreground: var(--ds-white);

  /* Links */
-  --link: var(--tb-blue-bright);
-  --link-visited: var(--tb-blue-light);
+  --link: var(--ds-blue-bright);
+  --link-visited: var(--ds-blue-light);

  /* Stale indicator */
  --stale: rgba(221, 170, 51, 0.25);
@@ -122,7 +122,7 @@
 }

 body {
-  background: var(--tb-navy) !important;
+  background: var(--ds-navy) !important;
 }

 /* ============================================
@@ -131,7 +131,7 @@ body {
 .cm-editor {
  font-family: var(--marimo-monospace-font) !important;
  font-size: 14px !important;
-  background: var(--tb-navy) !important;
+  background: var(--ds-navy) !important;
 }

 .cm-content {
@@ -140,43 +140,43 @@ body {

 .cm-line {
  font-family: var(--marimo-monospace-font) !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 .cm-gutters {
-  background: var(--tb-navy-light) !important;
-  border-right: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-right: 2px solid var(--ds-slate) !important;
 }

 .cm-lineNumbers .cm-gutterElement {
-  color: var(--tb-steel) !important;
+  color: var(--ds-steel) !important;
  font-family: var(--marimo-monospace-font) !important;
  font-size: 12px !important;
 }

 /* Syntax highlighting */
-.cm-keyword, .tok-keyword { color: var(--tb-blue-bright) !important; }
-.cm-string, .tok-string { color: var(--tb-green-light) !important; }
-.cm-number, .tok-number { color: var(--tb-yellow) !important; }
-.cm-comment, .tok-comment { color: var(--tb-steel) !important; font-style: italic !important; }
-.cm-function, .tok-function { color: var(--tb-white) !important; }
-.cm-variableName, .tok-variableName { color: var(--tb-white) !important; }
-.cm-operator, .tok-operator { color: var(--tb-blue-light) !important; }
-.cm-propertyName, .tok-propertyName { color: var(--tb-blue-bright) !important; }
-.tok-standard, .cm-builtin { color: var(--tb-red-light) !important; }
-.tok-definition, .cm-def { color: var(--tb-blue-bright) !important; }
-.tok-typeName { color: var(--tb-yellow) !important; }
-.tok-bool { color: var(--tb-red-light) !important; }
+.cm-keyword, .tok-keyword { color: var(--ds-blue-bright) !important; }
+.cm-string, .tok-string { color: var(--ds-green-light) !important; }
+.cm-number, .tok-number { color: var(--ds-yellow) !important; }
+.cm-comment, .tok-comment { color: var(--ds-steel) !important; font-style: italic !important; }
+.cm-function, .tok-function { color: var(--ds-white) !important; }
+.cm-variableName, .tok-variableName { color: var(--ds-white) !important; }
+.cm-operator, .tok-operator { color: var(--ds-blue-light) !important; }
+.cm-propertyName, .tok-propertyName { color: var(--ds-blue-bright) !important; }
+.tok-standard, .cm-builtin { color: var(--ds-red-light) !important; }
+.tok-definition, .cm-def { color: var(--ds-blue-bright) !important; }
+.tok-typeName { color: var(--ds-yellow) !important; }
+.tok-bool { color: var(--ds-red-light) !important; }

 /* Cursor */
 .cm-cursor {
-  border-left: 2px solid var(--tb-white) !important;
+  border-left: 2px solid var(--ds-white) !important;
 }

 /* Selection */
 .cm-selectionBackground,
 ::selection {
-  background: var(--tb-blue) !important;
+  background: var(--ds-blue) !important;
 }

 /* Active line */
@@ -189,29 +189,30 @@ body {
   ============================================ */
 h1, h2, h3, h4, h5, h6 {
  font-family: var(--marimo-heading-font) !important;
+  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.8 !important;
 }

 h1 {
  font-size: 18px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }
 h2 {
  font-size: 14px !important;
-  color: var(--tb-blue-bright) !important;
+  color: var(--ds-blue-bright) !important;
 }
 h3 {
  font-size: 12px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }
 h4, h5, h6 {
  font-size: 11px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 /* ============================================
-   TABLES (Scoreboard style)
+   TABLES (Table styling)
   ============================================ */
 table {
  border-collapse: collapse !important;
@@ -219,26 +220,26 @@ table {
 }

 th {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
  font-family: var(--marimo-heading-font) !important;
  font-size: 10px !important;
  padding: 10px 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
-  border: 1px solid var(--tb-blue-light) !important;
+  border: 1px solid var(--ds-blue-light) !important;
 }

 td {
-  background: var(--tb-navy) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy) !important;
+  color: var(--ds-white) !important;
  padding: 8px 12px !important;
-  border: 1px solid var(--tb-navy-light) !important;
+  border: 1px solid var(--ds-navy-light) !important;
  font-size: 13px !important;
 }

 tr:nth-child(even) td {
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }

 tr:hover td {
@@ -261,15 +262,15 @@ button,
 button[data-variant="primary"],
 button.primary,
 [data-action="run"] {
-  background: var(--tb-green) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-green-light) !important;
+  background: var(--ds-green) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-green-light) !important;
 }

 button[data-variant="primary"]:hover,
 button.primary:hover,
 [data-action="run"]:hover {
-  background: var(--tb-green-light) !important;
+  background: var(--ds-green-light) !important;
 }

 /* ============================================
@@ -279,9 +280,9 @@ input,
 textarea,
 select {
  font-family: var(--marimo-monospace-font) !important;
-  background: var(--tb-navy-mid) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-mid) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
 }
@@ -289,7 +290,7 @@ select {
 input:focus,
 textarea:focus,
 select:focus {
-  border-color: var(--tb-blue-light) !important;
+  border-color: var(--ds-blue-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
 }
@@ -302,16 +303,16 @@ pre, code {
 }

 code {
-  background: var(--tb-navy-light) !important;
-  color: var(--tb-blue-bright) !important;
+  background: var(--ds-navy-light) !important;
+  color: var(--ds-blue-bright) !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-size: 0.9em !important;
 }

 pre {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
  padding: 12px !important;
 }
@@ -325,18 +326,18 @@ pre code {
   LINKS
   ============================================ */
 a {
-  color: var(--tb-blue-bright) !important;
+  color: var(--ds-blue-bright) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
 }

 a:hover {
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
  text-decoration: underline !important;
 }

 a:visited {
-  color: var(--tb-blue-light) !important;
+  color: var(--ds-blue-light) !important;
 }

 /* ============================================
@@ -348,17 +349,17 @@ a:visited {
 }

 ::-webkit-scrollbar-track {
-  background: var(--tb-navy-light);
+  background: var(--ds-navy-light);
 }

 ::-webkit-scrollbar-thumb {
-  background: var(--tb-slate);
+  background: var(--ds-slate);
  border-radius: 6px;
-  border: 2px solid var(--tb-navy-light);
+  border: 2px solid var(--ds-navy-light);
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: var(--tb-steel);
+  background: var(--ds-steel);
 }

 /* ============================================
@@ -370,17 +371,17 @@ a:visited {
 [data-state="open"][data-side] {
  font-family: var(--marimo-monospace-font) !important;
  font-size: 12px !important;
-  background: var(--tb-navy-light) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

 /* Dropdown menus */
 [role="menu"],
 [role="listbox"] {
-  background: var(--tb-navy-light) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

@@ -388,8 +389,8 @@ a:visited {
 [role="option"]:hover,
 [role="menuitem"][data-highlighted],
 [role="option"][data-highlighted] {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
 }

 /* Badges and pills */
@@ -403,7 +404,7 @@ a:visited {

 /* Focus visible for accessibility */
 :focus-visible {
-  outline: 2px solid var(--tb-blue-light) !important;
+  outline: 2px solid var(--ds-blue-light) !important;
  outline-offset: 2px !important;
 }

@@ -413,7 +414,7 @@ a:visited {
 [data-testid="outputs"],
 .output-area {
  background: rgba(22, 32, 64, 0.5) !important;
-  border-top: 2px solid var(--tb-slate) !important;
+  border-top: 2px solid var(--ds-slate) !important;
  padding: 12px !important;
 }

@@ -433,20 +434,20 @@ svg {
   HOME PAGE - "CREATE NEW NOTEBOOK" CARD
   ============================================ */
 a[rel="noreferrer"][target="_blank"] {
-  background: var(--tb-navy-light) !important;
-  border: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 3px solid var(--ds-slate) !important;
  border-radius: 0 !important;
 }

 a[rel="noreferrer"][target="_blank"]:hover {
-  border-color: var(--tb-blue) !important;
-  background: var(--tb-navy-mid) !important;
+  border-color: var(--ds-blue) !important;
+  background: var(--ds-navy-mid) !important;
 }

 a[rel="noreferrer"][target="_blank"] h2 {
  font-family: var(--marimo-heading-font) !important;
  font-size: 12px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
 }
@@ -459,30 +460,30 @@ h2.text-xl {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
  padding-bottom: 6px;
-  border-bottom: 2px solid var(--tb-slate);
+  border-bottom: 2px solid var(--ds-slate);
 }

 /* ============================================
   HOME PAGE - FILE LISTS (notebook lists)
   ============================================ */
 .divide-y.border.rounded {
-  border: 3px solid var(--tb-slate) !important;
+  border: 3px solid var(--ds-slate) !important;
  border-radius: 0 !important;
-  background: var(--tb-navy) !important;
+  background: var(--ds-navy) !important;
 }

 .divide-y.border > a,
 .divide-y.border > div > a {
-  border-color: var(--tb-navy-light) !important;
+  border-color: var(--ds-navy-light) !important;
  transition: all 0.1s ease !important;
 }

 .divide-y.border > a:hover,
 .divide-y.border > div > a:hover {
  background: rgba(51, 102, 204, 0.2) !important;
-  border-left: 3px solid var(--tb-blue) !important;
+  border-left: 3px solid var(--ds-blue) !important;
 }

 .divide-y.border a .flex-1 span {
@@ -502,7 +503,7 @@ h2.text-xl {
 }

 /* ============================================
-   PIXEL-PERFECT BORDERS
+   BORDERS
   ============================================ */
 .rounded-lg,
 .rounded-md {
@@ -518,33 +519,33 @@ h2.text-xl {
   TOP BAR / ACTION BUTTONS
   ============================================ */
 .absolute.top-3.right-5 button {
-  border: 2px solid var(--tb-slate) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 0 !important;
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }

 .absolute.top-3.right-5 button:hover {
-  background: var(--tb-blue) !important;
-  border-color: var(--tb-blue-light) !important;
+  background: var(--ds-blue) !important;
+  border-color: var(--ds-blue-light) !important;
 }

 /* ============================================
   SEARCH INPUT
   ============================================ */
 input#search {
-  border: 3px solid var(--tb-slate) !important;
+  border: 3px solid var(--ds-slate) !important;
  border-radius: 0 !important;
-  background: var(--tb-navy) !important;
+  background: var(--ds-navy) !important;
  font-family: var(--marimo-monospace-font) !important;
 }

 input#search:focus {
-  border-color: var(--tb-blue-light) !important;
+  border-color: var(--ds-blue-light) !important;
  box-shadow: 0 0 8px rgba(85, 136, 221, 0.3) !important;
 }

 /* ============================================
-   BUTTON PRESS EFFECT
+   BUTTON STATES
   ============================================ */
 button:active,
 [role="button"]:active {
--- a/notebooks/.marimo-config/marimo.toml
+++ b/notebooks/.marimo-config/marimo.toml
@@ -55,7 +55,7 @@ theme = "dark"
 default_table_page_size = 10
 default_table_max_columns = 50
 reference_highlighting = true
-custom_css = ["/home/kert/.config/marimo/retro-arcade.css"]
+custom_css = ["/home/kert/.config/marimo/loch.css"]
 code_editor_font_size = 14

 [keymap]
--- a/notebooks/.marimo.toml
+++ b/notebooks/.marimo.toml
@@ -1,3 +1,3 @@
 [display]
 theme = "dark"
-custom_css = ["/home/kert/.config/marimo/retro-arcade.css"]
+custom_css = ["/home/kert/.config/marimo/loch.css"]
--- a/notebooks/Dockerfile
+++ b/notebooks/Dockerfile
@@ -46,7 +46,7 @@ RUN uv python install ${PYTHON_VERSION} \
 # Create marimo config directory and config
 RUN mkdir -p /home/${USERNAME}/.config/marimo
 COPY --chown=${USER_UID}:${USER_GID} .marimo.toml /home/${USERNAME}/.config/marimo/marimo.toml
-COPY --chown=${USER_UID}:${USER_GID} .marimo-config/retro-arcade.css /home/${USERNAME}/.config/marimo/retro-arcade.css
+COPY --chown=${USER_UID}:${USER_GID} .marimo-config/loch.css /home/${USERNAME}/.config/marimo/loch.css

 EXPOSE 2718

--- a/styles/dashboard.css
+++ b/styles/dashboard.css
@@ -1,21 +1,20 @@
-/* THROWBACK THEME — Dashboard (nginx landing page)
-   Extracted from nginx/index.html inline styles */
+/* LOCH — deep-navy design system for Dashboard (nginx landing page) */

-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

 :root {
-    --tb-navy: #0a1628;
-    --tb-navy-light: #162040;
-    --tb-navy-mid: #1e2d50;
-    --tb-slate: #2a3f5f;
-    --tb-steel: #5a7090;
-    --tb-white: #f0f0f0;
-    --tb-blue: #3366cc;
-    --tb-blue-light: #5588dd;
-    --tb-blue-bright: #88aaee;
-    --tb-red: #cc2244;
-    --tb-red-light: #dd4466;
-    --tb-green: #44aa44;
+    --ds-navy: #0a1628;
+    --ds-navy-light: #162040;
+    --ds-navy-mid: #1e2d50;
+    --ds-slate: #2a3f5f;
+    --ds-steel: #5a7090;
+    --ds-white: #f0f0f0;
+    --ds-blue: #3366cc;
+    --ds-blue-light: #5588dd;
+    --ds-blue-bright: #88aaee;
+    --ds-red: #cc2244;
+    --ds-red-light: #dd4466;
+    --ds-green: #44aa44;
 }

 * {
@@ -26,10 +25,10 @@

 body {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
-    background: var(--tb-navy);
+    background: var(--ds-navy);
    min-height: 100vh;
    overflow-x: hidden;
-    color: var(--tb-white);
+    color: var(--ds-white);
 }

 .container {
@@ -41,20 +40,21 @@ body {
 header {
    text-align: center;
    padding: 40px 20px;
-    border-bottom: 4px solid var(--tb-red);
+    border-bottom: 4px solid var(--ds-red);
 }

 h1 {
-    font-family: 'Press Start 2P', monospace;
+    font-family: 'IBM Plex Mono', monospace;
+    font-weight: 600;
    font-size: 2rem;
-    color: var(--tb-white);
+    color: var(--ds-white);
    letter-spacing: 6px;
-    text-shadow: 3px 3px 0 var(--tb-navy-mid);
+    text-shadow: 3px 3px 0 var(--ds-navy-mid);
 }

 .subtitle {
-    font-family: 'Press Start 2P', monospace;
-    color: var(--tb-blue-bright);
+    font-family: 'IBM Plex Mono', monospace;
+    color: var(--ds-blue-bright);
    font-size: 0.55rem;
    margin-top: 15px;
    letter-spacing: 2px;
@@ -65,15 +65,15 @@ h1 {
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
-    font-family: 'Press Start 2P', monospace;
+    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.5rem;
 }

 .score-item {
-    color: var(--tb-white);
-    background: var(--tb-blue);
+    color: var(--ds-white);
+    background: var(--ds-blue);
    padding: 6px 14px;
-    border: 2px solid var(--tb-blue-light);
+    border: 2px solid var(--ds-blue-light);
 }

 .grid {
@@ -85,8 +85,8 @@ h1 {
 }

 .tile {
-    background: var(--tb-navy-light);
-    border: 3px solid var(--tb-slate);
+    background: var(--ds-navy-light);
+    border: 3px solid var(--ds-slate);
    padding: 25px;
    position: relative;
    overflow: hidden;
@@ -97,8 +97,8 @@ h1 {
 }

 .tile:hover {
-    border-color: var(--tb-blue);
-    background: var(--tb-navy-mid);
+    border-color: var(--ds-blue);
+    background: var(--ds-navy-mid);
 }

 /* All tile variants use the same base style */
@@ -109,36 +109,36 @@ h1 {
 }

 .tile.storage .icon,
-.tile.database .icon { color: var(--tb-red); }
-.tile.git .icon { color: var(--tb-blue-bright); }
-.tile.ci .icon { color: var(--tb-blue-light); }
+.tile.database .icon { color: var(--ds-red); }
+.tile.git .icon { color: var(--ds-blue-bright); }
+.tile.ci .icon { color: var(--ds-blue-light); }
 .tile.notebook .icon,
-.tile.research .icon { color: var(--tb-white); }
-.tile.catalog .icon { color: var(--tb-blue-bright); }
-.tile.query .icon { color: var(--tb-blue-light); }
-.tile.observability .icon { color: var(--tb-red-light); }
-.tile.metrics .icon { color: var(--tb-blue-bright); }
-.tile.logs .icon { color: var(--tb-blue-light); }
-.tile.proxy .icon { color: var(--tb-white); }
+.tile.research .icon { color: var(--ds-white); }
+.tile.catalog .icon { color: var(--ds-blue-bright); }
+.tile.query .icon { color: var(--ds-blue-light); }
+.tile.observability .icon { color: var(--ds-red-light); }
+.tile.metrics .icon { color: var(--ds-blue-bright); }
+.tile.logs .icon { color: var(--ds-blue-light); }
+.tile.proxy .icon { color: var(--ds-white); }

 .tile-title {
-    font-family: 'Press Start 2P', monospace;
+    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
-    color: var(--tb-white);
+    color: var(--ds-white);
    margin-bottom: 10px;
    letter-spacing: 1px;
 }

 .tile-desc {
    font-size: 0.75rem;
-    color: var(--tb-steel);
+    color: var(--ds-steel);
    line-height: 1.6;
    margin-bottom: 15px;
 }

 .tile-port {
    font-size: 0.7rem;
-    color: var(--tb-blue-bright);
+    color: var(--ds-blue-bright);
    display: inline-block;
 }

@@ -148,7 +148,7 @@ h1 {
    right: 15px;
    width: 10px;
    height: 10px;
-    background: var(--tb-green);
+    background: var(--ds-green);
    border-radius: 50%;
 }

@@ -158,20 +158,20 @@ h1 {
    left: 0;
    right: 0;
    height: 3px;
-    background: var(--tb-red);
+    background: var(--ds-red);
 }

 footer {
    text-align: center;
    padding: 40px;
-    color: var(--tb-slate);
+    color: var(--ds-slate);
    font-size: 0.7rem;
-    border-top: 3px solid var(--tb-slate);
+    border-top: 3px solid var(--ds-slate);
    margin-top: 20px;
 }

 footer span {
-    color: var(--tb-red);
+    color: var(--ds-red);
 }

 /* Badges */
@@ -179,14 +179,14 @@ footer span {
    position: absolute;
    top: -1px;
    left: 20px;
-    font-family: 'Press Start 2P', monospace;
-    color: var(--tb-white);
+    font-family: 'IBM Plex Mono', monospace;
+    color: var(--ds-white);
    font-size: 0.35rem;
    padding: 4px 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
 }

-.badge.new { background: var(--tb-red); }
-.badge.gpu { background: var(--tb-blue); }
-.badge.data { background: var(--tb-blue); }
+.badge.new { background: var(--ds-red); }
+.badge.gpu { background: var(--ds-blue); }
+.badge.data { background: var(--ds-blue); }
--- a/styles/gitea.css
+++ b/styles/gitea.css
@@ -1,81 +1,81 @@
-/* THROWBACK THEME FOR GITEA - Tecmo Super Bowl */
+/* LOCH — deep-navy design system for Gitea */

-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

 /* Theme metadata */
 gitea-theme-meta-info {
-  --theme-display-name: "Throwback";
+  --theme-display-name: "Loch";
 }

 :root {
  --is-dark-theme: true;

-  /* Throwback Color Palette */
-  --tb-navy: #0a1628;
-  --tb-navy-light: #162040;
-  --tb-navy-mid: #1e2d50;
-  --tb-slate: #2a3f5f;
-  --tb-steel: #5a7090;
-  --tb-white: #f0f0f0;
+  /* Loch Color Palette */
+  --ds-navy: #0a1628;
+  --ds-navy-light: #162040;
+  --ds-navy-mid: #1e2d50;
+  --ds-slate: #2a3f5f;
+  --ds-steel: #5a7090;
+  --ds-white: #f0f0f0;

-  --tb-blue: #3366cc;
-  --tb-blue-light: #5588dd;
-  --tb-blue-bright: #88aaee;
+  --ds-blue: #3366cc;
+  --ds-blue-light: #5588dd;
+  --ds-blue-bright: #88aaee;

-  --tb-red: #cc2244;
-  --tb-red-light: #dd4466;
+  --ds-red: #cc2244;
+  --ds-red-light: #dd4466;

-  --tb-green: #44aa44;
-  --tb-green-light: #66cc66;
-  --tb-yellow: #ddaa33;
+  --ds-green: #44aa44;
+  --ds-green-light: #66cc66;
+  --ds-yellow: #ddaa33;

  /* Gitea color mappings */
-  --color-primary: var(--tb-blue);
-  --color-primary-light: var(--tb-blue-light);
+  --color-primary: var(--ds-blue);
+  --color-primary-light: var(--ds-blue-light);
  --color-primary-dark: #2255aa;
  --color-primary-alpha-10: rgba(51, 102, 204, 0.1);
  --color-primary-alpha-20: rgba(51, 102, 204, 0.2);
  --color-primary-alpha-40: rgba(51, 102, 204, 0.4);

-  --color-secondary: var(--tb-slate);
-  --color-secondary-light: var(--tb-steel);
-  --color-secondary-dark: var(--tb-navy-light);
+  --color-secondary: var(--ds-slate);
+  --color-secondary-light: var(--ds-steel);
+  --color-secondary-dark: var(--ds-navy-light);

  /* Background colors */
-  --color-body: var(--tb-navy);
-  --color-box-body: var(--tb-navy);
-  --color-box-header: var(--tb-navy-light);
+  --color-body: var(--ds-navy);
+  --color-box-body: var(--ds-navy);
+  --color-box-header: var(--ds-navy-light);

  /* Text colors */
-  --color-text: var(--tb-white);
-  --color-text-light: var(--tb-steel);
-  --color-text-dark: var(--tb-white);
+  --color-text: var(--ds-white);
+  --color-text-light: var(--ds-steel);
+  --color-text-dark: var(--ds-white);

  /* Input colors */
-  --color-input-text: var(--tb-white);
-  --color-input-background: var(--tb-navy-mid);
-  --color-input-border: var(--tb-slate);
+  --color-input-text: var(--ds-white);
+  --color-input-background: var(--ds-navy-mid);
+  --color-input-border: var(--ds-slate);

  /* Status colors */
-  --color-success: var(--tb-green);
-  --color-success-text: var(--tb-white);
-  --color-warning: var(--tb-yellow);
-  --color-warning-text: var(--tb-navy);
-  --color-error: var(--tb-red);
-  --color-error-text: var(--tb-white);
-  --color-info: var(--tb-blue-light);
-  --color-info-text: var(--tb-white);
+  --color-success: var(--ds-green);
+  --color-success-text: var(--ds-white);
+  --color-warning: var(--ds-yellow);
+  --color-warning-text: var(--ds-navy);
+  --color-error: var(--ds-red);
+  --color-error-text: var(--ds-white);
+  --color-info: var(--ds-blue-light);
+  --color-info-text: var(--ds-white);

  /* Border */
-  --color-border: var(--tb-slate);
+  --color-border: var(--ds-slate);

  /* Link colors */
-  --color-link: var(--tb-blue-bright);
-  --color-link-hover: var(--tb-white);
+  --color-link: var(--ds-blue-bright);
+  --color-link-hover: var(--ds-white);

  /* Code */
-  --color-code-bg: var(--tb-navy-light);
-  --color-code-border: var(--tb-slate);
+  --color-code-bg: var(--ds-navy-light);
+  --color-code-border: var(--ds-slate);

  /* Shadows */
  --color-shadow: rgba(0, 0, 0, 0.4);
@@ -84,40 +84,41 @@ gitea-theme-meta-info {
 /* Global styles */
 body {
  font-family: 'IBM Plex Mono', monospace !important;
-  background: var(--tb-navy) !important;
+  background: var(--ds-navy) !important;
 }

 /* Headings */
 h1, h2, h3, h4, h5, h6,
 .header-wrapper .header {
-  font-family: 'Press Start 2P', monospace !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
 }

-h1 { font-size: 18px !important; color: var(--tb-white) !important; }
-h2 { font-size: 14px !important; color: var(--tb-blue-bright) !important; }
-h3 { font-size: 12px !important; color: var(--tb-white) !important; }
+h1 { font-size: 18px !important; color: var(--ds-white) !important; }
+h2 { font-size: 14px !important; color: var(--ds-blue-bright) !important; }
+h3 { font-size: 12px !important; color: var(--ds-white) !important; }

 /* Navbar */
 .ui.secondary.menu.navbar,
 .navbar {
-  background: var(--tb-navy-light) !important;
-  border-bottom: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-bottom: 3px solid var(--ds-slate) !important;
 }

 .navbar .item {
  font-family: 'IBM Plex Mono', monospace !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 .navbar .item:hover {
-  background: var(--tb-navy-mid) !important;
-  color: var(--tb-blue-bright) !important;
+  background: var(--ds-navy-mid) !important;
+  color: var(--ds-blue-bright) !important;
 }

 .navbar .item.active {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
 }

 /* Buttons */
@@ -131,31 +132,31 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }

 .ui.primary.button,
 .ui.blue.button {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-blue-light) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-blue-light) !important;
 }

 .ui.primary.button:hover,
 .ui.blue.button:hover {
-  background: var(--tb-blue-light) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-blue-light) !important;
+  color: var(--ds-white) !important;
 }

 .ui.green.button {
-  background: var(--tb-green) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-green-light) !important;
+  background: var(--ds-green) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-green-light) !important;
 }

 .ui.green.button:hover {
-  background: var(--tb-green-light) !important;
-  color: var(--tb-navy) !important;
+  background: var(--ds-green-light) !important;
+  color: var(--ds-navy) !important;
 }

 .ui.red.button {
-  background: var(--tb-red) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-red) !important;
+  color: var(--ds-white) !important;
 }

 /* Segments and boxes */
@@ -163,39 +164,39 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
 .ui.segments,
 .repository,
 .box {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

 .ui.attached.header,
 .box-header {
-  background: var(--tb-navy-light) !important;
-  border-bottom: 2px solid var(--tb-slate) !important;
-  font-family: 'Press Start 2P', monospace !important;
+  background: var(--ds-navy-light) !important;
+  border-bottom: 2px solid var(--ds-slate) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 /* Tables */
 .ui.table {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
 }

 .ui.table th {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
-  font-family: 'Press Start 2P', monospace !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
-  border: 1px solid var(--tb-blue-light) !important;
+  border: 1px solid var(--ds-blue-light) !important;
 }

 .ui.table td {
-  background: var(--tb-navy) !important;
-  color: var(--tb-white) !important;
-  border: 1px solid var(--tb-navy-light) !important;
+  background: var(--ds-navy) !important;
+  color: var(--ds-white) !important;
+  border: 1px solid var(--ds-navy-light) !important;
 }

 .ui.table tr:hover td {
@@ -208,17 +209,17 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
 .ui.form select,
 .ui.input input {
  font-family: 'IBM Plex Mono', monospace !important;
-  background: var(--tb-navy-mid) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-mid) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

 .ui.form input:focus,
 .ui.form textarea:focus,
 .ui.input input:focus {
-  border-color: var(--tb-blue-light) !important;
-  background: var(--tb-navy-mid) !important;
+  border-color: var(--ds-blue-light) !important;
+  background: var(--ds-navy-mid) !important;
 }

 /* Labels */
@@ -229,16 +230,16 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }

 /* Dropdowns */
 .ui.dropdown .menu {
-  background: var(--tb-navy-light) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 2px solid var(--ds-slate) !important;
 }

 .ui.dropdown .menu .item {
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 .ui.dropdown .menu .item:hover {
-  background: var(--tb-blue) !important;
+  background: var(--ds-blue) !important;
 }

 /* Code and diffs */
@@ -247,35 +248,35 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
 .CodeMirror,
 .highlight {
  font-family: 'IBM Plex Mono', monospace !important;
-  background: var(--tb-navy) !important;
+  background: var(--ds-navy) !important;
 }

 .diff-file-box .diff-file-header {
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }

 /* Commit graph */
 .repository .commit-list .commit {
-  border-bottom: 1px solid var(--tb-navy-light) !important;
+  border-bottom: 1px solid var(--ds-navy-light) !important;
 }

 /* Issues and PRs */
 .issue-list .item,
 .pull-list .item {
-  border-bottom: 1px solid var(--tb-navy-light) !important;
+  border-bottom: 1px solid var(--ds-navy-light) !important;
 }

 /* Footer */
 .footer {
-  background: var(--tb-navy-light) !important;
-  border-top: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-top: 3px solid var(--ds-slate) !important;
 }

 /* Cards */
 .ui.card,
 .ui.cards .card {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

@@ -288,27 +289,27 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
 .ui.positive.message,
 .ui.success.message {
  background: rgba(68, 170, 68, 0.2) !important;
-  border: 2px solid var(--tb-green) !important;
-  color: var(--tb-green-light) !important;
+  border: 2px solid var(--ds-green) !important;
+  color: var(--ds-green-light) !important;
 }

 .ui.negative.message,
 .ui.error.message {
  background: rgba(204, 34, 68, 0.2) !important;
-  border: 2px solid var(--tb-red) !important;
-  color: var(--tb-red-light) !important;
+  border: 2px solid var(--ds-red) !important;
+  color: var(--ds-red-light) !important;
 }

 .ui.warning.message {
  background: rgba(221, 170, 51, 0.2) !important;
-  border: 2px solid var(--tb-yellow) !important;
-  color: var(--tb-yellow) !important;
+  border: 2px solid var(--ds-yellow) !important;
+  color: var(--ds-yellow) !important;
 }

 .ui.info.message {
  background: rgba(85, 136, 221, 0.2) !important;
-  border: 2px solid var(--tb-blue-light) !important;
-  color: var(--tb-blue-bright) !important;
+  border: 2px solid var(--ds-blue-light) !important;
+  color: var(--ds-blue-bright) !important;
 }

 /* Scrollbars */
@@ -318,29 +319,29 @@ h3 { font-size: 12px !important; color: var(--tb-white) !important; }
 }

 ::-webkit-scrollbar-track {
-  background: var(--tb-navy-light);
+  background: var(--ds-navy-light);
 }

 ::-webkit-scrollbar-thumb {
-  background: var(--tb-slate);
+  background: var(--ds-slate);
  border-radius: 6px;
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: var(--tb-steel);
+  background: var(--ds-steel);
 }

 /* Selection */
 ::selection {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
 }

 /* Links */
 a {
-  color: var(--tb-blue-bright) !important;
+  color: var(--ds-blue-bright) !important;
 }

 a:hover {
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }
--- a/styles/inject.css
+++ b/styles/inject.css
@@ -1,32 +1,32 @@
-/* THROWBACK THEME - Universal Injectable CSS
-   Tecmo Super Bowl inspired: deep navy, white text, patriotic red/blue
+/* LOCH — deep-navy design system
+   Universal injectable CSS.
   Injected via Traefik rewrite-body plugin into:
   Grafana, Traefik Dashboard, RustFS/MinIO, Jaeger, Prometheus, Trino
   Palette matches: Gitea, Woodpecker, Marimo, nginx dashboard themes */

-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

 /* ============================================
-   THROWBACK COLOR PALETTE
+   LOCH COLOR PALETTE
   ============================================ */
 :root {
-  --tb-navy: #0a1628;
-  --tb-navy-light: #162040;
-  --tb-navy-mid: #1e2d50;
-  --tb-slate: #2a3f5f;
-  --tb-steel: #5a7090;
-  --tb-white: #f0f0f0;
+  --ds-navy: #0a1628;
+  --ds-navy-light: #162040;
+  --ds-navy-mid: #1e2d50;
+  --ds-slate: #2a3f5f;
+  --ds-steel: #5a7090;
+  --ds-white: #f0f0f0;

-  --tb-blue: #3366cc;
-  --tb-blue-light: #5588dd;
-  --tb-blue-bright: #88aaee;
+  --ds-blue: #3366cc;
+  --ds-blue-light: #5588dd;
+  --ds-blue-bright: #88aaee;

-  --tb-red: #cc2244;
-  --tb-red-light: #dd4466;
+  --ds-red: #cc2244;
+  --ds-red-light: #dd4466;

-  --tb-green: #44aa44;
-  --tb-green-light: #66cc66;
-  --tb-yellow: #ddaa33;
+  --ds-green: #44aa44;
+  --ds-green-light: #66cc66;
+  --ds-yellow: #ddaa33;
 }

 /* ============================================
@@ -34,34 +34,35 @@
   ============================================ */
 body, html {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
-  background: var(--tb-navy) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy) !important;
+  color: var(--ds-white) !important;
 }

 /* ============================================
   HEADINGS
   ============================================ */
 h1, h2, h3, h4, h5, h6 {
-  font-family: 'Press Start 2P', 'IBM Plex Mono', monospace !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.8 !important;
 }

 h1 {
  font-size: 16px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }
 h2 {
  font-size: 13px !important;
-  color: var(--tb-blue-bright) !important;
+  color: var(--ds-blue-bright) !important;
 }
 h3 {
  font-size: 11px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }
 h4, h5, h6 {
  font-size: 10px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 /* ============================================
@@ -75,9 +76,9 @@ header,
 [class*="topbar"],
 [class*="top-bar"],
 [class*="app-bar"] {
-  background: var(--tb-navy-light) !important;
-  border-bottom: 3px solid var(--tb-slate) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy-light) !important;
+  border-bottom: 3px solid var(--ds-slate) !important;
+  color: var(--ds-white) !important;
 }

 /* ============================================
@@ -89,13 +90,13 @@ aside,
 [class*="side-nav"],
 [class*="drawer"],
 [class*="menu-panel"] {
-  background: var(--tb-navy) !important;
-  border-right: 3px solid var(--tb-slate) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy) !important;
+  border-right: 3px solid var(--ds-slate) !important;
+  color: var(--ds-white) !important;
 }

 /* ============================================
-   TABLES (Scoreboard style)
+   TABLES (Table styling)
   ============================================ */
 table {
  border-collapse: collapse !important;
@@ -103,26 +104,26 @@ table {
 }

 th {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
-  font-family: 'Press Start 2P', monospace !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9px !important;
  padding: 10px 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
-  border: 1px solid var(--tb-blue-light) !important;
+  border: 1px solid var(--ds-blue-light) !important;
 }

 td {
-  background: var(--tb-navy) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy) !important;
+  color: var(--ds-white) !important;
  padding: 8px 12px !important;
-  border: 1px solid var(--tb-navy-light) !important;
+  border: 1px solid var(--ds-navy-light) !important;
  font-size: 13px !important;
 }

 tr:nth-child(even) td {
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }

 tr:hover td {
@@ -138,9 +139,9 @@ button,
 [class*="button"] {
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 500 !important;
-  background: var(--tb-navy-light) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
  transition: all 0.15s ease !important;
 }
@@ -149,8 +150,8 @@ button:hover,
 [role="button"]:hover,
 .btn:hover,
 [class*="button"]:hover {
-  background: var(--tb-blue) !important;
-  border-color: var(--tb-blue-light) !important;
+  background: var(--ds-blue) !important;
+  border-color: var(--ds-blue-light) !important;
 }

 button:active,
@@ -163,14 +164,14 @@ button:active,
 button[type="submit"],
 [class*="primary"],
 [class*="submit"] {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-blue-light) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-blue-light) !important;
 }

 button[type="submit"]:hover,
 [class*="primary"]:hover {
-  background: var(--tb-blue-light) !important;
+  background: var(--ds-blue-light) !important;
 }

 /* ============================================
@@ -182,16 +183,16 @@ select,
 [class*="input"],
 [contenteditable="true"] {
  font-family: 'IBM Plex Mono', monospace !important;
-  background: var(--tb-navy-mid) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-mid) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

 input:focus,
 textarea:focus,
 select:focus {
-  border-color: var(--tb-blue-light) !important;
+  border-color: var(--ds-blue-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
 }
@@ -204,15 +205,15 @@ pre, code {
 }

 code {
-  background: var(--tb-navy-light) !important;
-  color: var(--tb-blue-bright) !important;
+  background: var(--ds-navy-light) !important;
+  color: var(--ds-blue-bright) !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
 }

 pre {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
  padding: 12px !important;
 }
@@ -226,18 +227,18 @@ pre code {
   LINKS
   ============================================ */
 a {
-  color: var(--tb-blue-bright) !important;
+  color: var(--ds-blue-bright) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
 }

 a:hover {
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
  text-decoration: underline !important;
 }

 a:visited {
-  color: var(--tb-blue-light) !important;
+  color: var(--ds-blue-light) !important;
 }

 /* ============================================
@@ -248,9 +249,9 @@ a:visited {
 [class*="widget"],
 [class*="Paper"],
 [class*="container"]:not(body):not(html) {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
+  color: var(--ds-white) !important;
 }

 /* ============================================
@@ -264,16 +265,16 @@ a:visited {
 [class*="Popover"],
 [class*="Menu-list"],
 [class*="MenuList"] {
-  background: var(--tb-navy-light) !important;
-  border: 2px solid var(--tb-slate) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy-light) !important;
+  border: 2px solid var(--ds-slate) !important;
+  color: var(--ds-white) !important;
 }

 [role="menuitem"]:hover,
 [role="option"]:hover,
 [class*="MenuItem"]:hover {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
 }

 /* ============================================
@@ -286,9 +287,9 @@ a:visited {
 [class*="pill"] {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
-  border: 1px solid var(--tb-blue-light) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
+  border: 1px solid var(--ds-blue-light) !important;
 }

 /* Status indicators */
@@ -297,19 +298,19 @@ a:visited {
 [class*="running"],
 [class*="active"],
 [class*="ok"] {
-  color: var(--tb-green-light) !important;
+  color: var(--ds-green-light) !important;
 }

 [class*="error"],
 [class*="danger"],
 [class*="failed"],
 [class*="critical"] {
-  color: var(--tb-red) !important;
+  color: var(--ds-red) !important;
 }

 [class*="warning"],
 [class*="pending"] {
-  color: var(--tb-yellow) !important;
+  color: var(--ds-yellow) !important;
 }

 /* ============================================
@@ -321,32 +322,32 @@ a:visited {
 }

 ::-webkit-scrollbar-track {
-  background: var(--tb-navy-light);
+  background: var(--ds-navy-light);
 }

 ::-webkit-scrollbar-thumb {
-  background: var(--tb-slate);
+  background: var(--ds-slate);
  border-radius: 6px;
-  border: 2px solid var(--tb-navy-light);
+  border: 2px solid var(--ds-navy-light);
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: var(--tb-steel);
+  background: var(--ds-steel);
 }

 /* ============================================
   TEXT SELECTION
   ============================================ */
 ::selection {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
 }

 /* ============================================
   FOCUS STYLES
   ============================================ */
 :focus-visible {
-  outline: 2px solid var(--tb-blue-light) !important;
+  outline: 2px solid var(--ds-blue-light) !important;
  outline-offset: 2px !important;
 }

@@ -392,15 +393,15 @@ img[alt*="Logo" i] {
 .grafana-app [class*="NavBar"],
 .grafana-app [class*="Topbar"],
 .grafana-app [aria-label="Main menu"] {
-  background: var(--tb-navy-light) !important;
-  border-bottom: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-bottom: 3px solid var(--ds-slate) !important;
 }

 /* Sidenav */
 .grafana-app [class*="sidemenu"],
 .grafana-app [class*="NavBar"][class*="wrapper"] {
-  background: var(--tb-navy) !important;
-  border-right: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border-right: 3px solid var(--ds-slate) !important;
 }

 /* Dashboard container */
@@ -413,8 +414,8 @@ img[alt*="Logo" i] {
 .grafana-app .panel-container,
 .grafana-app [class*="panel-content"],
 .grafana-app [class*="PanelChrome"] {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 0 !important;
 }

@@ -422,10 +423,10 @@ img[alt*="Logo" i] {
 .grafana-app .panel-title,
 .grafana-app [class*="panel-header"],
 .grafana-app [class*="PanelHeader"] {
-  background: var(--tb-navy-light) !important;
-  font-family: 'Press Start 2P', monospace !important;
+  background: var(--ds-navy-light) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 /* Explore page */
@@ -437,21 +438,21 @@ img[alt*="Logo" i] {
 /* Grafana query editor */
 .grafana-app [class*="query-editor"],
 .grafana-app [class*="QueryEditor"] {
-  background: var(--tb-navy-light) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 2px solid var(--ds-slate) !important;
 }

 /* Alert list */
 .grafana-app [class*="AlertList"],
 .grafana-app [class*="alert-rule"] {
-  background: var(--tb-navy) !important;
-  border: 1px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 1px solid var(--ds-slate) !important;
 }

 /* Grafana page toolbar */
 .grafana-app [class*="page-toolbar"],
 .grafana-app [class*="PageToolbar"] {
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }


@@ -473,8 +474,8 @@ header img[alt*="Jaeger" i] {
 .jaeger-ui [class*="TopNav"],
 [class*="jaeger"] [class*="TopNav"],
 [data-testid="TopNav"] {
-  background: var(--tb-navy-light) !important;
-  border-bottom: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-bottom: 3px solid var(--ds-slate) !important;
 }

 /* Trace page */
@@ -486,8 +487,8 @@ header img[alt*="Jaeger" i] {
 /* Timeline viewer */
 .TraceTimelineViewer,
 [class*="TraceTimelineViewer"] {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
 }

 /* Span bars */
@@ -499,16 +500,16 @@ header img[alt*="Jaeger" i] {
 .SearchForm,
 [class*="SearchForm"],
 [class*="search-form"] {
-  background: var(--tb-navy-light) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 2px solid var(--ds-slate) !important;
  padding: 12px !important;
 }

 /* Trace result list */
 [class*="ResultItem"],
 [class*="result-item"] {
-  background: var(--tb-navy) !important;
-  border: 1px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 1px solid var(--ds-slate) !important;
  margin-bottom: 4px !important;
 }

@@ -520,15 +521,15 @@ header img[alt*="Jaeger" i] {
 /* Span detail */
 [class*="SpanDetail"],
 [class*="AccordianKeyValues"] {
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }

 /* Jaeger-specific selects */
 .jaeger-ui select,
 [class*="jaeger"] select {
-  background: var(--tb-navy-mid) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-mid) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
 }


@@ -547,23 +548,23 @@ nav.navbar svg,
 /* Main navbar */
 .prometheus-app nav.navbar,
 nav.navbar {
-  background: var(--tb-navy-light) !important;
-  border-bottom: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-bottom: 3px solid var(--ds-slate) !important;
 }

 nav.navbar .navbar-brand {
-  font-family: 'Press Start 2P', monospace !important;
+  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 /* Expression input */
 .prometheus-app .expression-input,
 [class*="expression-input"],
 .cm-expression-input {
-  background: var(--tb-navy) !important;
-  border: 3px solid var(--tb-slate) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy) !important;
+  border: 3px solid var(--ds-slate) !important;
+  color: var(--ds-white) !important;
  font-family: 'IBM Plex Mono', monospace !important;
 }

@@ -571,8 +572,8 @@ nav.navbar .navbar-brand {
 .graph-container,
 [class*="graph-container"],
 .panel {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 0 !important;
 }

@@ -580,52 +581,52 @@ nav.navbar .navbar-brand {
 .graph-controls,
 [class*="graph-controls"],
 .nav-tabs {
-  background: var(--tb-navy-light) !important;
-  border-bottom: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-bottom: 2px solid var(--ds-slate) !important;
 }

 .nav-tabs .nav-link,
 .nav-tabs a {
-  color: var(--tb-steel) !important;
+  color: var(--ds-steel) !important;
 }

 .nav-tabs .nav-link.active,
 .nav-tabs .active a {
-  color: var(--tb-white) !important;
-  border-bottom: 3px solid var(--tb-blue) !important;
+  color: var(--ds-white) !important;
+  border-bottom: 3px solid var(--ds-blue) !important;
  background: transparent !important;
 }

 /* Alert/Rule manager */
 .rules-head,
 [class*="rules"] th {
-  background: var(--tb-blue) !important;
+  background: var(--ds-blue) !important;
 }

 /* Prometheus targets page */
 .target-head,
 [class*="scrape-pool"] h2 {
-  font-family: 'Press Start 2P', monospace !important;
+  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
 }

 /* Status badges */
 .badge-success,
 .label-success {
-  background: var(--tb-green) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-green) !important;
+  color: var(--ds-white) !important;
 }

 .badge-danger,
 .label-danger {
-  background: var(--tb-red) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-red) !important;
+  color: var(--ds-white) !important;
 }

 .badge-warning,
 .label-warning {
-  background: var(--tb-yellow) !important;
-  color: var(--tb-navy) !important;
+  background: var(--ds-yellow) !important;
+  color: var(--ds-navy) !important;
 }


@@ -651,22 +652,22 @@ nav.navbar .navbar-brand {
 #app nav,
 #app [class*="nav-bar"],
 #app .navbar {
-  background: var(--tb-navy-light) !important;
-  border-bottom: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-bottom: 3px solid var(--ds-slate) !important;
 }

 /* Sidebar */
 #app [class*="sidebar"],
 #app [class*="side-menu"],
 #app aside {
-  background: var(--tb-navy) !important;
-  border-right: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border-right: 3px solid var(--ds-slate) !important;
 }

 /* Sidebar menu items */
 #app [class*="sidebar"] a,
 #app [class*="side-menu"] a {
-  color: var(--tb-steel) !important;
+  color: var(--ds-steel) !important;
  border-left: 3px solid transparent !important;
 }

@@ -674,9 +675,9 @@ nav.navbar .navbar-brand {
 #app [class*="side-menu"] a:hover,
 #app [class*="sidebar"] a.active,
 #app [class*="side-menu"] a.active {
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
  background: rgba(51, 102, 204, 0.2) !important;
-  border-left-color: var(--tb-blue) !important;
+  border-left-color: var(--ds-blue) !important;
 }

 /* Main content area */
@@ -691,22 +692,22 @@ nav.navbar .navbar-brand {
 #app [class*="status"][class*="success"],
 #app [class*="pill"][class*="green"],
 #app [class*="positive"] {
-  background: var(--tb-green) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-green) !important;
+  color: var(--ds-white) !important;
 }

 #app [class*="status"][class*="negative"],
 #app [class*="status"][class*="error"],
 #app [class*="pill"][class*="red"],
 #app [class*="negative"] {
-  background: var(--tb-red) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-red) !important;
+  color: var(--ds-white) !important;
 }

 #app [class*="status"][class*="warning"],
 #app [class*="pill"][class*="orange"] {
-  background: var(--tb-yellow) !important;
-  color: var(--tb-navy) !important;
+  background: var(--ds-yellow) !important;
+  color: var(--ds-navy) !important;
 }

 /* Traefik table rows */
@@ -717,8 +718,8 @@ nav.navbar .navbar-brand {
 /* Service detail panels */
 #app [class*="detail"],
 #app [class*="panel-block"] {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
 }


@@ -745,8 +746,8 @@ nav.navbar .navbar-brand {
 /* App bar */
 #root .MuiAppBar-root,
 #root [class*="MuiAppBar"] {
-  background: var(--tb-navy-light) !important;
-  border-bottom: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-bottom: 3px solid var(--ds-slate) !important;
  box-shadow: none !important;
 }

@@ -754,45 +755,45 @@ nav.navbar .navbar-brand {
 #root .MuiDrawer-root,
 #root .MuiDrawer-paper,
 #root [class*="MuiDrawer"] {
-  background: var(--tb-navy) !important;
-  border-right: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border-right: 3px solid var(--ds-slate) !important;
 }

 /* Drawer list items */
 #root .MuiListItem-root,
 #root .MuiListItemButton-root,
 #root [class*="MuiListItem"] {
-  color: var(--tb-steel) !important;
+  color: var(--ds-steel) !important;
 }

 #root .MuiListItem-root:hover,
 #root .MuiListItemButton-root:hover,
 #root [class*="MuiListItem"]:hover {
  background: rgba(51, 102, 204, 0.2) !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 #root .Mui-selected,
 #root [class*="Mui-selected"] {
  background: rgba(51, 102, 204, 0.3) !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 /* MUI Paper */
 #root .MuiPaper-root,
 #root [class*="MuiPaper"] {
-  background: var(--tb-navy) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
 }

 /* MUI Buttons */
 #root .MuiButton-root,
 #root [class*="MuiButton"] {
  font-family: 'IBM Plex Mono', monospace !important;
-  background: var(--tb-navy-light) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
  text-transform: none !important;
  box-shadow: none !important;
@@ -800,34 +801,34 @@ nav.navbar .navbar-brand {

 #root .MuiButton-root:hover,
 #root [class*="MuiButton"]:hover {
-  background: var(--tb-blue) !important;
-  border-color: var(--tb-blue-light) !important;
+  background: var(--ds-blue) !important;
+  border-color: var(--ds-blue-light) !important;
 }

 #root .MuiButton-containedPrimary,
 #root [class*="MuiButton-containedPrimary"] {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-blue-light) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-blue-light) !important;
 }

 #root .MuiButton-containedPrimary:hover {
-  background: var(--tb-blue-light) !important;
+  background: var(--ds-blue-light) !important;
 }

 /* MUI Table */
 #root .MuiTableCell-root,
 #root [class*="MuiTableCell"] {
-  border-color: var(--tb-slate) !important;
-  color: var(--tb-white) !important;
+  border-color: var(--ds-slate) !important;
+  color: var(--ds-white) !important;
  font-family: 'IBM Plex Mono', monospace !important;
 }

 #root .MuiTableCell-head,
 #root [class*="MuiTableCell-head"] {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
-  font-family: 'Press Start 2P', monospace !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
 }
@@ -842,64 +843,64 @@ nav.navbar .navbar-brand {
 #root .MuiOutlinedInput-root,
 #root [class*="MuiInputBase"],
 #root [class*="MuiOutlinedInput"] {
-  background: var(--tb-navy-mid) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy-mid) !important;
+  color: var(--ds-white) !important;
 }

 #root .MuiOutlinedInput-notchedOutline,
 #root [class*="notchedOutline"] {
-  border-color: var(--tb-slate) !important;
+  border-color: var(--ds-slate) !important;
 }

 #root .MuiInputLabel-root,
 #root [class*="MuiInputLabel"] {
-  color: var(--tb-steel) !important;
+  color: var(--ds-steel) !important;
 }

 /* MUI Dialogs */
 #root .MuiDialog-paper,
 #root [class*="MuiDialog-paper"] {
-  background: var(--tb-navy-light) !important;
-  border: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 3px solid var(--ds-slate) !important;
 }

 /* MUI Tabs */
 #root .MuiTab-root,
 #root [class*="MuiTab"] {
-  color: var(--tb-steel) !important;
+  color: var(--ds-steel) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  text-transform: none !important;
 }

 #root .MuiTab-root.Mui-selected,
 #root [class*="MuiTab"][class*="Mui-selected"] {
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 #root .MuiTabs-indicator,
 #root [class*="MuiTabs-indicator"] {
-  background: var(--tb-blue) !important;
+  background: var(--ds-blue) !important;
 }

 /* MUI Breadcrumbs */
 #root .MuiBreadcrumbs-root,
 #root [class*="MuiBreadcrumbs"] {
-  color: var(--tb-steel) !important;
+  color: var(--ds-steel) !important;
 }

 /* MUI Chips */
 #root .MuiChip-root,
 #root [class*="MuiChip"] {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
-  border: 1px solid var(--tb-blue-light) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
+  border: 1px solid var(--ds-blue-light) !important;
 }

 /* MUI Icons */
 #root .MuiSvgIcon-root,
 #root [class*="MuiSvgIcon"],
 #root svg {
-  color: var(--tb-steel) !important;
+  color: var(--ds-steel) !important;
  fill: currentColor !important;
 }

@@ -911,10 +912,10 @@ nav.navbar .navbar-brand {
 /* Trino has a simple UI - mostly tables and headers */
 body > h2,
 body > h3 {
-  font-family: 'Press Start 2P', monospace !important;
-  color: var(--tb-white) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  color: var(--ds-white) !important;
  padding: 10px 0 !important;
-  border-bottom: 3px solid var(--tb-slate) !important;
+  border-bottom: 3px solid var(--ds-slate) !important;
  margin-bottom: 15px !important;
 }

@@ -927,8 +928,8 @@ body > table {
 /* Trino worker status */
 [class*="query-list"],
 [class*="query-detail"] {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
 }

 /* Progress bars used by various services */
@@ -936,15 +937,15 @@ progress,
 [role="progressbar"],
 [class*="progress-bar"],
 [class*="ProgressBar"] {
-  background: var(--tb-navy-light) !important;
-  border: 1px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 1px solid var(--ds-slate) !important;
  border-radius: 0 !important;
 }

 progress::-webkit-progress-bar {
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }

 progress::-webkit-progress-value {
-  background: var(--tb-blue) !important;
+  background: var(--ds-blue) !important;
 }
--- a/styles/loch.css
+++ b/styles/loch.css
@@ -0,0 +1,26 @@
+/* LOCH — deep-navy design system
+   Single source of truth for the colour palette.
+   When changing a color here, propagate to the service-specific files:
+     inject.css, dashboard.css, gitea.css, woodpecker.css, marimo.css */
+
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+
+:root {
+  --ds-navy: #0a1628;
+  --ds-navy-light: #162040;
+  --ds-navy-mid: #1e2d50;
+  --ds-slate: #2a3f5f;
+  --ds-steel: #5a7090;
+  --ds-white: #f0f0f0;
+
+  --ds-blue: #3366cc;
+  --ds-blue-light: #5588dd;
+  --ds-blue-bright: #88aaee;
+
+  --ds-red: #cc2244;
+  --ds-red-light: #dd4466;
+
+  --ds-green: #44aa44;
+  --ds-green-light: #66cc66;
+  --ds-yellow: #ddaa33;
+}
--- a/styles/marimo.css
+++ b/styles/marimo.css
@@ -1,41 +1,41 @@
-/* THROWBACK THEME - Tecmo Super Bowl */
+/* LOCH — deep-navy design system */
 /* Full marimo theme: semantic vars, Radix scales, prose, CodeMirror */

-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

 /* ============================================
-   THROWBACK COLOR PALETTE
+   LOCH COLOR PALETTE
   ============================================ */
 :root {
-  --tb-navy: #0a1628;
-  --tb-navy-light: #162040;
-  --tb-navy-mid: #1e2d50;
-  --tb-slate: #2a3f5f;
-  --tb-steel: #8a9fbb;
-  --tb-silver: #b0c0d8;
-  --tb-white: #f0f0f0;
+  --ds-navy: #0a1628;
+  --ds-navy-light: #162040;
+  --ds-navy-mid: #1e2d50;
+  --ds-slate: #2a3f5f;
+  --ds-steel: #8a9fbb;
+  --ds-silver: #b0c0d8;
+  --ds-white: #f0f0f0;

-  --tb-blue: #4477dd;
-  --tb-blue-light: #6699ee;
-  --tb-blue-bright: #99bbff;
+  --ds-blue: #4477dd;
+  --ds-blue-light: #6699ee;
+  --ds-blue-bright: #99bbff;

-  --tb-red: #cc2244;
-  --tb-red-light: #ee6688;
-  --tb-red-bright: #ffaabc;
+  --ds-red: #cc2244;
+  --ds-red-light: #ee6688;
+  --ds-red-bright: #ffaabc;

-  --tb-green: #44aa44;
-  --tb-green-light: #77dd77;
-  --tb-green-bright: #b1f1b1;
+  --ds-green: #44aa44;
+  --ds-green-light: #77dd77;
+  --ds-green-bright: #b1f1b1;

-  --tb-yellow: #eebb44;
-  --tb-yellow-light: #ffdd77;
-  --tb-yellow-bright: #fff0bb;
+  --ds-yellow: #eebb44;
+  --ds-yellow-light: #ffdd77;
+  --ds-yellow-bright: #fff0bb;

-  --tb-purple: #9977cc;
-  --tb-purple-light: #bb99ee;
+  --ds-purple: #9977cc;
+  --ds-purple-light: #bb99ee;

-  --tb-cyan: #55bbcc;
-  --tb-cyan-light: #88ddee;
+  --ds-cyan: #55bbcc;
+  --ds-cyan-light: #88ddee;
 }

 /* ============================================
@@ -44,57 +44,57 @@
 :root {
  --monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
  --text-font: 'IBM Plex Mono', 'Courier New', monospace;
-  --heading-font: 'Press Start 2P', 'IBM Plex Mono', monospace;
+  --heading-font: 'IBM Plex Mono', monospace;
  --marimo-monospace-font: 'IBM Plex Mono', 'Courier New', monospace;
  --marimo-text-font: 'IBM Plex Mono', 'Courier New', monospace;
-  --marimo-heading-font: 'Press Start 2P', 'IBM Plex Mono', monospace;
+  --marimo-heading-font: 'IBM Plex Mono', monospace;
 }

 /* ============================================
   MARIMO SEMANTIC VARIABLES
   ============================================ */
 :root {
-  --background: var(--tb-navy);
-  --foreground: var(--tb-white);
+  --background: var(--ds-navy);
+  --foreground: var(--ds-white);

-  --muted: var(--tb-navy-light);
-  --muted-foreground: var(--tb-steel);
+  --muted: var(--ds-navy-light);
+  --muted-foreground: var(--ds-steel);

-  --popover: var(--tb-navy-light);
-  --popover-foreground: var(--tb-white);
+  --popover: var(--ds-navy-light);
+  --popover-foreground: var(--ds-white);

-  --card: var(--tb-navy);
-  --card-foreground: var(--tb-white);
+  --card: var(--ds-navy);
+  --card-foreground: var(--ds-white);

-  --border: var(--tb-slate);
-  --input: var(--tb-navy-mid);
-  --ring: var(--tb-blue-light);
+  --border: var(--ds-slate);
+  --input: var(--ds-navy-mid);
+  --ring: var(--ds-blue-light);
  --radius: 2px;

-  --primary: var(--tb-blue);
-  --primary-foreground: var(--tb-white);
+  --primary: var(--ds-blue);
+  --primary-foreground: var(--ds-white);

-  --secondary: var(--tb-slate);
-  --secondary-foreground: var(--tb-white);
+  --secondary: var(--ds-slate);
+  --secondary-foreground: var(--ds-white);

-  --accent: var(--tb-navy-mid);
-  --accent-foreground: var(--tb-blue-bright);
+  --accent: var(--ds-navy-mid);
+  --accent-foreground: var(--ds-blue-bright);

-  --destructive: var(--tb-red);
-  --destructive-foreground: var(--tb-white);
+  --destructive: var(--ds-red);
+  --destructive-foreground: var(--ds-white);

-  --error: var(--tb-red);
-  --error-foreground: var(--tb-white);
+  --error: var(--ds-red);
+  --error-foreground: var(--ds-white);

-  --success: var(--tb-green-light);
-  --success-foreground: var(--tb-white);
+  --success: var(--ds-green-light);
+  --success-foreground: var(--ds-white);

-  --action: var(--tb-yellow);
-  --action-hover: var(--tb-yellow-light);
-  --action-foreground: var(--tb-navy);
+  --action: var(--ds-yellow);
+  --action-hover: var(--ds-yellow-light);
+  --action-foreground: var(--ds-navy);

-  --link: var(--tb-blue-bright);
-  --link-visited: var(--tb-purple-light);
+  --link: var(--ds-blue-bright);
+  --link-visited: var(--ds-purple-light);

  --stale: rgba(238, 187, 68, 0.25);

@@ -102,7 +102,7 @@
  --base-shadow-darker: rgba(0, 0, 0, 0.6);
  --base-shadow-opacity: 20%;

-  --cm-background: var(--tb-navy);
+  --cm-background: var(--ds-navy);

  --background-image: none;
  --background-repeat: no-repeat;
@@ -332,51 +332,51 @@
   TAILWIND PROSE - Markdown content
   ============================================ */
 :root {
-  --tw-prose-body: var(--tb-white);
-  --tw-prose-headings: var(--tb-white);
-  --tw-prose-lead: var(--tb-silver);
-  --tw-prose-links: var(--tb-blue-bright);
-  --tw-prose-bold: var(--tb-white);
-  --tw-prose-counters: var(--tb-steel);
-  --tw-prose-bullets: var(--tb-steel);
-  --tw-prose-hr: var(--tb-slate);
-  --tw-prose-quotes: var(--tb-silver);
-  --tw-prose-quote-borders: var(--tb-slate);
-  --tw-prose-captions: var(--tb-steel);
-  --tw-prose-kbd: var(--tb-white);
+  --tw-prose-body: var(--ds-white);
+  --tw-prose-headings: var(--ds-white);
+  --tw-prose-lead: var(--ds-silver);
+  --tw-prose-links: var(--ds-blue-bright);
+  --tw-prose-bold: var(--ds-white);
+  --tw-prose-counters: var(--ds-steel);
+  --tw-prose-bullets: var(--ds-steel);
+  --tw-prose-hr: var(--ds-slate);
+  --tw-prose-quotes: var(--ds-silver);
+  --tw-prose-quote-borders: var(--ds-slate);
+  --tw-prose-captions: var(--ds-steel);
+  --tw-prose-kbd: var(--ds-white);
  --tw-prose-kbd-shadows: rgba(240, 240, 240, 0.1);
-  --tw-prose-code: var(--tb-blue-bright);
-  --tw-prose-pre-code: var(--tb-silver);
-  --tw-prose-pre-bg: var(--tb-navy-light);
-  --tw-prose-th-borders: var(--tb-slate);
-  --tw-prose-td-borders: var(--tb-navy-mid);
+  --tw-prose-code: var(--ds-blue-bright);
+  --tw-prose-pre-code: var(--ds-silver);
+  --tw-prose-pre-bg: var(--ds-navy-light);
+  --tw-prose-th-borders: var(--ds-slate);
+  --tw-prose-td-borders: var(--ds-navy-mid);

  /* Invert variants (used in dark mode) */
-  --tw-prose-invert-body: var(--tb-white);
-  --tw-prose-invert-headings: var(--tb-white);
-  --tw-prose-invert-lead: var(--tb-silver);
-  --tw-prose-invert-links: var(--tb-blue-bright);
-  --tw-prose-invert-bold: var(--tb-white);
-  --tw-prose-invert-counters: var(--tb-steel);
-  --tw-prose-invert-bullets: var(--tb-steel);
-  --tw-prose-invert-hr: var(--tb-slate);
-  --tw-prose-invert-quotes: var(--tb-silver);
-  --tw-prose-invert-quote-borders: var(--tb-slate);
-  --tw-prose-invert-captions: var(--tb-steel);
-  --tw-prose-invert-kbd: var(--tb-white);
+  --tw-prose-invert-body: var(--ds-white);
+  --tw-prose-invert-headings: var(--ds-white);
+  --tw-prose-invert-lead: var(--ds-silver);
+  --tw-prose-invert-links: var(--ds-blue-bright);
+  --tw-prose-invert-bold: var(--ds-white);
+  --tw-prose-invert-counters: var(--ds-steel);
+  --tw-prose-invert-bullets: var(--ds-steel);
+  --tw-prose-invert-hr: var(--ds-slate);
+  --tw-prose-invert-quotes: var(--ds-silver);
+  --tw-prose-invert-quote-borders: var(--ds-slate);
+  --tw-prose-invert-captions: var(--ds-steel);
+  --tw-prose-invert-kbd: var(--ds-white);
  --tw-prose-invert-kbd-shadows: rgba(240, 240, 240, 0.1);
-  --tw-prose-invert-code: var(--tb-blue-bright);
-  --tw-prose-invert-pre-code: var(--tb-silver);
-  --tw-prose-invert-pre-bg: var(--tb-navy-light);
-  --tw-prose-invert-th-borders: var(--tb-slate);
-  --tw-prose-invert-td-borders: var(--tb-navy-mid);
+  --tw-prose-invert-code: var(--ds-blue-bright);
+  --tw-prose-invert-pre-code: var(--ds-silver);
+  --tw-prose-invert-pre-bg: var(--ds-navy-light);
+  --tw-prose-invert-th-borders: var(--ds-slate);
+  --tw-prose-invert-td-borders: var(--ds-navy-mid);
 }

 /* ============================================
   BODY & BACKGROUNDS
   ============================================ */
 body {
-  background: var(--tb-navy) !important;
+  background: var(--ds-navy) !important;
 }

 /* ============================================
@@ -385,7 +385,7 @@ body {
 .cm-editor {
  font-family: var(--monospace-font) !important;
  font-size: 14px !important;
-  background: var(--tb-navy) !important;
+  background: var(--ds-navy) !important;
 }

 .cm-content {
@@ -394,41 +394,41 @@ body {

 .cm-line {
  font-family: var(--monospace-font) !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 .cm-gutters {
-  background: var(--tb-navy-light) !important;
-  border-right: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-right: 2px solid var(--ds-slate) !important;
 }

 .cm-lineNumbers .cm-gutterElement {
-  color: var(--tb-steel) !important;
+  color: var(--ds-steel) !important;
  font-family: var(--monospace-font) !important;
  font-size: 12px !important;
 }

 /* Syntax highlighting */
-.cm-keyword, .tok-keyword { color: var(--tb-blue-bright) !important; }
-.cm-string, .tok-string { color: var(--tb-green-light) !important; }
-.cm-number, .tok-number { color: var(--tb-yellow) !important; }
-.cm-comment, .tok-comment { color: var(--tb-steel) !important; font-style: italic !important; }
-.cm-function, .tok-function { color: var(--tb-white) !important; }
-.cm-variableName, .tok-variableName { color: var(--tb-white) !important; }
-.cm-operator, .tok-operator { color: var(--tb-blue-light) !important; }
-.cm-propertyName, .tok-propertyName { color: var(--tb-blue-bright) !important; }
-.tok-standard, .cm-builtin { color: var(--tb-red-light) !important; }
-.tok-definition, .cm-def { color: var(--tb-blue-bright) !important; }
-.tok-typeName { color: var(--tb-yellow) !important; }
-.tok-bool { color: var(--tb-red-light) !important; }
+.cm-keyword, .tok-keyword { color: var(--ds-blue-bright) !important; }
+.cm-string, .tok-string { color: var(--ds-green-light) !important; }
+.cm-number, .tok-number { color: var(--ds-yellow) !important; }
+.cm-comment, .tok-comment { color: var(--ds-steel) !important; font-style: italic !important; }
+.cm-function, .tok-function { color: var(--ds-white) !important; }
+.cm-variableName, .tok-variableName { color: var(--ds-white) !important; }
+.cm-operator, .tok-operator { color: var(--ds-blue-light) !important; }
+.cm-propertyName, .tok-propertyName { color: var(--ds-blue-bright) !important; }
+.tok-standard, .cm-builtin { color: var(--ds-red-light) !important; }
+.tok-definition, .cm-def { color: var(--ds-blue-bright) !important; }
+.tok-typeName { color: var(--ds-yellow) !important; }
+.tok-bool { color: var(--ds-red-light) !important; }

 .cm-cursor {
-  border-left: 2px solid var(--tb-white) !important;
+  border-left: 2px solid var(--ds-white) !important;
 }

 .cm-selectionBackground,
 ::selection {
-  background: var(--tb-blue) !important;
+  background: var(--ds-blue) !important;
 }

 .cm-activeLine {
@@ -440,18 +440,19 @@ body {
   ============================================ */
 h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font) !important;
+  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.8 !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 h1 { font-size: 18px !important; }
-h2 { font-size: 14px !important; color: var(--tb-blue-bright) !important; }
+h2 { font-size: 14px !important; color: var(--ds-blue-bright) !important; }
 h3 { font-size: 12px !important; }
 h4, h5, h6 { font-size: 11px !important; }

 /* ============================================
-   TABLES (Scoreboard style)
+   TABLES (Table styling)
   ============================================ */
 table {
  border-collapse: collapse !important;
@@ -459,27 +460,27 @@ table {
 }

 th {
-  background: var(--tb-navy-mid) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy-mid) !important;
+  color: var(--ds-white) !important;
  font-family: var(--heading-font) !important;
  font-size: 10px !important;
  padding: 10px 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
-  border: 1px solid var(--tb-slate) !important;
-  border-bottom: 2px solid var(--tb-blue) !important;
+  border: 1px solid var(--ds-slate) !important;
+  border-bottom: 2px solid var(--ds-blue) !important;
 }

 td {
-  background: var(--tb-navy) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy) !important;
+  color: var(--ds-white) !important;
  padding: 8px 12px !important;
-  border: 1px solid var(--tb-navy-light) !important;
+  border: 1px solid var(--ds-navy-light) !important;
  font-size: 13px !important;
 }

 tr:nth-child(even) td {
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }

 tr:hover td {
@@ -501,15 +502,15 @@ button,
 button[data-variant="primary"],
 button.primary,
 [data-action="run"] {
-  background: var(--tb-green) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-green-light) !important;
+  background: var(--ds-green) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-green-light) !important;
 }

 button[data-variant="primary"]:hover,
 button.primary:hover,
 [data-action="run"]:hover {
-  background: var(--tb-green-light) !important;
+  background: var(--ds-green-light) !important;
 }

 /* ============================================
@@ -519,9 +520,9 @@ input,
 textarea,
 select {
  font-family: var(--monospace-font) !important;
-  background: var(--tb-navy-mid) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-mid) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 2px !important;
  padding: 8px 12px !important;
 }
@@ -529,7 +530,7 @@ select {
 input:focus,
 textarea:focus,
 select:focus {
-  border-color: var(--tb-blue-light) !important;
+  border-color: var(--ds-blue-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(102, 153, 238, 0.3) !important;
 }
@@ -542,16 +543,16 @@ pre, code {
 }

 code {
-  background: var(--tb-navy-light) !important;
-  color: var(--tb-blue-bright) !important;
+  background: var(--ds-navy-light) !important;
+  color: var(--ds-blue-bright) !important;
  padding: 2px 6px !important;
  border-radius: 2px !important;
  font-size: 0.9em !important;
 }

 pre {
-  background: var(--tb-navy-light) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 2px !important;
  padding: 12px !important;
 }
@@ -565,18 +566,18 @@ pre code {
   LINKS
   ============================================ */
 a {
-  color: var(--tb-blue-bright) !important;
+  color: var(--ds-blue-bright) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
 }

 a:hover {
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
  text-decoration: underline !important;
 }

 a:visited {
-  color: var(--tb-purple-light) !important;
+  color: var(--ds-purple-light) !important;
 }

 /* ============================================
@@ -588,17 +589,17 @@ a:visited {
 }

 ::-webkit-scrollbar-track {
-  background: var(--tb-navy-light);
+  background: var(--ds-navy-light);
 }

 ::-webkit-scrollbar-thumb {
-  background: var(--tb-slate);
+  background: var(--ds-slate);
  border-radius: 6px;
-  border: 2px solid var(--tb-navy-light);
+  border: 2px solid var(--ds-navy-light);
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: var(--tb-steel);
+  background: var(--ds-steel);
 }

 /* ============================================
@@ -608,16 +609,16 @@ a:visited {
 [data-state="open"][data-side] {
  font-family: var(--monospace-font) !important;
  font-size: 12px !important;
-  background: var(--tb-navy-light) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 2px !important;
 }

 [role="menu"],
 [role="listbox"] {
-  background: var(--tb-navy-light) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 2px !important;
 }

@@ -625,8 +626,8 @@ a:visited {
 [role="option"]:hover,
 [role="menuitem"][data-highlighted],
 [role="option"][data-highlighted] {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
 }

 /* Badges and pills */
@@ -639,7 +640,7 @@ a:visited {
 }

 :focus-visible {
-  outline: 2px solid var(--tb-blue-light) !important;
+  outline: 2px solid var(--ds-blue-light) !important;
  outline-offset: 2px !important;
 }

@@ -649,7 +650,7 @@ a:visited {
 [data-testid="outputs"],
 .output-area {
  background: rgba(22, 32, 64, 0.5) !important;
-  border-top: 2px solid var(--tb-slate) !important;
+  border-top: 2px solid var(--ds-slate) !important;
  padding: 12px !important;
 }

@@ -667,20 +668,20 @@ svg {
   HOME PAGE
   ============================================ */
 a[rel="noreferrer"][target="_blank"] {
-  background: var(--tb-navy-light) !important;
-  border: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 3px solid var(--ds-slate) !important;
  border-radius: 0 !important;
 }

 a[rel="noreferrer"][target="_blank"]:hover {
-  border-color: var(--tb-blue) !important;
-  background: var(--tb-navy-mid) !important;
+  border-color: var(--ds-blue) !important;
+  background: var(--ds-navy-mid) !important;
 }

 a[rel="noreferrer"][target="_blank"] h2 {
  font-family: var(--heading-font) !important;
  font-size: 12px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
 }
@@ -690,27 +691,27 @@ h2.text-xl {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
  padding-bottom: 6px;
-  border-bottom: 2px solid var(--tb-slate);
+  border-bottom: 2px solid var(--ds-slate);
 }

 .divide-y.border.rounded {
-  border: 3px solid var(--tb-slate) !important;
+  border: 3px solid var(--ds-slate) !important;
  border-radius: 0 !important;
-  background: var(--tb-navy) !important;
+  background: var(--ds-navy) !important;
 }

 .divide-y.border > a,
 .divide-y.border > div > a {
-  border-color: var(--tb-navy-light) !important;
+  border-color: var(--ds-navy-light) !important;
  transition: all 0.1s ease !important;
 }

 .divide-y.border > a:hover,
 .divide-y.border > div > a:hover {
  background: rgba(68, 119, 221, 0.2) !important;
-  border-left: 3px solid var(--tb-blue) !important;
+  border-left: 3px solid var(--ds-blue) !important;
 }

 .divide-y.border a .flex-1 span {
@@ -727,7 +728,7 @@ h2.text-xl {
 }

 /* ============================================
-   PIXEL-PERFECT BORDERS
+   BORDERS
   ============================================ */
 .rounded-lg,
 .rounded-md {
@@ -743,33 +744,33 @@ h2.text-xl {
   TOP BAR / ACTION BUTTONS
   ============================================ */
 .absolute.top-3.right-5 button {
-  border: 2px solid var(--tb-slate) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 0 !important;
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }

 .absolute.top-3.right-5 button:hover {
-  background: var(--tb-blue) !important;
-  border-color: var(--tb-blue-light) !important;
+  background: var(--ds-blue) !important;
+  border-color: var(--ds-blue-light) !important;
 }

 /* ============================================
   SEARCH INPUT
   ============================================ */
 input#search {
-  border: 3px solid var(--tb-slate) !important;
+  border: 3px solid var(--ds-slate) !important;
  border-radius: 0 !important;
-  background: var(--tb-navy) !important;
+  background: var(--ds-navy) !important;
  font-family: var(--monospace-font) !important;
 }

 input#search:focus {
-  border-color: var(--tb-blue-light) !important;
+  border-color: var(--ds-blue-light) !important;
  box-shadow: 0 0 8px rgba(102, 153, 238, 0.3) !important;
 }

 /* ============================================
-   BUTTON PRESS EFFECT
+   BUTTON STATES
   ============================================ */
 button:active,
 [role="button"]:active {
@@ -782,10 +783,10 @@ button:active,
   ============================================ */
 .dark .text-foreground,
 .text-foreground {
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
 }

 .dark .text-muted-foreground,
 .text-muted-foreground {
-  color: var(--tb-steel) !important;
+  color: var(--ds-steel) !important;
 }
--- a/styles/throwback.css
+++ b/styles/throwback.css
@@ -1,26 +0,0 @@
-/* THROWBACK COLOR PALETTE — Single Source of Truth
-   Tecmo Super Bowl inspired: deep navy, white text, patriotic red/blue
-   When changing a color here, propagate to the service-specific files:
-     inject.css, dashboard.css, gitea.css, woodpecker.css, marimo.css */
-
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
-
-:root {
-  --tb-navy: #0a1628;
-  --tb-navy-light: #162040;
-  --tb-navy-mid: #1e2d50;
-  --tb-slate: #2a3f5f;
-  --tb-steel: #5a7090;
-  --tb-white: #f0f0f0;
-
-  --tb-blue: #3366cc;
-  --tb-blue-light: #5588dd;
-  --tb-blue-bright: #88aaee;
-
-  --tb-red: #cc2244;
-  --tb-red-light: #dd4466;
-
-  --tb-green: #44aa44;
-  --tb-green-light: #66cc66;
-  --tb-yellow: #ddaa33;
-}
--- a/styles/woodpecker.css
+++ b/styles/woodpecker.css
@@ -1,69 +1,70 @@
-/* THROWBACK THEME FOR WOODPECKER CI - Tecmo Super Bowl */
+/* LOCH — deep-navy design system for Woodpecker CI */

-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

 :root {
-  /* Throwback Color Palette */
-  --tb-navy: #0a1628;
-  --tb-navy-light: #162040;
-  --tb-navy-mid: #1e2d50;
-  --tb-slate: #2a3f5f;
-  --tb-steel: #5a7090;
-  --tb-white: #f0f0f0;
+  /* Loch Color Palette */
+  --ds-navy: #0a1628;
+  --ds-navy-light: #162040;
+  --ds-navy-mid: #1e2d50;
+  --ds-slate: #2a3f5f;
+  --ds-steel: #5a7090;
+  --ds-white: #f0f0f0;

-  --tb-blue: #3366cc;
-  --tb-blue-light: #5588dd;
-  --tb-blue-bright: #88aaee;
+  --ds-blue: #3366cc;
+  --ds-blue-light: #5588dd;
+  --ds-blue-bright: #88aaee;

-  --tb-red: #cc2244;
-  --tb-red-light: #dd4466;
+  --ds-red: #cc2244;
+  --ds-red-light: #dd4466;

-  --tb-green: #44aa44;
-  --tb-green-light: #66cc66;
-  --tb-yellow: #ddaa33;
+  --ds-green: #44aa44;
+  --ds-green-light: #66cc66;
+  --ds-yellow: #ddaa33;

  /* Woodpecker color overrides */
-  --color-wp-primary-100: var(--tb-blue-bright);
-  --color-wp-primary-200: var(--tb-blue-light);
-  --color-wp-primary-300: var(--tb-blue);
+  --color-wp-primary-100: var(--ds-blue-bright);
+  --color-wp-primary-200: var(--ds-blue-light);
+  --color-wp-primary-300: var(--ds-blue);
  --color-wp-primary-400: #2255aa;
-  --color-wp-primary-500: var(--tb-navy);
+  --color-wp-primary-500: var(--ds-navy);

-  --color-wp-success-100: var(--tb-green-light);
-  --color-wp-success-200: var(--tb-green);
+  --color-wp-success-100: var(--ds-green-light);
+  --color-wp-success-200: var(--ds-green);

-  --color-wp-error-100: var(--tb-red-light);
-  --color-wp-error-200: var(--tb-red);
+  --color-wp-error-100: var(--ds-red-light);
+  --color-wp-error-200: var(--ds-red);

-  --color-wp-warning-100: var(--tb-yellow);
+  --color-wp-warning-100: var(--ds-yellow);
  --color-wp-warning-200: #bb8822;

-  --color-wp-gray-100: var(--tb-white);
-  --color-wp-gray-200: var(--tb-steel);
-  --color-wp-gray-300: var(--tb-slate);
-  --color-wp-gray-400: var(--tb-navy-mid);
-  --color-wp-gray-500: var(--tb-navy-light);
-  --color-wp-gray-600: var(--tb-navy);
+  --color-wp-gray-100: var(--ds-white);
+  --color-wp-gray-200: var(--ds-steel);
+  --color-wp-gray-300: var(--ds-slate);
+  --color-wp-gray-400: var(--ds-navy-mid);
+  --color-wp-gray-500: var(--ds-navy-light);
+  --color-wp-gray-600: var(--ds-navy);
 }

 /* Global styles */
 body,
 html {
  font-family: 'IBM Plex Mono', monospace !important;
-  background: var(--tb-navy) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy) !important;
+  color: var(--ds-white) !important;
 }

 /* Headings */
 h1, h2, h3, h4, h5, h6 {
-  font-family: 'Press Start 2P', monospace !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.8 !important;
 }

-h1 { font-size: 18px !important; color: var(--tb-white) !important; }
-h2 { font-size: 14px !important; color: var(--tb-blue-bright) !important; }
-h3 { font-size: 12px !important; color: var(--tb-white) !important; }
+h1 { font-size: 18px !important; color: var(--ds-white) !important; }
+h2 { font-size: 14px !important; color: var(--ds-blue-bright) !important; }
+h3 { font-size: 12px !important; color: var(--ds-white) !important; }

 /* Header/Navbar */
 header,
@@ -71,16 +72,16 @@ nav,
 .navbar,
 [class*="header"],
 [class*="Header"] {
-  background: var(--tb-navy-light) !important;
-  border-bottom: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border-bottom: 3px solid var(--ds-slate) !important;
 }

 /* Sidebar */
 aside,
 [class*="sidebar"],
 [class*="Sidebar"] {
-  background: var(--tb-navy) !important;
-  border-right: 3px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border-right: 3px solid var(--ds-slate) !important;
 }

 /* Main content area */
@@ -97,8 +98,8 @@ main,
 [class*="Panel"],
 [class*="box"],
 [class*="Box"] {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

@@ -118,16 +119,16 @@ button,
 [class*="primary"],
 [class*="Primary"],
 button[type="submit"] {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-blue-light) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-blue-light) !important;
 }

 [class*="primary"]:hover,
 [class*="Primary"]:hover,
 button[type="submit"]:hover {
-  background: var(--tb-blue-light) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-blue-light) !important;
+  color: var(--ds-white) !important;
 }

 /* Success/green buttons */
@@ -135,15 +136,15 @@ button[type="submit"]:hover {
 [class*="Success"],
 [class*="green"],
 [class*="Green"] {
-  background: var(--tb-green) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-green-light) !important;
+  background: var(--ds-green) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-green-light) !important;
 }

 [class*="success"]:hover,
 [class*="Success"]:hover {
-  background: var(--tb-green-light) !important;
-  color: var(--tb-navy) !important;
+  background: var(--ds-green-light) !important;
+  color: var(--ds-navy) !important;
 }

 /* Danger/red buttons */
@@ -153,8 +154,8 @@ button[type="submit"]:hover {
 [class*="Error"],
 [class*="red"],
 [class*="Red"] {
-  background: var(--tb-red) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-red) !important;
+  color: var(--ds-white) !important;
 }

 /* Forms */
@@ -162,9 +163,9 @@ input,
 textarea,
 select {
  font-family: 'IBM Plex Mono', monospace !important;
-  background: var(--tb-navy-mid) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-mid) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
 }
@@ -172,37 +173,37 @@ select {
 input:focus,
 textarea:focus,
 select:focus {
-  border-color: var(--tb-blue-light) !important;
+  border-color: var(--ds-blue-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(85, 136, 221, 0.3) !important;
 }

 /* Tables */
 table {
-  background: var(--tb-navy) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-collapse: collapse !important;
 }

 th {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
-  font-family: 'Press Start 2P', monospace !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  padding: 10px 12px !important;
-  border: 1px solid var(--tb-blue-light) !important;
+  border: 1px solid var(--ds-blue-light) !important;
 }

 td {
-  background: var(--tb-navy) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-navy) !important;
+  color: var(--ds-white) !important;
  padding: 8px 12px !important;
-  border: 1px solid var(--tb-navy-light) !important;
+  border: 1px solid var(--ds-navy-light) !important;
 }

 tr:nth-child(even) td {
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }

 tr:hover td {
@@ -214,14 +215,14 @@ tr:hover td {
 [class*="Running"],
 [class*="pending"],
 [class*="Pending"] {
-  color: var(--tb-yellow) !important;
+  color: var(--ds-yellow) !important;
 }

 [class*="success"],
 [class*="Success"],
 [class*="passed"],
 [class*="Passed"] {
-  color: var(--tb-green-light) !important;
+  color: var(--ds-green-light) !important;
 }

 [class*="failure"],
@@ -230,7 +231,7 @@ tr:hover td {
 [class*="Failed"],
 [class*="error"],
 [class*="Error"] {
-  color: var(--tb-red) !important;
+  color: var(--ds-red) !important;
 }

 /* Build logs */
@@ -241,28 +242,28 @@ code,
 [class*="console"],
 [class*="Console"] {
  font-family: 'IBM Plex Mono', monospace !important;
-  background: var(--tb-navy) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

 /* Inline code */
 code {
-  background: var(--tb-navy-light) !important;
-  color: var(--tb-blue-bright) !important;
+  background: var(--ds-navy-light) !important;
+  color: var(--ds-blue-bright) !important;
  padding: 2px 6px !important;
  border: none !important;
 }

 /* Links */
 a {
-  color: var(--tb-blue-bright) !important;
+  color: var(--ds-blue-bright) !important;
  text-decoration: none !important;
 }

 a:hover {
-  color: var(--tb-white) !important;
+  color: var(--ds-white) !important;
  text-decoration: underline !important;
 }

@@ -273,8 +274,8 @@ a:hover {
 [class*="Menu"],
 [class*="popover"],
 [class*="Popover"] {
-  background: var(--tb-navy-light) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

@@ -282,7 +283,7 @@ a:hover {
 [class*="menu"] li:hover,
 [role="menuitem"]:hover,
 [role="option"]:hover {
-  background: var(--tb-blue) !important;
+  background: var(--ds-blue) !important;
 }

 /* Badges and tags */
@@ -302,9 +303,9 @@ a:hover {
 [class*="tooltip"],
 [class*="Tooltip"] {
  font-family: 'IBM Plex Mono', monospace !important;
-  background: var(--tb-navy-light) !important;
-  color: var(--tb-white) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  color: var(--ds-white) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

@@ -312,17 +313,17 @@ a:hover {
 progress,
 [class*="progress"],
 [class*="Progress"] {
-  background: var(--tb-navy-light) !important;
-  border: 2px solid var(--tb-slate) !important;
+  background: var(--ds-navy-light) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

 progress::-webkit-progress-bar {
-  background: var(--tb-navy-light) !important;
+  background: var(--ds-navy-light) !important;
 }

 progress::-webkit-progress-value {
-  background: var(--tb-blue) !important;
+  background: var(--ds-blue) !important;
 }

 /* Scrollbars */
@@ -332,22 +333,22 @@ progress::-webkit-progress-value {
 }

 ::-webkit-scrollbar-track {
-  background: var(--tb-navy-light);
+  background: var(--ds-navy-light);
 }

 ::-webkit-scrollbar-thumb {
-  background: var(--tb-slate);
+  background: var(--ds-slate);
  border-radius: 6px;
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: var(--tb-steel);
+  background: var(--ds-steel);
 }

 /* Selection */
 ::selection {
-  background: var(--tb-blue) !important;
-  color: var(--tb-white) !important;
+  background: var(--ds-blue) !important;
+  color: var(--ds-white) !important;
 }

 /* Icons - ensure visibility */
@@ -360,7 +361,7 @@ svg,
 /* Avatar images */
 img[class*="avatar"],
 [class*="avatar"] img {
-  border: 2px solid var(--tb-slate) !important;
+  border: 2px solid var(--ds-slate) !important;
  border-radius: 4px !important;
 }

@@ -369,7 +370,7 @@ img[class*="avatar"],
 [class*="Item"],
 [class*="list-item"],
 [class*="ListItem"] {
-  border-bottom: 1px solid var(--tb-navy-light) !important;
+  border-bottom: 1px solid var(--ds-navy-light) !important;
 }

 [class*="item"]:hover,
--- a/traefik/dynamic/services.yml
+++ b/traefik/dynamic/services.yml
@@ -6,6 +6,7 @@
  "woodpecker-server"  (dict "port" "8000"  "theme" true  "subdomain" "ci" "mw" "local-only,secure-headers")
  "notebooks"          (dict "port" "2718"  "theme" true  "mw" "local-only,secure-headers")
  "zotero"             (dict "port" "8080"  "theme" true  "mw" "secure-headers")
+  "api"                (dict "port" "8000"  "theme" false "mw" "secure-headers")
  "nessie"             (dict "port" "19120" "theme" false "mw" "local-only,infra-headers")
  "trino"              (dict "port" "8080"  "theme" true  "mw" "local-only,infra-headers")
  "polaris"            (dict "port" "8181"  "theme" false "mw" "local-only,infra-headers")
@@ -40,13 +41,13 @@ http:
        referrerPolicy: "strict-origin-when-cross-origin"
        customResponseHeaders:
          X-Robots-Tag: "noindex, nofollow"
-    inject-throwback:
+    inject-loch:
      plugin:
        rewrite-body:
          lastModified: true
          rewrites:
            - regex: "</head>"
-              replacement: '<link rel="icon" type="image/png" sizes="32x32" href="http://{{ $domain }}/fav32.png"><link rel="stylesheet" type="text/css" href="http://{{ $domain }}/throwback.css"></head>'
+              replacement: '<link rel="icon" type="image/png" sizes="32x32" href="http://{{ $domain }}/fav32.png"><link rel="stylesheet" type="text/css" href="http://{{ $domain }}/loch.css"></head>'
  routers:
    {{- range $name, $svc := $reef }}
    {{ $name }}:
@@ -55,7 +56,7 @@ http:
      entryPoints:
        - web
      {{- $mwList := list -}}
-      {{- if get $svc "theme" }}{{ $mwList = append $mwList "inject-throwback" }}{{ end -}}
+      {{- if get $svc "theme" }}{{ $mwList = append $mwList "inject-loch" }}{{ end -}}
      {{- $extra := get $svc "mw" | default "" -}}
      {{- if ne $extra "" }}{{ range splitList "," $extra }}{{ $mwList = append $mwList (trim .) }}{{ end }}{{ end -}}
      {{- if $mwList }}
@@ -72,7 +73,7 @@ http:
      entryPoints:
        - web
      {{- $mwList := list -}}
-      {{- if get $svc "theme" }}{{ $mwList = append $mwList "inject-throwback" }}{{ end -}}
+      {{- if get $svc "theme" }}{{ $mwList = append $mwList "inject-loch" }}{{ end -}}
      {{- $extra := get $svc "mw" | default "" -}}
      {{- if ne $extra "" }}{{ range splitList "," $extra }}{{ $mwList = append $mwList (trim .) }}{{ end }}{{ end -}}
      {{- if $mwList }}
@@ -88,7 +89,7 @@ http:
      entryPoints:
        - web
      middlewares:
-        - inject-throwback
+        - inject-loch
        - local-only
        - infra-headers
  services: