Rebrand the application using CDISC Brand Guidelines

[pendingintent]

The applicaiton needs to be rebranded using CDISC Brand Guildelines

[pendingintent]

CDISC Rebrand of soa-workbench Web UI

Context

The soa-workbench web app currently uses an ad-hoc purple/blue color scheme
(--am-purple: #6a1b9a as primary) that predates any real CDISC branding
work, plus two individually-hand-rolled "CDISC-branded" pages
(bc_explorer.html, usdm_model_explorer.html) that each guessed at CDISC
hex values independently — and got several of them slightly wrong (transposed
digits, wrong sky-blue, wrong teal). The cdisc-brand-guidelines skill
defines the actual official palette, typography, and logo rules used across
CDISC's PPTX/DOCX/email materials. This task applies that same official
palette/typography discipline to the web app so all ~90 templates share one
correct, on-brand identity instead of three divergent approximations.

Decisions already made with the user (fixed constraints, not open questions):

1. Primary color moves from purple → CDISC Blue (#134678). CDISC Purple
   (#553278) becomes the secondary/accent color — this is a hierarchy swap
   per the official guide, not just a hex substitution.
2. Typography: system sans-serif stack (Arial/Helvetica/system-ui
   fallback) — no Azo Sans/@font-face licensing work.
3. Logo: wire the existing (currently unused)
   static/images/CDISC-360i-Logo.png into base.html's sidenav, plus add a
   favicon.

Verified facts (read directly, not just summarized): all styling lives in one
file, src/soa_builder/web/static/style.css (1854 lines); there are zero
inline style="" hex/var usages in any template — the entire surface area is
style.css plus two self-contained <style> blocks in bc_explorer.html and
usdm_model_explorer.html. body { font-family: Arial, Helvetica, sans-serif }
already exists at style.css:87, so decision #2 is nearly done already.

Approach

1. Add a canonical CDISC palette to style.css's :root (lines 160-184)

Add new raw palette variables (source of truth, referenced only by semantic
--am-* names, never used directly in selectors):

--cdisc-blue:         #134678;
--cdisc-purple:       #553278;
--cdisc-orange:       #D57E00;
--cdisc-green:        #286040;
--cdisc-light-blue:   #40B4E5;
--cdisc-teal:         #A1D0CA;
--cdisc-red:          #C94543;
--cdisc-dark-gray:    #525349;
--cdisc-yellow-green: #AAAD00;
--cdisc-yellow:       #FFCE00;
--cdisc-gold:         #EDAA00;
--cdisc-light-gray:   #929288;
--cdisc-bg:           #F5F5F5;
--cdisc-navy:         #0E2841;   /* derived dark shade of blue, for sidenav — not an official swatch, reuses bc_explorer.html's existing value */
--cdisc-blue-700:     #0f3a63;   /* derived hover shade of blue, reuses bc_explorer.html's existing value */

2. Remap existing --am-* semantic variables — split, not blanket rename

Traced all ~25 call sites of --am-purple in style.css. They split into two
genuinely distinct roles:

• Primary action (.am-btn-primary, .am-modal-btn-purple used by
  Rollback/Freeze buttons in freeze_modal.html and
  edit-column-collapse.html, and 4 hardcoded rgba(106,27,154,0.1) focus-ring
  box-shadows) → repoint to a new --am-primary: var(--cdisc-blue)
  variable. This is the only part requiring per-selector edits (~7 sites) plus
  renaming .am-modal-btn-purple → .am-modal-btn-primary (5 template
  references in freeze_modal.html and edit-column-collapse.html).
• Secondary headers/accents (page titles, panel titles, hints, meta
  labels, inline-panel borders, UID chips, edit badges — ~18 sites) → no
  call-site changes. --am-purple keeps its name, only its hex changes:
  #6a1b9a → var(--cdisc-purple) (#553278). This is the safe "alias"
  leverage point — most of the app repaints correctly from one :root edit.

--am-info remap (currently #1565c0, used 14x for notices/links, not
just the "create" button): move to var(--cdisc-purple) rather than CDISC's
Light Blue (#40B4E5 fails WCAG contrast at ~2.4:1 for both button-fill and
text-on-white use — unusable without inventing an off-brand darker shade).
Blue (primary) and Purple (info) are far enough apart in hue that they won't
be confused. This means purple now serves both the header/accent role and the
info/create-button role — intentional, not a duplication bug.

Final button semantic table (also update in .claude/skills/ui-design/SKILL.md):

Class	Old hex	New hex
am-btn-primary	#6a1b9a	#134678 (CDISC Blue)
am-btn-info	#1565c0	#553278 (CDISC Purple)
am-btn-slate	#455a64	unchanged
am-btn-success	#2e7d32	#286040 (CDISC Green) — optional brand upgrade
am-btn-danger	#c62828	#C94543 (CDISC Red) — optional brand upgrade

3. Convert the legacy hardcoded-hex block (style.css:1-153) to use variables

• .sidenav background #111 → var(--cdisc-navy); link color #818181 →
  new --am-sidenav-link (muted light blue-gray, not neutral gray); hover
  states #575757/#f1f1f1 → var(--cdisc-blue-700)/white — makes the
  sidebar read as dark-blue brand chrome instead of generic near-black.
• Generic th, td border/background (lines 100-102) → var(--am-border-med)
  / var(--am-surface), aligning with the design-system tables.
• .delete-btn, .small-btn → var(--am-danger) / var(--am-success)
  (values are numerically identical today — risk-free variable-ification).
• .export-buttons .btn → var(--am-slate) (neutral "export" action, not
  --am-info/purple — it's not a "create" action).

4. Reconcile the two page-scoped duplicate palettes

• bc_explorer.html (.bc-explorer scoped <style>, ~800 lines — too
  large to refactor wholesale this pass): fix the 4 wrong hex literals
  (--cdisc-gold #EBA91E→#EDAA00, --cdisc-teal #9DD0CA→#A1D0CA,
  --cdisc-sky #3DB3E3→#40B4E5, --cdisc-purple #533278→#553278), then
  delete the now-redundant local redeclarations of blue/red/orange/green
  (already correct, will inherit from the new global :root automatically
  via CSS custom-property inheritance). Keep genuinely page-specific derived
  tokens (--gray-50..700 ramp, blue-300/700 shades) local.
• usdm_model_explorer.html (.usdm-explorer scoped <style>): its 4
  core tokens already match the official spec exactly — no changes needed,
  explicitly note this in verification so it isn't mistakenly re-touched.

5. Logo + favicon

• Insert a logo block into base.html's sidenav, immediately before the
  existing <a href="/">🏠 Home</a> (line 11):

  <div class="am-sidenav-brand">
    <img src="/static/images/CDISC-360i-Logo.png" alt="CDISC" class="am-sidenav-logo" />
  </div>

  with matching CSS added near the sidenav rules in style.css.
• Favicon: no ICO conversion tooling is available without adding a
  dependency (sips -s format ico fails on this PNG). Add a zero-dependency
  PNG favicon: <link rel="icon" type="image/png" href="/static/images/CDISC-360i-Logo.png" />
  in base.html's <head> — fully supported by all evergreen browsers.

6. Typography

Extend style.css:87's existing body { font-family: Arial, Helvetica, sans-serif }
with a system-ui fallback, and add button, input, select, textarea { font-family: inherit; }
so legacy plain form elements (which don't inherit font-family from body
under the browser UA stylesheet) pick it up too. No conflict with the
existing --am-mono monospace variable used for UID chips — that's applied
via specific override classes with normal cascade precedence.

7. Cache-busting

Bump base.html:6 from ?v=16 to ?v=17, matching the existing
one-per-change convention.

8. Documentation sync

Update .claude/skills/ui-design/SKILL.md's "Colour palette" section and
button example comments to the final hex values/roles above, in the same
change — it's the de facto style guide future template edits will consult.

Critical files

• src/soa_builder/web/static/style.css — :root block (160-184), legacy
  block (1-153), button classes (~line 379-392), focus-ring rgba literals
  (337, 354, 611, 717)
• src/soa_builder/web/templates/base.html — CSS link (line 6), sidenav
  logo insertion (line 11)
• src/soa_builder/web/templates/bc_explorer.html — scoped palette (~lines
  14-27)
• src/soa_builder/web/templates/usdm_model_explorer.html — scoped palette
  (~lines 11-14), verify-only, no changes expected
• src/soa_builder/web/templates/freeze_modal.html,
  edit-column-collapse.html — am-modal-btn-purple → am-modal-btn-primary
  class renames (5 references total)
• .claude/skills/ui-design/SKILL.md — palette/button documentation sync

Verification

Use the run-soa-workbench skill (or manual uvicorn) to start the dev
server, then check representative pages: / (index), an activities list,
edit.html (matrix), a freezes/snapshot page, an objectives page,
bc_explorer.html, usdm_model_explorer.html, and the standalone
soa_matrix_export.html output (confirm its server-injected {{ css }}
picks up the new style.css automatically — no separate wiring needed there).
Confirm: sidenav renders navy/blue with visible logo; favicon shows in the
browser tab; am-btn-primary (blue) and am-btn-info (purple) are clearly
distinguishable side by side (e.g. an edit form with Save + Create); page
titles/headings render the corrected muted purple and stay legible; Rollback/
Freeze modal buttons render blue; bc_explorer.html's corrected gold/teal/
sky/purple hex values match spec exactly.

[pendingintent]

Branch pi-apply-cdisc-branding merged with release-v-1.6.