docs: split the brand chroma per ladder so the dark shades stop clipping

Author: johannschopplich

docs/.vitepress/theme/vars.css

@@ -1,30 +1,29 @@
 /* #region Colors: Brand */
 
-/* Single-source OKLCH palette – warm red, logo-derived. */
+/* Single-source OKLCH palette – warm red, logo-derived. Chroma is split per ladder
+   because sRGB runs out of gamut at the dark ladder's L82 well before it does
+   at the light ladder's L47. */
 
 :root {
   --brand-h: 16;
   --brand-c: 0.16;
+  --brand-c-dark: 0.107;
 
   --vp-c-brand-1: oklch(47% var(--brand-c) var(--brand-h));
   --vp-c-brand-2: oklch(52% var(--brand-c) var(--brand-h));
-  --vp-c-brand-3: oklch(57% var(--brand-c) var(--brand-h));
+  --vp-c-brand-3: oklch(55% var(--brand-c) var(--brand-h));
   --vp-c-brand-soft: oklch(
     55% calc(var(--brand-c) * 0.7) var(--brand-h) / 0.14
   );
-
-  --vp-c-sponsor: #ca2971;
 }
 
 .dark {
-  --vp-c-brand-1: oklch(82% calc(var(--brand-c) * 0.95) var(--brand-h));
-  --vp-c-brand-2: oklch(78% var(--brand-c) var(--brand-h));
-  --vp-c-brand-3: oklch(74% var(--brand-c) var(--brand-h));
+  --vp-c-brand-1: oklch(82% calc(var(--brand-c-dark) * 0.95) var(--brand-h));
+  --vp-c-brand-2: oklch(78% var(--brand-c-dark) var(--brand-h));
+  --vp-c-brand-3: oklch(74% var(--brand-c-dark) var(--brand-h));
   --vp-c-brand-soft: oklch(
-    75% calc(var(--brand-c) * 0.7) var(--brand-h) / 0.16
+    75% calc(var(--brand-c-dark) * 0.7) var(--brand-h) / 0.16
   );
-
-  --vp-c-sponsor: #ee4e95;
 }
 
 /* #endregion */
@@ -46,12 +45,12 @@
   --vp-home-hero-name-background: linear-gradient(
     120deg,
     oklch(72% 0.17 var(--brand-h)) 30%,
-    oklch(87% 0.16 48)
+    oklch(80% 0.124 48)
   );
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
     oklch(72% 0.17 var(--brand-h) / 0.38) 30%,
-    oklch(87% 0.16 48 / 0.38)
+    oklch(80% 0.124 48 / 0.38)
   );
   --vp-home-hero-image-filter: blur(30px);
 }