Adopt bridge-free brand styling and add a light mode

[El-Limon]

Brings the docs in line with the marketing site's design system and the bridge-free portal-A logo from gettakaro/website#23, and adds a light mode.

Branding

The navbar now uses the portal-A mark and the footer carries the wordmark. Both SVGs come from the print pack and are byte-identical to the ones website#23 shipped.

Colors and type are taken from gettakaro/website → src/styles/global.css rather than invented. That PR was logo-only, so the site's existing tokens are the current brand:

	before	now
Page background	#100F16	#080808
Surface	#17161F	#151515
Border	purple-tinted alpha	#222222
Body text	#D2CFDC	#C2C2C2
Link	#8674EB	#B8ADFF
Headings	system stack	Inter

The local token names mirror the site's (--takaro-bg, --takaro-link, …) so future drift is a quick diff. Inter is applied to headings only, matching the site — body stays on the system stack.

Three pre-existing bugs fixed

The palette was half-migrated. --ifm-color-primary had been set to the brand purple, but all six shade variants were still Docusaurus's default teal (#21af90 and friends). Those drive hover states, active links, and buttons, so parts of the site were rendering green.

Dark-mode neutrals never applied. They were scoped to :root, which loses on specificity to Infima's html[data-theme='dark']. The background had been silently falling back to the stock #1b1b1d. Now scoped to match.

The footer forced the dark variant. style: 'dark' hardcodes near-white link and title text. Once the footer background followed the theme, light mode showed white-on-near-white — links at 1.09:1, titles at 1.08:1. Switched to style: 'light', which follows the active theme, with the footer link and title colours pinned per theme.

Light mode

The toggle is enabled. Dark remains the default, and prefers-color-scheme is now respected for first-time visitors; an explicit choice is remembered after that.

⚠️ This is the one part that isn't traceable upstream. The marketing site is dark-only, so there's no light palette to mirror and these values are derived here — worth a design eye.

The dark palette can't be reused on white:

dark-mode color	on white
link #B8ADFF	2.01:1	unreadable
body #C2C2C2	1.78:1	unreadable

So light mode links in the brand purple itself (#664DE5), which passes at 5.59:1 unmodified. Surfaces are tinted toward the print pack's #D2CFDC supporting grey rather than plain grey, keeping the purple cast the brand has in dark.

Three things needed per-theme handling beyond color: the footer background (was pinned to black), the sidebar active tint (0.16 → 0.08 alpha on light), and the footer wordmark — its letterforms are hardcoded white and would have vanished, so takaro-wordmark-light.svg is wired via srcDark. The portal-As stay brand purple in both; the navbar mark is pure purple and needed no variant.

Verification

Both palettes pass WCAG AA on every text pair:

• Dark — body 11.2:1, link 10.0:1, heading 20.0:1, muted 4.7:1; footer links 10.3:1, title 18.3:1
• Light — body 11.7:1, link 5.6:1, heading 18.5:1, muted 6.5:1; footer links 10.9:1, title 17.2:1

npm run build and npm run typecheck both clean. Light mode was verified in a live browser (computed styles, not eyeballed) at 1440px and 390px with no horizontal overflow.

Both themes were also confirmed visually by a human toggling between them.

Not included

Game heroes still use hardcoded dark gradients. I checked, and they're theme-independent by construction — white text sits over an image with its own dark scrim, and the #111 is only a load-time fallback. Left alone rather than widening scope.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GLALF6cpN7LJQtdLsskzZp