Claude/create gnat admin guide bo srp

[wrhalpin]

The site serves from docs/index.html which uses gnat-theme.css, not assets/css/style.css. Previous palette change hit the wrong file. Replaces beige (#fff8f3) with dark grey (#1A1A1A) from logo, cards and badges use #242424, borders #3A3A3A, accent red #C41E2A.

https://claude.ai/code/session_01H5UbjsuiiGya5n1eUCxoaR

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates the GNAT docs theme to use the correct stylesheet (docs/gnat-theme.css) and applies the new dark palette with updated surfaces, borders, and accent colors.

Changes:

• Replaces the previous light/beige palette with a dark grey-based palette and updated brand reds.
• Updates component backgrounds (cards, badges, tables) to use the new surface tokens and sets badge text color.
• Adjusts link color to use the primary brand color.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The newly introduced hex colors are uppercase, while the previous theme used lowercase hex. Consider standardizing hex casing across the file (all lower or all upper) to keep the stylesheet consistent and easier to diff/maintain.

Suggested change

	--brand:#C41E2A;
	--brand-dark:#9B1820;
	--surface:#1A1A1A;
	--surface-2:#242424;
	--ink:#E0E0E0;
	--muted:#9E9E9E;
	--line:#3A3A3A;
	--brand:#c41e2a;
	--brand-dark:#9b1820;
	--surface:#1a1a1a;
	--surface-2:#242424;
	--ink:#e0e0e0;
	--muted:#9e9e9e;
	--line:#3a3a3a;

[Copilot]

With the move to a dark palette, verify that --brand provides sufficient contrast for links against both --surface and --surface-2 (WCAG). If contrast is borderline, consider adding an additional affordance (e.g., underline) and/or defining hover/focus styles (e.g., using --brand-dark) to improve discoverability and keyboard navigation.

Suggested change

	a{color:var(--brand);}
	a{
	color:var(--brand);
	text-decoration:underline;
	text-decoration-thickness:.08em;
	text-underline-offset:.14em;
	}
	a:hover,
	a:focus{
	text-decoration-thickness:.12em;
	}
	a:focus-visible{
	outline:2px solid var(--brand);
	outline-offset:2px;
	border-radius:2px;
	}