Adopt bridge-free brand styling and add a light mode

docusaurus.config.ts

@@ -44,6 +44,16 @@ const config: Config = {
   scripts: [{ src: 'https://plausible.io/js/script.js', defer: true, 'data-domain': 'takaro.io' }],
 
   headTags: [
+    // Inter for headings, matching the marketing site (gettakaro/website).
+    { tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.googleapis.com' } },
+    { tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' } },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@700;900&display=swap',
+      },
+    },
     {
       tagName: 'script',
       attributes: {},
@@ -58,15 +68,15 @@ const config: Config = {
   themeConfig: {
     colorMode: {
       defaultMode: 'dark',
-      disableSwitch: true,
-      respectPrefersColorScheme: false,
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
     },
 
     navbar: {
-      title: 'Takaro Documentation',
+      title: 'Documentation',
       logo: {
-        alt: 'Takaro Logo',
-        src: 'img/takaro.png',
+        alt: 'Takaro',
+        src: 'img/takaro-portal-a.svg',
       },
       items: [
         {
@@ -87,7 +97,16 @@ const config: Config = {
       ],
     },
     footer: {
-      style: 'dark',
+      // 'light' follows the active theme; 'dark' hardcodes near-white link
+      // text, which is invisible on the light footer surface.
+      style: 'light',
+      logo: {
+        alt: 'Takaro',
+        // Letterforms flip per theme; the portal-As stay brand purple in both.
+        src: 'img/takaro-wordmark-light.svg',
+        srcDark: 'img/takaro-wordmark.svg',
+        href: 'https://takaro.io',
+      },
       links: [
         {
           title: 'Community',

src/css/custom.css

@@ -4,21 +4,149 @@
  * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
+/**
+ * Takaro brand tokens, mirroring the marketing site's design system.
+ * Source of truth: gettakaro/website — src/styles/global.css
+ * Logo: bridge-free portal-A (gettakaro/website PR #23).
+ *
+ * Names below match the site's token names so the two stay easy to diff.
+ */
 :root {
-  --ifm-color-primary: #664DE5;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --takaro-bg: #080808;
+  --takaro-bg-card: #151515;
+  --takaro-bg-card-hover: #1a1a1a;
+  --takaro-border: #222222;
+  --takaro-text: #ffffff;
+  --takaro-text-base: #c2c2c2;
+  --takaro-text-muted: #818181;
+  --takaro-accent: #664de5;
+  --takaro-accent-hover: #7a5ef0;
+  --takaro-link: #b8adff;
+  --takaro-link-hover: #d0c9ff;
+  --takaro-font-heading: 'Inter', sans-serif;
+
+  --ifm-color-primary: var(--takaro-accent);
+  --ifm-color-primary-dark: #5138e2;
+  --ifm-color-primary-darker: #472dda;
+  --ifm-color-primary-darkest: #3b25b6;
+  --ifm-color-primary-light: var(--takaro-accent-hover);
+  --ifm-color-primary-lighter: #8674eb;
+  --ifm-color-primary-lightest: var(--takaro-link);
+
+  --ifm-heading-font-family: var(--takaro-font-heading);
+  --docusaurus-highlighted-code-line-bg: rgba(102, 77, 229, 0.28);
+}
+
+/**
+ * Light mode.
+ *
+ * The marketing site is dark-only, so there is no upstream light palette to
+ * mirror; these are derived here. Two constraints shaped them:
+ *   1. The dark palette cannot be reused — its link (#B8ADFF, 2.01:1) and body
+ *      text (#C2C2C2, 1.78:1) are unreadable on white. Light mode therefore
+ *      links in the brand purple itself, which clears AA at 5.59:1.
+ *   2. Surfaces are tinted with the print pack's supporting grey (#D2CFDC)
+ *      rather than plain grey, keeping the purple cast the brand has in dark.
+ */
+html[data-theme='light'] {
+  --ifm-background-color: #ffffff;
+  --ifm-background-surface-color: #f7f6fa;
+  --ifm-heading-color: #14121c;
+  --ifm-font-color-base: #3a3646;
+  --ifm-navbar-background-color: #ffffff;
+  --ifm-navbar-shadow: 0 1px 0 #e6e3ee;
+  --ifm-toc-border-color: #e6e3ee;
+  --ifm-hr-border-color: #e6e3ee;
+  --ifm-code-background: rgba(102, 77, 229, 0.09);
+
+  /* The accent doubles as the link colour here; #B8ADFF is dark-mode only. */
+  --ifm-link-color: var(--takaro-accent);
+  --ifm-link-hover-color: #4a33c9;
+  --ifm-menu-color-active: var(--takaro-accent);
+
+  --ifm-footer-link-color: #3a3646;
+  --ifm-footer-title-color: #14121c;
+  --takaro-border-themed: #e6e3ee;
+  --takaro-muted-themed: #5c5768;
+  --takaro-surface-themed: #f7f6fa;
+  --takaro-active-tint: rgba(102, 77, 229, 0.08);
+  --docusaurus-highlighted-code-line-bg: rgba(102, 77, 229, 0.14);
+}
+
+/**
+ * The site is locked to dark mode. Docusaurus defines its dark neutrals on
+ * html[data-theme='dark'], which outranks :root — so these must be scoped to
+ * the same selector to take effect.
+ */
+html[data-theme='dark'] {
+  --ifm-background-color: var(--takaro-bg);
+  --ifm-background-surface-color: var(--takaro-bg-card);
+  --ifm-heading-color: var(--takaro-text);
+  --ifm-font-color-base: var(--takaro-text-base);
+  --ifm-navbar-background-color: var(--takaro-bg);
+  --ifm-navbar-shadow: 0 1px 0 var(--takaro-border);
+  --ifm-toc-border-color: var(--takaro-border);
+  --ifm-hr-border-color: var(--takaro-border);
+  --ifm-code-background: rgba(102, 77, 229, 0.14);
+
+  /* The site links in a lifted purple, which also clears AA on this ground. */
+  --ifm-link-color: var(--takaro-link);
+  --ifm-link-hover-color: var(--takaro-link-hover);
+  --ifm-menu-color-active: var(--takaro-link);
+
+  --ifm-footer-link-color: var(--takaro-text-base);
+  --ifm-footer-title-color: var(--takaro-text);
+  --takaro-border-themed: var(--takaro-border);
+  --takaro-muted-themed: var(--takaro-text-muted);
+  --takaro-surface-themed: var(--takaro-bg-card);
+  --takaro-active-tint: rgba(102, 77, 229, 0.16);
 }
 
+/* The navbar logo is the portal-A mark; the wordmark supplies "Takaro". */
+.navbar__logo {
+  height: 1.6rem;
+}
+
+.navbar__brand:hover .navbar__title {
+  color: var(--ifm-link-color);
+}
+
+.navbar__title {
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+/* Sidebar: active item carries the brand purple, lighter on a light ground. */
+.menu__link--active:not(.menu__link--sublist) {
+  background: var(--takaro-active-tint);
+}
+
+.table-of-contents__link--active,
+.table-of-contents__link--active code {
+  color: var(--ifm-link-color);
+}
+
+blockquote {
+  border-left-color: var(--ifm-color-primary);
+}
 
 .footer {
-  --ifm-footer-background-color: #121212;
+  --ifm-footer-background-color: var(--takaro-surface-themed);
+  --ifm-footer-link-hover-color: var(--ifm-link-color);
+  border-top: 1px solid var(--takaro-border-themed);
+}
+
+/* Footer wordmark: the SVG is ~5:1, so cap the height and let width follow. */
+.footer__logo {
+  height: auto;
+  margin: 0 0 0.75rem;
+  max-width: 190px;
+  width: 100%;
+}
+
+.footer__copyright {
+  color: var(--takaro-muted-themed);
+  font-size: 0.875rem;
 }
 
 .module-marketplace-banner {
@@ -38,7 +166,7 @@
 }
 
 .module-marketplace-banner__eyebrow {
-  color: #9b8cff;
+  color: var(--ifm-link-color);
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0;
@@ -66,7 +194,7 @@
 }
 
 .module-marketplace-banner__button:hover {
-  background: #7a63ea;
+  background: var(--ifm-color-primary-light);
   color: #fff;
   text-decoration: none;
 }
@@ -80,13 +208,13 @@
 
 .module-path-card {
   background: var(--ifm-background-surface-color);
-  border: 1px solid rgba(102, 77, 229, 0.32);
+  border: 1px solid var(--takaro-border-themed);
   border-radius: 8px;
   padding: 1.25rem;
 }
 
 .module-path-card__eyebrow {
-  color: #9b8cff;
+  color: var(--ifm-link-color);
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0;
@@ -188,7 +316,7 @@
 .game-card {
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--ifm-color-emphasis-300);
+  border: 1px solid var(--takaro-border-themed);
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.2s ease;