diff --git a/src/components/AnimatedStars.astro b/src/components/AnimatedStars.astro
index dcf4873ae..853b7e992 100644
--- a/src/components/AnimatedStars.astro
+++ b/src/components/AnimatedStars.astro
@@ -69,11 +69,11 @@
     width: 100%;
     height: 100%;
     background-image:
-      radial-gradient(2px 2px at 20% 15%, rgba(255,255,255,0.8), transparent),
+      radial-gradient(2px 2px at 20% 15%, oklch(1 0 0 / 0.8), transparent),
       radial-gradient(1px 1px at 45% 35%, white, transparent),
-      radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.7), transparent),
+      radial-gradient(1px 1px at 65% 55%, oklch(1 0 0 / 0.7), transparent),
       radial-gradient(2px 2px at 80% 25%, white, transparent),
-      radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.9), transparent),
+      radial-gradient(1px 1px at 35% 75%, oklch(1 0 0 / 0.9), transparent),
       radial-gradient(1px 1px at 55% 45%, white, transparent);
     background-size:
       300px 300px,
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 3af5d0131..5da098a59 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -9,7 +9,7 @@ const gitVersion = __GIT_VERSION__;
 
 <footer>
   <div class="footer-flowers-bg" aria-hidden="true"></div>
-  <div class="text-white max-w-4xl lg:max-w-6xl mx-auto py-10 px-6 footer-inner">
+  <div class="text-[var(--color-text)] max-w-4xl lg:max-w-6xl mx-auto py-10 px-6 footer-inner">
     <div class="footer-top-row">
       <div>
         <p class="footer-title"><span class="footer-title-ep">#EP</span><span class="footer-title-year">2026</span></p>
@@ -51,24 +51,24 @@ const gitVersion = __GIT_VERSION__;
   </div>
 
   <div class="flex flex-wrap gap-2 justify-between">
-    <div class="w-full py-2 border-t border-b border-white/10">
+    <div class="w-full py-2 border-t border-b border-[var(--color-border)]">
       <div
         class="flex flex-col lg:flex-row self-center gap-2 lg:gap-12 justify-end"
       >
         <div
-          class="flex flex-col text-white/60 w-full lg:w-2/3 p-5 items-center text-center"
+          class="flex flex-col text-[var(--color-text-faint)] w-full lg:w-2/3 p-5 items-center text-center"
         >
           <p>
             Excited about our mission? Want to collaborate or contribute? Let's
             connect! We're open to partnership opportunities and would love to
             hear your ideas.
-            <a class="text-white/80 hover:text-white underline" href="mailto:helpdesk@europython.eu"
+            <a class="text-[var(--color-text-secondary)] hover:text-[var(--color-text)] underline" href="mailto:helpdesk@europython.eu"
               >helpdesk@europython.eu</a
             >
           </p>
         </div>
         <div
-          class="flex text-white/60 w-full lg:w-1/3 justify-center text-start mb-4 lg:mb-0"
+          class="flex text-[var(--color-text-faint)] w-full lg:w-1/3 justify-center text-start mb-4 lg:mb-0"
         >
           <div>
             <EPSLogo width="90" height="90" class="w-[90px] mr-4 h-auto" />
@@ -93,7 +93,7 @@ const gitVersion = __GIT_VERSION__;
           links.terms.map((item) => (
             <a
               href={item.path}
-              class="text-white/80 hover:text-primary-hover transition-colors duration-200 mx-2"
+              class="text-[var(--color-text-secondary)] hover:text-[var(--color-primary-hover)] transition-colors duration-200 mx-2"
             >
               {item.name}
               {item.path.startsWith("http") && (
@@ -116,7 +116,7 @@ const gitVersion = __GIT_VERSION__;
     </div>
   </div>
 
-  <p class="mb-16 text-white/80 text-center">
+  <p class="mb-16 text-[var(--color-text-secondary)] text-center">
     version: {gitVersion} @ {buildTimestamp}
   </p>
 </div>
@@ -126,7 +126,7 @@ const gitVersion = __GIT_VERSION__;
   footer {
     position: relative;
     overflow: hidden;
-    background: var(--color-footer-bg, #0a0003);
+    background: var(--color-footer-bg);
   }
 
   .footer-inner {
@@ -147,16 +147,16 @@ const gitVersion = __GIT_VERSION__;
   }
 
   .footer-title-ep {
-    color: #fff;
+    color: var(--color-text);
   }
 
   .footer-title-year {
-    color: var(--color-footer-red, #d4003a);
+    color: var(--color-footer-red);
   }
 
   .footer-subtitle {
     font-size: 1rem;
-    color: var(--color-footer-text-muted, rgba(255,255,255,0.70));
+    color: var(--color-footer-text-muted);
     margin-bottom: 3rem;
     letter-spacing: 0.1em;
   }
@@ -176,7 +176,7 @@ const gitVersion = __GIT_VERSION__;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 1.5rem;
-    border-top: 3px solid var(--color-footer-gray, #222);
+    border-top: 3px solid var(--color-footer-gray);
     padding: 2rem 0;
     margin: 1rem 0;
   }
@@ -185,7 +185,7 @@ const gitVersion = __GIT_VERSION__;
     font-weight: 700;
     font-size: 1rem;
     text-transform: uppercase;
-    color: var(--color-footer-accent, #f0c040);
+    color: var(--color-text);
     margin-bottom: 1rem;
   }
 
@@ -200,12 +200,12 @@ const gitVersion = __GIT_VERSION__;
 
   .footer-links a {
     font-size: 1.1rem;
-    color: var(--color-footer-text-secondary, rgba(255,255,255,0.78));
+    color: var(--color-footer-text-secondary);
     text-decoration: none;
   }
 
   .footer-links a:hover {
-    color: #fff;
+    color: var(--color-text);
     text-decoration: underline;
   }
 
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 43d7c552c..7772cbc99 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,6 +1,7 @@
 ---
 import HeaderLogo from "@components/header/header-logo.astro";
 import Search from "@components/Search.astro";
+import ThemeToggle from "@components/ThemeToggle.astro";
 
 import links from "@data/links.json";
 
@@ -57,6 +58,7 @@ interface NavItem {
       )
     ))}
   </ul>
+  <ThemeToggle />
   <button class="nav-search-btn" id="nav-search-btn" aria-label="Search">
     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
       <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
@@ -78,13 +80,13 @@ nav {
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  background: rgba(10,10,20,0.95);
+  background: oklch(0.155 0.034 281.7 / 0.95); /* #0a0a1a */
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
-  border-bottom: 1px solid rgba(255,255,255,0.08);
+  border-bottom: 1px solid var(--color-surface-medium);
   padding: 0.55rem calc((100% - 1200px) / 2);
   white-space: nowrap;
-  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
+  box-shadow: 0 2px 20px oklch(0 0 0 / 0.05);
   transition: transform 0.3s ease-in-out;
   transform: translateY(0);
 }
@@ -111,7 +113,7 @@ nav {
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.07em;
-  color: rgba(255,255,255,0.93);
+  color: var(--color-text-primary);
   text-decoration: none;
   border-radius: 2px;
   transition: color 0.15s, background 0.15s;
@@ -120,8 +122,8 @@ nav {
 .nav-item > a:hover,
 .nav-item:hover > a,
 .nav-item > a:focus {
-  color: #ffffff;
-  background: rgba(255,255,255,0.10);
+  color: var(--color-text);
+  background: var(--color-border);
 }
 
 .nav-arrow {
@@ -155,11 +157,11 @@ nav {
 }
 
 .nav-dropdown-inner {
-  background: rgba(10,10,20,0.95);
-  border: 1px solid rgba(255,255,255,0.25);
+  background: oklch(0.155 0.034 281.7 / 0.95); /* #0a0a1a */
+  border: 1px solid var(--color-border-bright);
   border-radius: 2px;
   padding: 0.5rem;
-  box-shadow: 0 16px 48px rgba(0,0,0,0.75), 0 4px 12px rgba(0,0,0,0.4);
+  box-shadow: 0 16px 48px var(--color-scrim-15), 0 4px 12px var(--color-scrim-15);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }
@@ -176,7 +178,7 @@ nav {
   font-family: 'Roboto', sans-serif;
   font-weight: 600;
   font-size: 0.95rem;
-  color: rgba(255,255,255,0.93);
+  color: var(--color-text-primary);
   text-decoration: none;
   border-radius: 2px;
   letter-spacing: 0.02em;
@@ -185,8 +187,8 @@ nav {
   white-space: nowrap;
 }
 .nav-dropdown li a:hover {
-  color: #ffffff;
-  background: rgba(255,255,255,0.15);
+  color: var(--color-text);
+  background: var(--color-border-strong);
 }
 
 .nav-ext {
@@ -201,14 +203,14 @@ nav {
   display: flex;
   align-items: center;
   gap: 0.45rem;
-  background: rgba(255,255,255,0.08);
-  border: 1px solid rgba(255,255,255,0.15);
+  background: var(--color-surface-medium);
+  border: 1px solid var(--color-border-strong);
   border-radius: 4px;
   padding: 0.45rem 0.9rem;
   margin-left: auto;
   margin-right: 0.5rem;
   cursor: pointer;
-  color: rgba(255,255,255,0.78);
+  color: var(--color-text-secondary);
   font-family: 'Roboto', sans-serif;
   font-size: 1rem;
   transition: background 0.15s, color 0.15s;
@@ -216,16 +218,16 @@ nav {
 }
 
 .nav-search-btn:hover {
-  background: rgba(255,255,255,0.15);
-  color: #ffffff;
+  background: var(--color-border-strong);
+  color: var(--color-text);
 }
 
 .nav-cta {
   font-size: 0.88rem;
   letter-spacing: 0.07em;
   text-transform: uppercase;
-  color: #ffffff;
-  background: linear-gradient(to bottom, #d62020, #8a0020);
+  color: var(--color-white);
+  background: linear-gradient(to bottom, var(--color-cta-red), var(--color-cta-red-dark));
   border-radius: 2px;
   padding: 0.6rem 1.5rem;
   text-decoration: none;
@@ -263,7 +265,7 @@ nav {
     display: block;
     width: 24px;
     height: 2px;
-    background: rgba(255,255,255,0.93);
+    background: var(--color-text-primary);
     border-radius: 1px;
     transition: transform 0.2s, opacity 0.2s;
   }
@@ -277,7 +279,7 @@ nav {
     position: fixed;
     inset: 0;
     height: 100dvh;
-    background: rgba(10,10,20,0.95);
+    background: oklch(0.155 0.034 281.7 / 0.95); /* #0a0a1a */
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     flex-direction: column;
@@ -293,7 +295,7 @@ nav {
   .nav-item > a {
     font-size: 1.1rem;
     padding: 0.8rem 0;
-    border-bottom: 1px solid rgba(255,255,255,0.10);
+    border-bottom: 1px solid var(--color-border);
   }
 
   .nav-search-btn {
@@ -315,10 +317,10 @@ nav {
     font-size: 1.1rem;
     text-transform: uppercase;
     letter-spacing: 0.07em;
-    color: rgba(255,255,255,0.93);
+    color: var(--color-text-primary);
     background: none;
     border: none;
-    border-bottom: 1px solid rgba(255,255,255,0.10);
+    border-bottom: 1px solid var(--color-border);
     cursor: pointer;
     text-align: left;
   }
@@ -363,6 +365,50 @@ nav {
 .nav-hidden {
   transform: translateY(-100%);
 }
+
+:global(.light) nav {
+  background: oklch(1 0 0 / 0.95) !important;
+  border-bottom-color: oklch(0 0 0 / 0.1) !important;
+}
+
+:global(.light) nav a:not(.nav-cta),
+:global(.light) .nav-item > a,
+:global(.light) .nav-toggle span,
+:global(.light) .theme-toggle {
+  color: oklch(0.228 0.038 282.9) !important; /* #1a1a2e */
+}
+
+:global(.light) .nav-search-btn {
+  background: oklch(0 0 0 / 0.04) !important;
+  border-color: var(--color-scrim-15) !important;
+  color: var(--color-scrim-50) !important;
+}
+
+:global(.light) .nav-search-btn:hover {
+  color: oklch(0.228 0.038 282.9) !important; /* #1a1a2e */
+}
+
+:global(.light) a.nav-cta {
+  background: linear-gradient(to bottom, var(--color-cta-red), var(--color-cta-red-dark)) !important;
+  color: var(--color-white) !important;
+}
+
+:global(.light) .nav-dropdown-inner {
+  background: oklch(1 0 0 / 0.95) !important;
+  border-color: var(--color-scrim-15) !important;
+}
+
+:global(.light) .nav-dropdown li a {
+  color: oklch(0.228 0.038 282.9) !important; /* #1a1a2e */
+}
+
+:global(.light) .nav-dropdown li a:hover {
+  background: oklch(0 0 0 / 0.04) !important;
+}
+
+:global(.light) .nav-links {
+  background: oklch(1 0 0 / 0.95) !important;
+}
 </style>
 
 <script>
diff --git a/src/components/InstallPWA.astro b/src/components/InstallPWA.astro
index 3233b1039..d4169e9ba 100644
--- a/src/components/InstallPWA.astro
+++ b/src/components/InstallPWA.astro
@@ -21,7 +21,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background: #4caf50;
+  background: oklch(0.673 0.162 144.2); /* #4caf50 */
   color: white;
   text-align: center;
   padding: 1rem;
diff --git a/src/components/JobCard.astro b/src/components/JobCard.astro
index 17a56ad4d..fc4f55b98 100644
--- a/src/components/JobCard.astro
+++ b/src/components/JobCard.astro
@@ -91,7 +91,7 @@ const { title, location, type, level, salary, description, responsibilities, min
     border: 1px solid transparent;
     text-decoration: none;
     transition: all 0.1s ease;
-    background: linear-gradient(to right, #16a34a, #22c55e);
+    background: linear-gradient(to right, oklch(0.627 0.17 149.2) /* #16a34a */, oklch(0.723 0.192 149.6) /* #22c55e */);
   }
 
   .apply-btn:hover {
diff --git a/src/components/NavItems.astro b/src/components/NavItems.astro
index 8f65697c8..e18a6f958 100644
--- a/src/components/NavItems.astro
+++ b/src/components/NavItems.astro
@@ -21,7 +21,7 @@ const { items, inverted = false, level = 1 } = Astro.props;
   class={clsx(
     level === 1 && "ml-1 flex flex-col xl:flex-row",
     level === 2 && "mb-3 xl:bg-secondary xl:mt-2 xl:rounded-[30px] xl:min-w-[220px]",
-    level === 3 && "bg-[#1c294b] xl:rounded-[20px] xl:my-1 xl:mx-2 xl:min-w-[200px]",
+    level === 3 && "bg-[var(--color-nav-level)] xl:rounded-[20px] xl:my-1 xl:mx-2 xl:min-w-[200px]",
     level > 1 && "shadow-lg"
   )}
   role={level === 1 ? "menubar" : "menu"}
@@ -181,7 +181,7 @@ const { items, inverted = false, level = 1 } = Astro.props;
 
   /* Focus styles for keyboard navigation */
   [role="menuitem"]:focus-visible {
-    outline: 2px solid #3583E2;
+    outline: 2px solid oklch(0.61 0.163 255.4); /* #3583E2 */
     outline-offset: -2px;
     border-radius: 50%;
   }
diff --git a/src/components/Offline.astro b/src/components/Offline.astro
index 785b068fa..eef45fcc9 100644
--- a/src/components/Offline.astro
+++ b/src/components/Offline.astro
@@ -27,18 +27,18 @@
     bottom: 10px;
     right: 10px;
     z-index: 9999;
-    background: #ffe0e0;
-    color: #a00;
+    background: oklch(0.932 0.034 17.8); /* #ffe0e0 */
+    color: oklch(0.463 0.19 29.2); /* #a00 */
     padding: 8px 12px;
     border-radius: 8px;
-    border: 1px solid #a00;
+    border: 1px solid oklch(0.463 0.19 29.2); /* #a00 */
     font-family: sans-serif;
     font-size: 14px;
     font-weight: bold;
     display: flex;
     align-items: center;
     gap: 6px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 6px oklch(0 0 0 / 0.2);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
diff --git a/src/components/Search.astro b/src/components/Search.astro
index 84404f713..f62c968e2 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -37,7 +37,7 @@ import SearchComponent from "astro-pagefind/components/Search";
 .search-modal-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(0,0,0,0.7);
+  background: var(--color-scrim-70);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }
@@ -47,20 +47,20 @@ import SearchComponent from "astro-pagefind/components/Search";
   width: 100%;
   max-width: 680px;
   margin: 0 1.5rem;
-  background: #080f1a;
-  border: 1px solid rgba(100,160,255,0.2);
+  background: var(--color-section-bg);
+  border: 1px solid oklch(0.708 0.153 259.2 / 0.2); /* #64a0ff */
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
+  box-shadow: 0 16px 48px var(--color-scrim-50);
 }
 
 /* ── Pagefind overrides (use :global because .pagefind-ui elements are rendered by external SearchComponent, not this component) ── */
 .search-modal-content :global(.pagefind-ui) {
   --pagefind-ui-scale: 1;
-  --pagefind-ui-primary: #fff5f0;
-  --pagefind-ui-text: rgba(255,255,255,0.78);
+  --pagefind-ui-primary: var(--color-cream);
+  --pagefind-ui-text: var(--color-text-secondary);
   --pagefind-ui-background: transparent;
-  --pagefind-ui-border: rgba(255,255,255,0.10);
+  --pagefind-ui-border: var(--color-border);
   --pagefind-ui-border-width: 1px;
   --pagefind-ui-border-radius: 8px;
   --pagefind-ui-image-border-radius: 4px;
@@ -73,21 +73,21 @@ import SearchComponent from "astro-pagefind/components/Search";
   width: 100%;
   font-family: 'Roboto', sans-serif;
   font-size: 1.1rem;
-  color: #ffffff;
+  color: var(--color-text);
   background: transparent !important;
   border: none !important;
-  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
+  border-bottom: 1px solid var(--color-border) !important;
   outline: none;
   border-radius: 0 !important;
   box-shadow: none !important;
 }
 
 .search-modal-content :global(.pagefind-ui__search-input)::placeholder {
-  color: rgba(255,255,255,0.60);
+  color: var(--color-text-faint);
 }
 
 .search-modal-content :global(.pagefind-ui__search-input:focus) {
-  border-bottom-color: #f0c040 !important;
+  border-bottom-color: var(--color-accent) !important;
 }
 
 /* Hide pagefind's clear button */
@@ -105,7 +105,7 @@ import SearchComponent from "astro-pagefind/components/Search";
 .search-modal-content :global(.pagefind-ui__result) {
   display: block;
   padding: 0.8rem 1.4rem;
-  border-bottom: 1px solid rgba(255,255,255,0.03);
+  border-bottom: 1px solid var(--color-surface-faint);
   text-decoration: none;
   cursor: pointer;
   transition: background 0.12s;
@@ -117,7 +117,7 @@ import SearchComponent from "astro-pagefind/components/Search";
 
 .search-modal-content :global(.pagefind-ui__result:hover),
 .search-modal-content :global(.pagefind-ui__result[data-selected]) {
-  background: rgba(100,160,255,0.1);
+  background: oklch(0.708 0.153 259.2 / 0.1); /* #64a0ff */
 }
 
 /* Result link */
@@ -125,27 +125,27 @@ import SearchComponent from "astro-pagefind/components/Search";
   font-family: 'Roboto', sans-serif;
   font-weight: 600;
   font-size: 1.1rem;
-  color: #fff5f0;
+  color: var(--color-cream);
   text-decoration: none;
 }
 
 .search-modal-content :global(.pagefind-ui__result-link:hover) {
-  color: #ffffff;
+  color: var(--color-text);
 }
 
 /* Excerpt */
 .search-modal-content :global(.pagefind-ui__result-excerpt) {
   font-family: 'Roboto', sans-serif;
   font-size: 1rem;
-  color: rgba(255,255,255,0.70);
+  color: var(--color-text-muted);
   margin-top: 0.15rem;
   line-height: 1.5;
 }
 
 /* Highlighted search terms */
 .search-modal-content :global(.pagefind-ui__result) mark {
-  background: rgba(240,192,64,0.2);
-  color: #f0c040;
+  background: oklch(0.831 0.142 84.4 / 0.2);
+  color: var(--color-accent);
   padding: 0.1em 0.2em;
   border-radius: 2px;
 }
@@ -153,7 +153,7 @@ import SearchComponent from "astro-pagefind/components/Search";
 /* Status message */
 .search-modal-content :global(.pagefind-ui__message) {
   font-family: 'Roboto', sans-serif;
-  color: rgba(255,255,255,0.60);
+  color: var(--color-text-faint);
   padding: 1.2rem 1.4rem;
   font-size: 1.1rem;
 }
@@ -163,7 +163,7 @@ import SearchComponent from "astro-pagefind/components/Search";
   content: "Type to search…";
   display: block;
   padding: 1.2rem 1.4rem;
-  color: rgba(255,255,255,0.60);
+  color: var(--color-text-faint);
   font-size: 1.1rem;
 }
 
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
index d33fc21e6..ccef08133 100644
--- a/src/components/SocialLinks.astro
+++ b/src/components/SocialLinks.astro
@@ -7,18 +7,18 @@ const {
   variant = "color",
 } = Astro.props;
 const socialMap = {
-  website: { icon: "globe", label: "Website", color: "#0077b5" },
-  blog: { icon: "rss", label: "Blog", color: "#f26522", style: "solid" },
-  linkedin: { icon: "linkedin", label: "LinkedIn", color: "#0a66c2" },
-  github: { icon: "github", label: "GitHub", color: "#333333" },
-  youtube: { icon: "youtube", label: "YouTube", color: "#ff0000" },
-  discord: { icon: "discord", label: "Discord", color: "#5865f2" },
-  mastodon: { icon: "mastodon", label: "Mastodon", color: "#6364ff" },
-  bluesky: { icon: "bluesky", label: "Bluesky", color: "#0085ff" },
-  instagram: { icon: "instagram", label: "Instagram", color: "#e4405f" },
-  tiktok: { icon: "tiktok", label: "TikTok", color: "#000000" },
-  facebook: { icon: "facebook", label: "Facebook", color: "#1877f2" },
-  twitter: { icon: "x-twitter", label: "Twitter", color: "#1da1f2" },
+  website: { icon: "globe", label: "Website", color: "oklch(0.546 0.13 242.3)" /* #0077b5 */ },
+  blog: { icon: "rss", label: "Blog", color: "oklch(0.676 0.189 42.0)" /* #f26522 */, style: "solid" },
+  linkedin: { icon: "linkedin", label: "LinkedIn", color: "oklch(0.516 0.163 254.7)" /* #0a66c2 */ },
+  github: { icon: "github", label: "GitHub", color: "oklch(0.321 0 0)" /* #333333 */ },
+  youtube: { icon: "youtube", label: "YouTube", color: "oklch(0.628 0.258 29.2)" /* #ff0000 */ },
+  discord: { icon: "discord", label: "Discord", color: "oklch(0.577 0.209 273.9)" /* #5865f2 */ },
+  mastodon: { icon: "mastodon", label: "Mastodon", color: "oklch(0.593 0.224 276.8)" /* #6364ff */ },
+  bluesky: { icon: "bluesky", label: "Bluesky", color: "oklch(0.626 0.205 254.9)" /* #0085ff */ },
+  instagram: { icon: "instagram", label: "Instagram", color: "oklch(0.619 0.2 14.6)" /* #e4405f */ },
+  tiktok: { icon: "tiktok", label: "TikTok", color: "var(--color-black)" },
+  facebook: { icon: "facebook", label: "Facebook", color: "oklch(0.589 0.203 257.9)" /* #1877f2 */ },
+  twitter: { icon: "x-twitter", label: "Twitter", color: "oklch(0.682 0.158 243.4)" /* #1da1f2 */ },
 };
 ---
 
@@ -28,7 +28,8 @@ const socialMap = {
       .filter(([key]) => socials?.[key])
       .map(([key, { icon, label, color, style: iconStyle = "brands" }]) => {
         const url = socials[key];
-        const style = variant === "color" && color ? `color: ${color}` : {variant};
+        const style =
+          variant === "color" && color ? `color: ${color}` : "color: currentColor";
         return (
           <a
             href={url}
diff --git a/src/components/SocialMediaCard.astro b/src/components/SocialMediaCard.astro
index eabd355ce..55df632a6 100644
--- a/src/components/SocialMediaCard.astro
+++ b/src/components/SocialMediaCard.astro
@@ -65,7 +65,7 @@ const sessions: CollectionEntry<"sessions">[] = session
       width: 450px;
       height: 320px;
       font-size: 100px;
-      color: rgb(239, 215, 123);
+      color: oklch(0.88 0.116 95.1); /* #efd77b */
       padding: 1rem;
   }
 
@@ -88,7 +88,7 @@ const sessions: CollectionEntry<"sessions">[] = session
       width: 900px;
       height: 320px;
       font-size: 100px;
-      color: rgb(239, 215, 123);
+      color: oklch(0.88 0.116 95.1); /* #efd77b */
       padding: 1rem;
   }
 
diff --git a/src/components/SocialMediaSponsorCard.astro b/src/components/SocialMediaSponsorCard.astro
index f6bbcc4d4..d5b7e7c93 100644
--- a/src/components/SocialMediaSponsorCard.astro
+++ b/src/components/SocialMediaSponsorCard.astro
@@ -107,7 +107,7 @@ const y = 670 - (height + padding.top + padding.bottom) / 2 + padding.top;
       width: 630px;
       height: 150px;
       font-size: 100px;
-      color: rgb(239, 215, 123);
+      color: oklch(0.88 0.116 95.1); /* #efd77b */
       padding: 1rem;
       opacity: 0;
   }
@@ -127,7 +127,7 @@ const y = 670 - (height + padding.top + padding.bottom) / 2 + padding.top;
       width: 800px;
       height: 300px;
       font-size: 100px;
-      color: rgb(239, 215, 123);
+      color: oklch(0.88 0.116 95.1); /* #efd77b */
       padding: 1rem;
   }
 
diff --git a/src/components/SponsorCard.astro b/src/components/SponsorCard.astro
index ab7254675..0411db410 100644
--- a/src/components/SponsorCard.astro
+++ b/src/components/SponsorCard.astro
@@ -78,11 +78,11 @@ const logo = sponsorLogos[sponsor.id];
           {industry} {industry && location && <>—</>} {location}
         </p>
 
-        <p class="py-6 " style="border: 0 solid rgba(255,255,255,0.1); border-width: 1px 0 0 0;">{description}</p>
+        <p class="py-6 " style="border: 0 solid var(--color-border); border-width: 1px 0 0 0;">{description}</p>
 
 
         {showJobs && jobs && (
-          <div class="py-6 " style="border: 0 solid rgba(255,255,255,0.1); border-width: 1px 0 0 0;">
+          <div class="py-6 " style="border: 0 solid var(--color-border); border-width: 1px 0 0 0;">
             <h3 class="text-xl font-semibold">Job offers</h3>
             <ul class="list-disc list-inside" >
               {Object.values(jobs).map((job) => (
@@ -136,7 +136,7 @@ const logo = sponsorLogos[sponsor.id];
     display: inline-block;
     padding: 8px 24px;
     margin: 0 0 12px 0;
-    color: var(--color-text-primary-dark, rgba(255,255,255,0.93));
+    color: var(--color-text-primary);
     border-radius: 9999px;
     border: 1px solid transparent;
     text-decoration: none;
@@ -144,17 +144,17 @@ const logo = sponsorLogos[sponsor.id];
   }
 
   .website-btn-outline {
-    border: 1px solid #1a56db;
+    border: 1px solid var(--color-blue);
   }
 
   .website-btn {
-    background: linear-gradient(to right, #1a56db, #4f46e5);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(to right, var(--color-blue), oklch(0.511 0.234 276.9) /* #4f46e5 */);
+    box-shadow: 0 2px 4px oklch(0 0 0 / 0.1); /* rgba(0,0,0,0.1) */
     font-weight: 700;
   }
 
   .website-btn-outline {
-    color: #1a56db;
+    color: var(--color-blue);
   }
 
   .website-btn:hover ,  .website-btn-outline:hover {
diff --git a/src/components/SprintCard.astro b/src/components/SprintCard.astro
index ffc308d64..75a55a922 100644
--- a/src/components/SprintCard.astro
+++ b/src/components/SprintCard.astro
@@ -63,8 +63,8 @@ const { data, body } = sprint;
 
 <style>
   .sprint-card {
-    background: rgba(255,255,255,0.05);
-    border: 1px solid rgba(255,255,255,0.10);
+    background: var(--color-surface-subtle);
+    border: 1px solid var(--color-border);
     border-radius: 6px;
     padding: 1.5rem;
     margin-bottom: 2rem;
@@ -72,6 +72,6 @@ const { data, body } = sprint;
   }
 
   .sprint-card:hover {
-    border-color: var(--color-accent, #f0c040);
+    border-color: var(--color-accent);
   }
 </style>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
new file mode 100644
index 000000000..bafa2ee67
--- /dev/null
+++ b/src/components/ThemeToggle.astro
@@ -0,0 +1,80 @@
+---
+const { class: className = "" } = Astro.props;
+---
+
+<button id="theme-toggle" class="theme-toggle {className}" aria-label="Toggle theme">
+  <svg class="theme-icon-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+  </svg>
+  <svg class="theme-icon-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <circle cx="12" cy="12" r="5"/>
+    <line x1="12" y1="1" x2="12" y2="3"/>
+    <line x1="12" y1="21" x2="12" y2="23"/>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+    <line x1="1" y1="12" x2="3" y2="12"/>
+    <line x1="21" y1="12" x2="23" y2="12"/>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+  </svg>
+</button>
+
+<style>
+  .theme-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.45rem;
+    border-radius: 4px;
+    color: var(--color-text-secondary);
+    transition: color 0.2s, background 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .theme-toggle:hover {
+    color: var(--color-text);
+    background: var(--color-border);
+  }
+
+  :global(.light) .theme-toggle {
+    color: oklch(0.228 0.038 282.9); /* #1a1a2e */
+  }
+
+  :global(.light) .theme-toggle:hover {
+    color: oklch(0.228 0.038 282.9); /* #1a1a2e */
+    background: oklch(0 0 0 / 0.06);
+  }
+
+  .theme-toggle svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .theme-icon-dark { display: block; }
+  .theme-icon-light { display: none; }
+
+  :global(.light) .theme-icon-dark { display: none; }
+  :global(.light) .theme-icon-light { display: block; }
+</style>
+
+<script is:inline>
+  (function() {
+    var stored = localStorage.getItem('theme');
+    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (stored === 'light' || (!stored && !prefersDark)) {
+      document.documentElement.classList.add('light');
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+      var btn = document.getElementById('theme-toggle');
+      if (!btn) return;
+      btn.addEventListener('click', function() {
+        document.documentElement.classList.toggle('light');
+        var isLight = document.documentElement.classList.contains('light');
+        localStorage.setItem('theme', isLight ? 'light' : 'dark');
+      });
+    });
+  })();
+</script>
diff --git a/src/components/header/header-actions.astro b/src/components/header/header-actions.astro
index bcb93aedb..f81481c38 100644
--- a/src/components/header/header-actions.astro
+++ b/src/components/header/header-actions.astro
@@ -1,6 +1,7 @@
 ---
 import Button from "@ui/Button.astro";
 import Icon from "@ui/Icon.astro";
+import ThemeToggle from "@components/ThemeToggle.astro";
 
 export interface Props {
   mobile?: boolean;
@@ -18,8 +19,9 @@ const IS_LIVE = false;
     !mobile ?
       <>
 
-        <button
-          id="searchButton"
+        <ThemeToggle />
+          <button
+            id="searchButton"
           class="mx-6 md:mx-2"
             data-open-modal="modal-search"
             aria-label="Search"
@@ -50,7 +52,7 @@ const IS_LIVE = false;
 		gap: 0.5rem;
 		border: 0;
 		background-color: transparent;
-    color: grey;
+    color: oklch(0.6 0 0); /* grey */
 		cursor: pointer;
 		height: 2.5rem;
 		font-size: 28px;
@@ -58,20 +60,20 @@ const IS_LIVE = false;
 
 	@media (min-width: 45rem) {
 		button[data-open-modal] {
-			border: 1px solid #ccc;
+			border: 1px solid oklch(0.845 0 0); /* #ccc */
 			border-radius: 0.5rem;
 			padding-inline-start: 0.75rem;
 			padding-inline-end: 0.5rem;
-			background-color: #fff;
+			background-color: var(--color-white);
 			font-size: 16px;
       width:100%;
 			min-width: 10rem;
 			max-width: 22rem;
-			color: #5f3d1b;
+			color: oklch(0.392 0.068 63.4); /* #5f3d1b */
 		}
 		button[data-open-modal]:hover {
-			border-color: #5f3d1b;
-      color: #000;
+			border-color: oklch(0.392 0.068 63.4); /* #5f3d1b */
+      color: var(--color-black);
 		}
 
 		button[data-open-modal] > :last-child {
@@ -84,8 +86,8 @@ const IS_LIVE = false;
 			font-size: 16px;
 		gap: 0.25em;
 		padding-inline: 0.375rem;
-		background-color: #F1E1D4;
-    color: #5f3d1b;
+		background-color: oklch(0.919 0.025 61.6); /* #F1E1D4 */
+    color: oklch(0.392 0.068 63.4); /* #5f3d1b */
 	}
 
 	kbd {
@@ -102,6 +104,6 @@ const IS_LIVE = false;
 		border: 0;
 		background: transparent;
 		cursor: pointer;
-		color: #333;
+		color: oklch(0.321 0 0); /* #333 */
 	}
 </style>
diff --git a/src/components/header/header-logo.astro b/src/components/header/header-logo.astro
index 2fd18a9c9..15429c41a 100644
--- a/src/components/header/header-logo.astro
+++ b/src/components/header/header-logo.astro
@@ -28,7 +28,7 @@ interface Props {
 }
 
 .nav-logo-ep {
-  color: #ffffff;
+  color: var(--color-text);
 }
 
 .nav-logo-year {
diff --git a/src/components/markdown/HighlightCard.astro b/src/components/markdown/HighlightCard.astro
index 5f87dda37..717e2787c 100644
--- a/src/components/markdown/HighlightCard.astro
+++ b/src/components/markdown/HighlightCard.astro
@@ -1,4 +1,4 @@
-<div class="highlight-card rounded-lg p-5 mt-6 border border-white/10 bg-[#141720]">
+<div class="highlight-card rounded-lg p-5 mt-6 border border-[var(--color-border)] bg-[var(--color-card)]">
     <slot />
 </div>
 
diff --git a/src/components/profile/ProfileCard.astro b/src/components/profile/ProfileCard.astro
index adea920fb..200b1c4c9 100644
--- a/src/components/profile/ProfileCard.astro
+++ b/src/components/profile/ProfileCard.astro
@@ -50,9 +50,9 @@ const isExternal = Boolean(url);
     object-fit: cover;
     margin:0;
     border-width: 4px;
-    border-color: white;
+    border-color: var(--color-white);
     border-style: solid;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -2px oklch(0 0 0 / 0.05); /* rgba(0,0,0,0.1), rgba(0,0,0,0.05) */
   }
 
   .profile-text {
diff --git a/src/components/schedule/break.astro b/src/components/schedule/break.astro
index 49041fc45..c1b3d0f9f 100644
--- a/src/components/schedule/break.astro
+++ b/src/components/schedule/break.astro
@@ -26,8 +26,8 @@ const label = [time, title].filter(Boolean).join(" ");
     font-size: 0.95rem;
     color: var(--ep-text-secondary);
     font-weight: 500;
-    background: rgba(255,150,0,0.06);
-    border: 2px solid rgba(255,150,0,0.18);
+    background: oklch(0.75 0.171 60.3 / 0.06); /* rgba(255,150,0,0.06) */
+    border: 2px solid oklch(0.75 0.171 60.3 / 0.18); /* rgba(255,150,0,0.18) */
     border-radius: 6px;
   }
 
diff --git a/src/components/schedule/day.astro b/src/components/schedule/day.astro
index 406fceec1..3958831b1 100644
--- a/src/components/schedule/day.astro
+++ b/src/components/schedule/day.astro
@@ -499,13 +499,13 @@ const dateText = format(date, "EEE eeee, MMMM d");
       align-items: center;
       text-align: center;
       justify-items: center;
-      background: #2d3548;
-      border: 1px solid rgba(255,255,255,0.08);
+      background: var(--ep-day-end-bg);
+      border: 1px solid var(--color-surface-medium);
       border-radius: 4px;
       margin: 0.5rem 0;
       padding: 0.5rem 1rem;
       font-size: 1rem;
-      color: rgba(255,255,255,0.55);
+      color: var(--ep-day-end-text);
     }
   }
 
@@ -553,10 +553,10 @@ const dateText = format(date, "EEE eeee, MMMM d");
     min-height: 0;
     overflow: hidden;
     white-space: nowrap;
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid var(--color-surface-medium);
     border-radius: 4px;
-    background: #151f38;
-    color: rgba(255,255,255,0.55);
+    background: var(--ep-sched-chrome-bg);
+    color: var(--ep-sched-chrome-text);
     font-size: 0.9rem;
     padding: 0 8px;
   }
@@ -620,7 +620,7 @@ const dateText = format(date, "EEE eeee, MMMM d");
     header.schedule-container.header {
       position: sticky;
       top: 0;
-      background: #151f38;
+      background: var(--ep-sched-chrome-bg);
       z-index: 20;
     }
 
@@ -636,7 +636,7 @@ const dateText = format(date, "EEE eeee, MMMM d");
 
     header.schedule-container.header > div > div:first-child {
       background: transparent;
-      color: var(--ep-accent);
+      color: var(--color-text-muted);
     }
 
     .schedule {
@@ -662,10 +662,10 @@ const dateText = format(date, "EEE eeee, MMMM d");
       font-size: 1.1rem;
       margin: 2px;
       padding: 8px;
-      background: #2d3548;
-      border: 1px solid rgba(255,255,255,0.08);
+      background: var(--ep-day-end-bg);
+      border: 1px solid var(--color-surface-medium);
       border-radius: 4px;
-      color: rgba(255,255,255,0.55);
+      color: var(--ep-day-end-text);
     }
 
     .time {
@@ -680,7 +680,7 @@ const dateText = format(date, "EEE eeee, MMMM d");
       font-family: 'Inter Tight', system-ui, sans-serif;
       font-size: 1.1rem;
       font-weight: 700;
-      color: var(--ep-accent);
+      color: var(--color-text-muted);
       margin: 0;
     }
 
@@ -693,9 +693,9 @@ const dateText = format(date, "EEE eeee, MMMM d");
       grid-column: 3 / 6;
       position: relative;
       display: block;
-      border: 2px solid var(--ep-accent);
+      border: 2px solid var(--color-accent-themed);
       border-radius: 6px;
-      background: #151f38;
+      background: var(--ep-sched-chrome-bg);
       z-index: 5;
     }
 
@@ -703,7 +703,7 @@ const dateText = format(date, "EEE eeee, MMMM d");
       font-family: 'Inter Tight', system-ui, sans-serif;
       font-weight: 700;
       font-size: 0.8rem;
-      color: var(--ep-accent);
+      color: var(--color-accent-themed);
       padding: 0.4rem 0.5rem;
       margin: 0;
       background: transparent;
diff --git a/src/components/schedule/session.astro b/src/components/schedule/session.astro
index cc80b66ce..5aceed9f3 100644
--- a/src/components/schedule/session.astro
+++ b/src/components/schedule/session.astro
@@ -64,7 +64,7 @@ const sessionUrl = session.slug ? `/session/${session.slug}` : "#";
 
   .ep-session:hover {
     border-color: var(--ep-accent);
-    background: #0f1a2e !important;
+    background: var(--ep-session-hover-bg) !important;
     z-index: 10;
   }
 
@@ -124,18 +124,18 @@ const sessionUrl = session.slug ? `/session/${session.slug}` : "#";
   }
 
   .ep-session-level--beginner {
-    background: rgba(50,180,50,0.2);
-    color: #6fd66f;
+    background: var(--ep-level-beginner-bg);
+    color: var(--ep-level-beginner-text);
   }
 
   .ep-session-level--intermediate {
-    background: rgba(255,255,255,0.08);
-    color: var(--ep-text-muted, rgba(255,255,255,0.7));
+    background: var(--ep-level-intermediate-bg);
+    color: var(--ep-level-intermediate-text);
   }
 
   .ep-session-level--advanced {
-    background: rgba(200,50,50,0.2);
-    color: #e07070;
+    background: var(--ep-level-advanced-bg);
+    color: var(--ep-level-advanced-text);
   }
 
 
@@ -152,8 +152,8 @@ const sessionUrl = session.slug ? `/session/${session.slug}` : "#";
         -45deg,
         transparent,
         transparent 4px,
-        rgba(50,180,50,0.2) 4px,
-        rgba(50,180,50,0.2) 6px
+        var(--ep-beginner-stripe) 4px,
+        var(--ep-beginner-stripe) 6px
       ),
       var(--ep-surface-subtle);
   }
@@ -164,8 +164,8 @@ const sessionUrl = session.slug ? `/session/${session.slug}` : "#";
         -45deg,
         transparent,
         transparent 4px,
-        rgba(200,50,50,0.2) 4px,
-        rgba(200,50,50,0.2) 6px
+        var(--ep-advanced-stripe) 4px,
+        var(--ep-advanced-stripe) 6px
       ),
       var(--ep-surface-subtle);
   }
diff --git a/src/components/sections/community-partners.astro b/src/components/sections/community-partners.astro
index b1a3faf42..511e7db56 100644
--- a/src/components/sections/community-partners.astro
+++ b/src/components/sections/community-partners.astro
@@ -40,7 +40,7 @@ const sectionSubtitle = "Meet the local Python communities joining us at EuroPyt
 <Section2 id="community-partners" variant="light">
 
     <div class="community-partners-header">
-      <Title id="community-partners" color="#000">Community Partners</Title>
+      <Title id="community-partners" color="var(--color-black)">Community Partners</Title>
       </div>
       <div class="text-center mb-12">
         <p class="text-lg text-gray-600 max-w-2xl mx-auto">{sectionSubtitle}</p>
diff --git a/src/components/sections/connect.astro b/src/components/sections/connect.astro
index 906077008..454fde948 100644
--- a/src/components/sections/connect.astro
+++ b/src/components/sections/connect.astro
@@ -94,14 +94,14 @@ import Section2 from "@ui/Section2.astro";
 
 
 :global(.connect-section) {
-    background: var(--color-section-bg, #080f1a);
+    background: var(--color-section-bg);
   }
 
     position: absolute;
     inset: 0;
     pointer-events: none;
     z-index: 0;
-    background-image: radial-gradient(circle, var(--color-surface-subtle, rgba(255,255,255,0.05)) 1px, transparent 1px);
+    background-image: radial-gradient(circle, var(--color-surface-subtle) 1px, transparent 1px);
     background-size: 32px 32px;
   .connect-bg {
   }
@@ -119,7 +119,7 @@ import Section2 from "@ui/Section2.astro";
 
   .connect-subtitle {
     font-size: 1.1rem;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
     line-height: 1.5;
     max-width: 600px;
     margin: 0 auto;
@@ -129,13 +129,13 @@ import Section2 from "@ui/Section2.astro";
     display: flex;
     flex-direction: column;
     gap: 0;
-    border: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border: 1px dashed var(--color-border);
     border-radius: 2px;
   }
 
   .connect-block {
     padding: 2rem 2.5rem;
-    border-bottom: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border-bottom: 1px dashed var(--color-border);
     text-align: center;
   }
 
@@ -152,23 +152,23 @@ import Section2 from "@ui/Section2.astro";
 
   .connect-newsletter-input {
     padding: 0.75rem 1.2rem;
-    border: 1px solid var(--color-border-dark, rgba(255,255,255,0.10));
+    border: 1px solid var(--color-border);
     border-radius: 2px;
-    background: rgba(255,255,255,0.08);
-    color: #fff;
+    background: var(--color-surface-medium);
+    color: var(--color-white);
     font-size: 1rem;
     min-width: 240px;
   }
 
   .connect-newsletter-input::placeholder {
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
   }
 
   .connect-newsletter-btn {
     padding: 0.75rem 1.5rem;
-    background: var(--color-accent, #f0c040);
-    color: var(--color-section-bg, #080f1a);
-    border: 1px solid var(--color-accent, #f0c040);
+    background: var(--color-accent-themed);
+    color: var(--color-on-accent);
+    border: 1px solid var(--color-accent-themed);
     border-radius: 2px;
     font-weight: 700;
     font-size: 1rem;
@@ -182,7 +182,7 @@ import Section2 from "@ui/Section2.astro";
 
   .connect-newsletter-note {
     font-size: 0.95rem;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
     margin-top: 0.75rem;
     line-height: 1.4;
   }
@@ -201,7 +201,7 @@ import Section2 from "@ui/Section2.astro";
     justify-content: center;
     gap: 0.5rem;
     padding: 1.2rem 1.5rem;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
     text-decoration: none;
     font-weight: 600;
     font-size: 1rem;
@@ -213,7 +213,7 @@ import Section2 from "@ui/Section2.astro";
   }
 
   .connect-social-link:hover {
-    color: #fff;
+    color: var(--color-text);
   }
 
   .connect-social-link i {
@@ -239,7 +239,7 @@ import Section2 from "@ui/Section2.astro";
   .connect-contact-label {
     font-size: 0.9rem;
     font-weight: 600;
-    color: var(--color-accent, #f0c040);
+    color: var(--color-accent);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-bottom: 0.3rem;
@@ -247,12 +247,12 @@ import Section2 from "@ui/Section2.astro";
 
   .connect-contact-col a {
     font-size: 0.95rem;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
     text-decoration: none;
   }
 
   .connect-contact-col a:hover {
-    color: #fff;
+    color: var(--color-white);
     text-decoration: underline;
   }
 
diff --git a/src/components/sections/ep25.astro b/src/components/sections/ep25.astro
index 48bda72c7..1ae853962 100644
--- a/src/components/sections/ep25.astro
+++ b/src/components/sections/ep25.astro
@@ -51,7 +51,7 @@ import Title from "@ui/Title.astro";
 
 
   :global(.ep25-section) {
-    background: var(--color-ep25-bg, #0b1b4d);
+    background: var(--color-ep25-bg);
   }
 
   :global(.ep25-section::before) {
@@ -61,8 +61,8 @@ import Title from "@ui/Title.astro";
     pointer-events: none;
     z-index: 0;
     background:
-      radial-gradient(ellipse 80% 60% at 10% 50%, rgba(255,212,59,0.08) 0%, transparent 60%),
-      radial-gradient(ellipse 50% 80% at 90% 20%, rgba(255,212,59,0.05) 0%, transparent 55%);
+      radial-gradient(ellipse 80% 60% at 10% 50%, oklch(0.883 0.165 92.2 / 0.08) 0%, transparent 60%), /* #ffd43b */
+      radial-gradient(ellipse 50% 80% at 90% 20%, oklch(0.883 0.165 92.2 / 0.05) 0%, transparent 55%); /* #ffd43b */
   }
 
   .ep25-inner {
@@ -81,7 +81,7 @@ import Title from "@ui/Title.astro";
 
 
   .ep25-title span {
-    color: var(--color-ep25-yellow, #ffd43b);
+    color: var(--color-ep25-yellow);
   }
 
 
@@ -99,7 +99,7 @@ import Title from "@ui/Title.astro";
     align-items: center;
     justify-content: center;
     text-align: center;
-    border: 1px dashed rgba(255,212,59,0.18);
+    border: 1px dashed oklch(0.883 0.165 92.2 / 0.18); /* #ffd43b */
     padding: 1.5rem 1rem;
     min-height: 5rem;
     min-width: 0;
@@ -110,7 +110,7 @@ import Title from "@ui/Title.astro";
   }
 
   .ep25-box:hover {
-    background: rgba(255,212,59,0.08);
+    background: oklch(0.883 0.165 92.2 / 0.08); /* #ffd43b */
   }
 
   .ep25-dimmed {
@@ -124,13 +124,13 @@ import Title from "@ui/Title.astro";
 
   .ep25-box-year {
     font-size: clamp(1.25rem, 1.8vw, 1.5rem);
-    color: var(--color-ep25-yellow, #ffd43b);
+    color: var(--color-ep25-yellow);
     line-height: 1.2;
   }
 
   .ep25-box-city {
     font-size: clamp(1rem, 1.1vw, 1.1rem);
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
     margin-top: 0.2rem;
     line-height: 1.3;
   }
@@ -147,9 +147,9 @@ import Title from "@ui/Title.astro";
   .ep25-cta {
     display: inline-block;
     padding: 0.75rem 2rem;
-    background: linear-gradient(to bottom, var(--color-ep25-yellow, #ffd43b), var(--color-ep25-yellow-dark, #dbb52e));
-    color: var(--color-ep25-bg, #0b1b4d);
-    border: 1px solid var(--color-ep25-yellow, #ffd43b);
+    background: linear-gradient(to bottom, var(--color-ep25-yellow), var(--color-ep25-yellow-dark));
+    color: var(--color-ep25-bg);
+    border: 1px solid var(--color-ep25-yellow);
     border-radius: 2px;
     font-weight: 700;
     font-size: 1.1rem;
diff --git a/src/components/sections/euroscipy.astro b/src/components/sections/euroscipy.astro
index 0b84e18ca..757325084 100644
--- a/src/components/sections/euroscipy.astro
+++ b/src/components/sections/euroscipy.astro
@@ -8,7 +8,7 @@ import Button from "@ui/Button.astro";
   <div class="split-layout euroscipy-inner">
 
     <div class="split-left euroscipy-left">
-      <Display id="euroscipy" span="2026" spanColor="#ffffff">EuroSciPy</Display>
+      <Display id="euroscipy" span="2026" spanColor="var(--color-white)" color="var(--color-white)">EuroSciPy</Display>
       <div class="euroscipy-dates">
         18–23 July 2026<br>
         AGH University of Kraków, Poland
@@ -27,11 +27,18 @@ import Button from "@ui/Button.astro";
 
 <style>
 
+  /* The section sits on a constant deep-blue background in BOTH
+     themes, so all foreground text is pinned to light values and
+     must not flip with the theme. */
   :global(.euroscipy-section) {
-    background: var(--color-euroscipy, #2e2ed4);
+    background: var(--color-euroscipy);
     scroll-margin-top: 60px;
   }
 
+  :global(.euroscipy-section) .display-subtitle {
+    color: oklch(1 0 0 / 0.7);
+  }
+
 
   .split-layout {
     display: grid;
@@ -65,7 +72,7 @@ import Button from "@ui/Button.astro";
   /* ---- Dates ---- */
   .euroscipy-dates {
     font-size: 1rem;
-    color: rgba(255, 255, 255, 0.78);
+    color: oklch(1 0 0 / 0.78);
     line-height: 1.6;
     margin-bottom: 2rem;
   }
@@ -75,9 +82,9 @@ import Button from "@ui/Button.astro";
     display: inline-block;
     font-size: 1rem;
     padding: 0.75rem 2rem;
-    background: linear-gradient(to bottom, #f04040, #cc3030);
-    color: var(--color-white, #fff);
-    border: 1px solid #f04040;
+    background: linear-gradient(to bottom, var(--color-cta-red), var(--color-cta-red-dark));
+    color: var(--color-white);
+    border: 1px solid var(--color-cta-red);
     border-radius: 2px;
     font-weight: 700;
     text-decoration: none;
@@ -98,13 +105,13 @@ import Button from "@ui/Button.astro";
 
   .euroscipy-right p {
     font-size: 1rem;
-    color: rgba(255, 255, 255, 0.93);
+    color: oklch(1 0 0 / 0.93);
     line-height: 1.65;
     margin: 0;
   }
 
   .euroscipy-right p strong {
-    color: var(--color-white, #fff);
+    color: var(--color-white);
   }
 
   /* ---- Sprint badge ---- */
@@ -112,12 +119,12 @@ import Button from "@ui/Button.astro";
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
-    background: rgba(255, 255, 255, 0.10);
-    border: 1px dashed rgba(255, 255, 255, 0.25);
+    background: oklch(1 0 0 / 0.1);
+    border: 1px dashed oklch(1 0 0 / 0.25);
     border-radius: 2px;
     padding: 0.5rem 1.2rem;
     font-weight: 700;
     font-size: 1rem;
-    color: var(--color-white, #fff);
+    color: var(--color-white);
   }
 </style>
diff --git a/src/components/sections/finaid.astro b/src/components/sections/finaid.astro
index 80896bd4d..546910bb4 100644
--- a/src/components/sections/finaid.astro
+++ b/src/components/sections/finaid.astro
@@ -45,7 +45,7 @@ import Title from "@ui/Title.astro";
     inset: 0;
     pointer-events: none;
     z-index: 0;
-    background-image: radial-gradient(circle, var(--color-surface-subtle, rgba(255,255,255,0.05)) 1px, transparent 1px);
+    background-image: radial-gradient(circle, var(--color-surface-subtle) 1px, transparent 1px);
     background-size: 32px 32px;
   }
 
@@ -54,7 +54,7 @@ import Title from "@ui/Title.astro";
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0;
-    border: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border: 1px dashed var(--color-border);
     border-radius: 2px;
     overflow: hidden;
     margin-bottom: 2.5rem;
@@ -62,7 +62,7 @@ import Title from "@ui/Title.astro";
 
   .finaid-card {
     padding: 2.5rem 2rem;
-    border-right: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border-right: 1px dashed var(--color-border);
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
@@ -74,12 +74,12 @@ import Title from "@ui/Title.astro";
 
   .finaid-title {
     font-size: 1.4rem;
-    color: var(--color-cream, #fff5f0);
+    color: var(--color-text);
   }
 
   .finaid-amount {
     font-size: 2.2rem;
-    color: var(--color-accent, #f0c040);
+    color: var(--color-accent-themed);
     letter-spacing: -0.02em;
     line-height: 1;
     margin: 0.25rem 0;
@@ -87,7 +87,7 @@ import Title from "@ui/Title.astro";
 
   .finaid-desc {
     font-size: 1rem;
-    color: var(--color-text-secondary-dark, rgba(255,255,255,0.78));
+    color: var(--color-text-secondary);
     line-height: 1.65;
     flex: 1;
   }
@@ -98,15 +98,15 @@ import Title from "@ui/Title.astro";
     justify-content: space-between;
     gap: 1.5rem;
     padding: 1.5rem 2rem;
-    border: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border: 1px dashed var(--color-border);
     border-radius: 2px;
-    background: var(--color-surface-medium, rgba(255,255,255,0.08));
+    background: var(--color-surface-medium);
     flex-wrap: wrap;
   }
 
   .finaid-footer p {
     font-size: 1rem;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
     line-height: 1.5;
     margin: 0;
     flex: 1;
@@ -115,9 +115,9 @@ import Title from "@ui/Title.astro";
   .finaid-cta {
     display: inline-block;
     padding: 0.75rem 2rem;
-    background: linear-gradient(to bottom, var(--color-cta-red, #d62020), #8a0020);
-    color: #fff;
-    border: 1px solid var(--color-cta-red, #d62020);
+    background: linear-gradient(to bottom, var(--color-cta-red), var(--color-cta-red-dark));
+    color: var(--color-white);
+    border: 1px solid var(--color-cta-red);
     border-radius: 2px;
     font-weight: 700;
     font-size: 1rem;
@@ -130,7 +130,7 @@ import Title from "@ui/Title.astro";
 
   @media (max-width: 900px) {
     .finaid-grid { grid-template-columns: 1fr; }
-    .finaid-card { border-right: none; border-bottom: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10)); }
+    .finaid-card { border-right: none; border-bottom: 1px dashed var(--color-border); }
     .finaid-card:last-child { border-bottom: none; }
     .sec-footer-bar { flex-direction: column; text-align: center; }
   }
diff --git a/src/components/sections/hero/hero.astro b/src/components/sections/hero/hero.astro
index 0f39b3409..fb97d2ea0 100644
--- a/src/components/sections/hero/hero.astro
+++ b/src/components/sections/hero/hero.astro
@@ -23,10 +23,13 @@ import Button from "@ui/Button.astro";
 </section>
 
 <style>
+  /* Dark (default) hero: bold dark banner with dragon art + red
+     gradient year. Flips to a light gradient banner in light mode
+     via the :global(.light) overrides at the bottom. */
   .hero-main {
     position: relative;
     min-height: 100vh;
-    background-color: var(--color-footer-bg, #0a0003);
+    background-color: var(--color-footer-bg);
     display: flex;
     align-items: center;
     padding: 6rem 2rem;
@@ -95,7 +98,7 @@ import Button from "@ui/Button.astro";
     font-family: var(--font-heading, 'Roboto', sans-serif);
     font-size: clamp(3rem, 6vw, 6rem);
     line-height: 0.85;
-    color: #fff;
+    color: var(--color-white);
     text-transform: uppercase;
     letter-spacing: -0.03em;
     margin: 0;
@@ -107,7 +110,7 @@ import Button from "@ui/Button.astro";
     font-size: clamp(6rem, 12vw, 12rem);
     line-height: 0.82;
     letter-spacing: -0.08em;
-    background: radial-gradient(ellipse at top left, var(--color-cta-red, #d62020) 0%, #a8002d 55%, #700020 100%);
+    background: radial-gradient(ellipse at top left, var(--color-cta-red) 0%, var(--color-cta-mid) 55%, var(--color-cta-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -117,7 +120,7 @@ import Button from "@ui/Button.astro";
   .hero-intro {
     font-family: var(--font-body, 'Roboto', system-ui, sans-serif);
     font-size: 1.3rem;
-    color: var(--color-text-secondary-dark, rgba(255,255,255,0.78));
+    color: var(--color-text-secondary);
     margin-top: 2rem;
     line-height: 1.6;
     max-width: 440px;
@@ -134,17 +137,17 @@ import Button from "@ui/Button.astro";
     font-family: var(--font-body, 'Roboto', system-ui, sans-serif);
     font-size: 1.1rem;
     font-weight: 500;
-    color: #fff;
+    color: var(--color-white);
     letter-spacing: 0.03em;
   }
 
   .hero-schedule span {
-    color: var(--color-accent, #f0c040);
+    color: var(--color-accent);
     font-weight: 700;
   }
 
   .hero-schedule a {
-    color: var(--color-accent, #f0c040);
+    color: var(--color-accent);
     font-weight: 700;
     text-decoration: none;
   }
@@ -162,22 +165,22 @@ import Button from "@ui/Button.astro";
     font-size: 1.3rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: #fff;
+    color: var(--color-white);
     background: none;
-    border: 3px solid var(--color-cta-red, #d62020);
+    border: 3px solid var(--color-cta-red);
     border-radius: 2px;
     padding: 1rem 2.5rem;
     text-decoration: none;
     display: inline-block;
     cursor: pointer;
     transition: background 0.15s, color 0.15s, box-shadow 0.15s;
-    box-shadow: 0 0 20px rgba(214,32,32,0.3), inset 0 0 20px rgba(214,32,32,0.05);
+    box-shadow: 0 0 20px oklch(0.567 0.214 25.9 / 0.3), inset 0 0 20px oklch(0.567 0.214 25.9 / 0.05);
   }
 
   .hero-cta:hover {
-    background: var(--color-cta-red, #d62020);
-    color: #fff;
-    box-shadow: 0 0 50px rgba(214,32,32,0.6), inset 0 0 25px rgba(214,32,32,0.15);
+    background: var(--color-cta-red);
+    color: var(--color-white);
+    box-shadow: 0 0 50px oklch(0.567 0.214 25.9 / 0.6), inset 0 0 25px oklch(0.567 0.214 25.9 / 0.15);
   }
 
   .hero-cta-alt {
@@ -186,20 +189,20 @@ import Button from "@ui/Button.astro";
     font-size: 1.1rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
-    color: var(--color-accent, #f0c040);
-    border: 3px solid var(--color-accent, #f0c040);
+    color: var(--color-accent);
+    border: 3px solid var(--color-accent);
     border-radius: 2px;
     padding: 0.9rem 2rem;
     text-decoration: none;
     display: inline-block;
     transition: background 0.15s, color 0.15s, box-shadow 0.15s;
-    box-shadow: 0 0 16px rgba(240,192,64,0.2), inset 0 0 16px rgba(240,192,64,0.04);
+    box-shadow: 0 0 16px oklch(0.831 0.142 84.4 / 0.2), inset 0 0 16px oklch(0.831 0.142 84.4 / 0.04);
   }
 
   .hero-cta-alt:hover {
-    background: var(--color-accent, #f0c040);
-    color: var(--color-section-bg, #080f1a);
-    box-shadow: 0 0 40px rgba(240,192,64,0.5), inset 0 0 20px rgba(240,192,64,0.1);
+    background: var(--color-accent);
+    color: var(--color-section-bg);
+    box-shadow: 0 0 40px oklch(0.831 0.142 84.4 / 0.5), inset 0 0 20px oklch(0.831 0.142 84.4 / 0.1);
   }
 
   @media (max-width: 768px) {
@@ -218,4 +221,55 @@ import Button from "@ui/Button.astro";
       margin-bottom: 1rem;
     }
   }
+
+  /* ── Light mode hero ──
+     Flip the banner to a soft light gradient with dark ink. The red
+     gradient year stays (reads great on light too). Amber accents
+     and white text shift to dark ink / brand blue for contrast. */
+  :global(.light) .hero-main {
+    background: linear-gradient(
+      135deg,
+      oklch(0.97 0.003 264) 0%,
+      oklch(0.945 0.004 264) 100%
+    );
+  }
+
+  :global(.light) .hero-heading {
+    color: var(--color-text);
+  }
+
+  :global(.light) .hero-intro {
+    color: var(--color-text-secondary);
+  }
+
+  :global(.light) .hero-schedule {
+    color: var(--color-text);
+  }
+
+  :global(.light) .hero-schedule span,
+  :global(.light) .hero-schedule a {
+    color: var(--color-blue);
+  }
+
+  :global(.light) .hero-cta {
+    color: var(--color-white);
+    background: var(--color-cta-red);
+    border-color: var(--color-cta-red);
+  }
+
+  :global(.light) .hero-cta:hover {
+    background: var(--color-cta-red);
+    color: var(--color-white);
+    filter: brightness(1.1);
+  }
+
+  :global(.light) .hero-cta-alt {
+    color: var(--color-blue);
+    border-color: var(--color-blue);
+  }
+
+  :global(.light) .hero-cta-alt:hover {
+    background: var(--color-blue);
+    color: var(--color-white);
+  }
 </style>
diff --git a/src/components/sections/hero/icon-label.astro b/src/components/sections/hero/icon-label.astro
index 0e41143cd..3c4667b5f 100644
--- a/src/components/sections/hero/icon-label.astro
+++ b/src/components/sections/hero/icon-label.astro
@@ -6,7 +6,7 @@ import Icon from "@ui/Icon.astro";
 
 <div class="flex flex-wrap justify-start items-center py-2">
   <div
-    class="w-20 h-20 flex items-center justify-center rounded-full bg-[#E8F4F8] p-2 text-primary"
+    class="w-20 h-20 flex items-center justify-center rounded-full bg-[var(--color-panel-light)] p-2 text-primary"
   >
     <Icon name={icon} size="fa-2x" />
   </div>
diff --git a/src/components/sections/ice-venue.astro b/src/components/sections/ice-venue.astro
index d98d9b341..cb8862ee7 100644
--- a/src/components/sections/ice-venue.astro
+++ b/src/components/sections/ice-venue.astro
@@ -7,7 +7,7 @@ import Display from "@ui/Display.astro";
   <div class="ice-venue-inner">
 
     <div class="ice-venue-left">
-      <Display id="ice-venue" span="CONGRESS CENTRE" spanColor="var(--color-cta-red, #d62020)" subtitle="Opened in 2014, ICE Kraków is a state-of-the-art congress centre located directly opposite the iconic Wawel Castle, right on the banks of the Vistula river. The main conference (13–17 July) will be held here.">ICE<br>KRAKÓW</Display>
+      <Display id="ice-venue" span="CONGRESS CENTRE" spanColor="var(--color-cta-red)" subtitle="Opened in 2014, ICE Kraków is a state-of-the-art congress centre located directly opposite the iconic Wawel Castle, right on the banks of the Vistula river. The main conference (13–17 July) will be held here.">ICE<br>KRAKÓW</Display>
       <div class="ice-venue-cta-row">
         <a href="https://www.google.com/maps/place/ICE+Krak%C3%B3w+Congress+Centre/@50.0485,19.9355,17z/" class="ice-venue-map-link" target="_blank" rel="noopener">Google Maps</a>
         <a href="https://www.openstreetmap.org/?mlat=50.0485&mlon=19.9355#map=17/50.0485/19.9355" class="ice-venue-map-link" target="_blank" rel="noopener">OpenStreetMap</a>
@@ -40,7 +40,7 @@ import Display from "@ui/Display.astro";
 
 
 :global(.ice-venue-section) {
-    background: var(--color-bg-dark, #0a0a1a);
+    background: var(--color-bg-dark);
     scroll-margin-top: 60px;
   }
 
@@ -49,8 +49,8 @@ import Display from "@ui/Display.astro";
     pointer-events: none;
     z-index: 0;
     background:
-      radial-gradient(ellipse 80% 60% at 10% 50%, rgba(214,32,32,0.08) 0%, transparent 60%),
-      radial-gradient(ellipse 50% 80% at 90% 20%, rgba(180,20,20,0.06) 0%, transparent 55%);
+      radial-gradient(ellipse 80% 60% at 10% 50%, oklch(0.567 0.214 25.9 / 0.08) 0%, transparent 60%),
+      radial-gradient(ellipse 50% 80% at 90% 20%, oklch(0.491 0.191 28.1 / 0.06) 0%, transparent 55%); /* #b41414 */
   .ice-venue-bg {
   }
 
@@ -81,9 +81,9 @@ import Display from "@ui/Display.astro";
     align-items: center;
     gap: 0.4rem;
     padding: 0.75rem 1.4rem;
-    border: 1px dashed rgba(214,32,32,0.3);
+    border: 1px dashed oklch(0.567 0.214 25.9 / 0.3);
     border-radius: 2px;
-    color: var(--color-cta-red, #d62020);
+    color: var(--color-cta-red);
 
     font-weight: 600;
     font-size: 1rem;
@@ -92,8 +92,9 @@ import Display from "@ui/Display.astro";
   }
 
   .ice-venue-map-link:hover {
-    color: #fff;
-    border-color: rgba(214,32,32,0.5);
+    color: var(--color-white);
+    background: var(--color-cta-red);
+    border-color: var(--color-cta-red);
   }
 
   .ice-venue-photo {
@@ -116,9 +117,9 @@ import Display from "@ui/Display.astro";
   .ice-venue-details li {
 
     font-size: 1.1rem;
-    color: var(--color-text-secondary-dark, rgba(255,255,255,0.78));
+    color: var(--color-text-secondary);
     padding: 0.6rem 0;
-    border-bottom: 1px solid var(--color-surface-medium, rgba(255,255,255,0.08));
+    border-bottom: 1px solid var(--color-surface-medium);
   }
 
   .ice-venue-details li:last-child {
@@ -126,16 +127,16 @@ import Display from "@ui/Display.astro";
   }
 
   .ice-venue-details li strong {
-    color: var(--color-text-primary-dark, rgba(255,255,255,0.93));
+    color: var(--color-text-primary);
   }
 
   .ice-venue-sprints {
     grid-column: 1 / -1;
     margin-top: 0;
     padding: 1rem 1.2rem;
-    border: 1px dashed rgba(214,32,32,0.2);
+    border: 1px dashed oklch(0.567 0.214 25.9 / 0.2);
     border-radius: 2px;
-    background: rgba(214,32,32,0.04);
+    background: oklch(0.567 0.214 25.9 / 0.04);
     text-align: center;
   }
 
@@ -143,13 +144,13 @@ import Display from "@ui/Display.astro";
 
     font-weight: 500;
     font-size: 1.4rem;
-    color: var(--color-cta-red, #d62020);
+    color: var(--color-cta-red);
     margin-bottom: 0.4rem;
   }
 
   .ice-venue-sprints p {
     font-size: 1.1rem;
-    color: var(--color-text-faint-dark, rgba(255,255,255,0.60));
+    color: var(--color-text-faint);
     margin: 0;
   }
 
diff --git a/src/components/sections/keynoters/keynoter.astro b/src/components/sections/keynoters/keynoter.astro
index 45ca54b12..a580cc73e 100644
--- a/src/components/sections/keynoters/keynoter.astro
+++ b/src/components/sections/keynoters/keynoter.astro
@@ -92,8 +92,8 @@ const { name, url, tagline, bio, image, placeholder, class: className } = Astro.
 
 <style>
   .prog-keynoter {
-    border-right: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
-    border-bottom: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border-right: 1px dashed var(--color-border);
+    border-bottom: 1px dashed var(--color-border);
     overflow: hidden;
     transition: background 0.2s;
     list-style: none;
@@ -108,7 +108,7 @@ const { name, url, tagline, bio, image, placeholder, class: className } = Astro.
   }
 
   .prog-keynoter:hover {
-    background: var(--color-surface-subtle, rgba(255,255,255,0.05));
+    background: var(--color-surface-subtle);
   }
 
   .prog-keynoter-link {
@@ -144,7 +144,7 @@ const { name, url, tagline, bio, image, placeholder, class: className } = Astro.
   .prog-keynoter-photo--empty {
     width: 100%;
     height: 100%;
-    background: var(--color-section-bg, #080f1a);
+    background: var(--color-section-bg);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -153,13 +153,13 @@ const { name, url, tagline, bio, image, placeholder, class: className } = Astro.
   .prog-keynoter-placeholder {
     font-size: 5rem;
     opacity: 0.12;
-    color: #fff;
+    color: var(--color-white);
   }
 
   .prog-keynoter-photo--light {
     width: 100%;
     height: 100%;
-    background: var(--color-surface-medium, rgba(255,255,255,0.08));
+    background: var(--color-surface-medium);
   }
 
 
@@ -170,7 +170,7 @@ const { name, url, tagline, bio, image, placeholder, class: className } = Astro.
 
   .prog-keynoter-name {
     font-size: 1.3rem;
-    color: var(--color-cream, #fff5f0);
+    color: var(--color-text);
     margin-bottom: 0.3rem;
     line-height: 1.2;
   }
@@ -179,7 +179,7 @@ const { name, url, tagline, bio, image, placeholder, class: className } = Astro.
 
     font-size: 1rem;
     font-weight: 600;
-    color: var(--color-accent, #f0c040);
+    color: var(--color-accent-themed);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     margin-bottom: 0.8rem;
@@ -188,7 +188,7 @@ const { name, url, tagline, bio, image, placeholder, class: className } = Astro.
   .prog-keynoter-bio {
 
     font-size: 1.1rem;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
     line-height: 1.6;
     margin: 0;
   }
@@ -202,7 +202,7 @@ const { name, url, tagline, bio, image, placeholder, class: className } = Astro.
   @media (max-width: 640px) {
     .prog-keynoter {
       border-right: none !important;
-      border-bottom: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+      border-bottom: 1px dashed var(--color-border);
     }
     .prog-keynoter:last-child {
       border-bottom: none;
diff --git a/src/components/sections/keynoters/keynoters.astro b/src/components/sections/keynoters/keynoters.astro
index 56e32c819..a30420a8a 100644
--- a/src/components/sections/keynoters/keynoters.astro
+++ b/src/components/sections/keynoters/keynoters.astro
@@ -50,7 +50,7 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
 
 <style>
   .sec-wrap {
-    color: #fff;
+    color: var(--color-white);
     position: relative;
     overflow: hidden;
   }
@@ -63,7 +63,7 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
   }
 
   .progtalk-section {
-    background: var(--color-section-bg, #080f1a);
+    background: var(--color-section-bg);
     scroll-margin-top: 60px;
   }
 
@@ -76,7 +76,7 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
     font-size: clamp(2.8rem, 6vw, 5.2rem);
     line-height: 1.05;
     letter-spacing: -0.02em;
-    color: var(--color-cream, #fff5f0);
+    color: var(--color-text);
     text-transform: uppercase;
     margin-bottom: 1.2rem;
     text-align: center;
@@ -96,7 +96,7 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
   }
 
   .prog-topics-label .sec-anchor a {
-    color: var(--color-cream, #fff5f0);
+    color: var(--color-text);
     text-decoration: none;
   }
 
@@ -115,9 +115,9 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
   .prog-more-cta {
     display: inline-block;
     padding: 0.75rem 2rem;
-    background: var(--color-cta-red, #d4003a);
-    color: #fff;
-    border: 1px solid var(--color-cta-red, #d4003a);
+    background: var(--color-cta-red);
+    color: var(--color-white);
+    border: 1px solid var(--color-cta-red);
     border-radius: 2px;
     font-weight: 700;
     font-size: 1rem;
diff --git a/src/components/sections/keynoters/placeholders/person-1.astro b/src/components/sections/keynoters/placeholders/person-1.astro
index beabf22e2..4dd264db4 100644
--- a/src/components/sections/keynoters/placeholders/person-1.astro
+++ b/src/components/sections/keynoters/placeholders/person-1.astro
@@ -1,3 +1,9 @@
+<!--
+  Decorative avatar colors (Rule D, no token):
+  oklch(0.331 0 0)       = #383838
+  oklch(0.918 0.012 188.7) = #D6EAE8
+  oklch(0.954 0.011 184.6) = #E4F4F3
+-->
 <svg
   width="82"
   height="82"
@@ -9,49 +15,49 @@
   <g clip-path="url(#clip0_1_110)">
     <path
       d="M51.584 36.6241C52.994 34.5471 53.435 31.9931 54.028 29.5691C55.078 25.2831 54.786 21.1461 54.173 16.8411C53.882 14.7961 53.32 12.7891 52.51 10.8891C52.057 9.82708 50.671 6.12808 49.496 5.74808C55.169 7.58408 59.305 12.2551 61.685 17.5841C64.566 24.0371 64.665 30.6471 63.92 37.5591C63.428 42.1171 63.15 46.9661 65.244 51.0451C64.327 51.5351 63.192 51.3441 62.226 50.9601C60.38 50.2261 58.812 48.8171 57.887 47.0601C58.188 51.0581 58.639 55.4051 61.423 58.2911C61.224 58.0921 60.159 58.3581 59.853 58.3311C58.756 58.2341 57.742 57.8091 56.706 57.4631C54.918 56.8651 53.098 56.3231 51.235 56.0301C50.582 55.9271 49.923 55.8551 49.258 55.8221C47.494 55.7331 45.802 55.5871 44.047 55.3651C39.499 54.7901 35.758 55.1841 31.299 55.9191C29.88 56.1531 28.463 56.3921 27.048 56.6451C24.909 57.0281 23.335 58.5661 21.144 58.2551C22.577 56.7321 23.388 54.8091 23.879 52.8001C24.269 51.2061 23.916 48.4401 24.643 47.0601C23.717 48.8171 22.149 50.2261 20.304 50.9601C19.338 51.3441 18.203 51.5351 17.286 51.0451C19.379 46.9671 19.101 42.1171 18.61 37.5591C17.865 30.6461 17.963 24.0361 20.845 17.5841C23.225 12.2551 27.361 7.58408 33.034 5.74808C31.86 6.12808 30.473 9.82608 30.02 10.8891C29.21 12.7891 28.649 14.7961 28.357 16.8411C27.744 21.1461 27.452 25.2831 28.502 29.5691C29.464 33.4931 29.83 38.1141 33.901 39.9501C36.29 41.0281 38.996 42.8041 41.721 42.7121C42.534 42.6841 43.311 42.3891 44.071 42.0981C45.235 41.6521 46.398 41.2061 47.562 40.7591C47.937 40.6151 48.317 40.4691 48.643 40.2331C49.67 39.4931 50.868 37.6801 51.584 36.6241Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
     <path
       d="M78.477 77.5081C76.402 70.1291 70.649 64.3541 63.278 62.2511L49.681 58.3711H41.109H32.537L18.94 62.2511C11.569 64.3541 5.816 70.1291 3.741 77.5081L0 83.7471C10.686 93.9611 25.159 100.247 41.11 100.247C57.06 100.247 71.533 93.9611 82.219 83.7471L78.477 77.5081Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
     <path
       d="M49.119 47.4301H41.108H33.097L30.572 60.6471C30.572 60.6471 35.092 65.3851 41.107 65.6351C47.122 65.3861 51.642 60.6471 51.642 60.6471L49.119 47.4301Z"
-      fill="#D6EAE8"></path>
+      fill="oklch(0.918 0.012 188.7)"></path>
     <path
       d="M59.029 28.8851C59.029 39.7181 51.006 54.2261 41.108 54.2261C31.211 54.2261 23.187 39.7181 23.187 28.8851C23.187 18.0521 31.21 9.27008 41.108 9.27008C51.006 9.26908 59.029 18.0521 59.029 28.8851Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M25.457 30.3981C25.372 32.5151 24.112 35.3041 22.699 35.2471C21.286 35.1901 20.255 32.3091 20.34 30.1921C20.425 28.0751 21.64 26.4051 23.053 26.4621C24.466 26.5181 25.543 28.2811 25.457 30.3981Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M61.547 30.2091C61.619 32.3271 60.569 35.2011 59.156 35.2491C57.743 35.2971 56.501 32.5001 56.429 30.3821C56.357 28.2641 57.445 26.5091 58.858 26.4611C60.271 26.4131 61.475 28.0911 61.547 30.2091Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M25.876 26.3701C25.876 26.3701 31.985 24.3531 39.622 26.0491C40.079 26.1501 40.406 26.5591 40.418 27.0271C40.464 28.8101 40.349 33.0101 38.281 33.6031C35.646 34.3591 27.282 34.2491 26.085 30.9221C24.887 27.5951 25.876 26.3701 25.876 26.3701Z"
-      stroke="#383838"
+      stroke="oklch(0.331 0 0)"
       stroke-miterlimit="10"></path>
     <path
       d="M23.188 26.1711L25.876 26.3701"
-      stroke="#383838"
+      stroke="oklch(0.331 0 0)"
       stroke-miterlimit="10"
       stroke-linecap="round"
       stroke-linejoin="round"></path>
     <path
       d="M56.737 26.3701C56.737 26.3701 50.628 24.3531 42.991 26.0491C42.534 26.1501 42.207 26.5591 42.195 27.0271C42.149 28.8101 42.264 33.0101 44.332 33.6031C46.967 34.3591 55.331 34.2491 56.528 30.9221C57.726 27.5951 56.737 26.3701 56.737 26.3701Z"
-      stroke="#383838"
+      stroke="oklch(0.331 0 0)"
       stroke-miterlimit="10"></path>
     <path
       d="M59.425 26.1711L56.737 26.3701"
-      stroke="#383838"
+      stroke="oklch(0.331 0 0)"
       stroke-miterlimit="10"
       stroke-linecap="round"
       stroke-linejoin="round"></path>
     <path
       d="M40.425 27.4041C40.425 27.4041 41.344 26.7721 42.344 27.4041"
-      stroke="#383838"
+      stroke="oklch(0.331 0 0)"
       stroke-miterlimit="10"></path>
     <path
       d="M47.496 22.0071C49.977 22.2601 52.482 22.2641 54.963 22.0011C56.349 21.8541 60.39 21.8561 60.603 20.1831C60.817 18.5041 58.923 15.5481 58.119 14.1431C57.089 12.3441 55.844 10.6681 54.412 9.16807C53.469 8.18007 52.438 7.26107 51.257 6.57607C50.344 6.04607 49.354 5.66307 48.351 5.33507C44.375 4.03207 40.064 3.56407 35.979 4.46807C32.232 5.29707 28.562 7.37407 26.289 10.5231C25.085 12.1921 24.081 14.0651 23.325 15.9781C23.131 16.4681 21.419 21.9171 21.827 22.0091C26.718 23.1201 31.852 23.1471 36.755 22.0891C37.881 21.8461 39.009 21.5411 40.012 20.9751C42.263 19.7061 43.618 17.2871 44.499 14.8571C45.499 17.2421 46.497 19.6251 47.496 22.0071Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
   </g>
   <defs>
     <clipPath id="clip0_1_110">
diff --git a/src/components/sections/keynoters/placeholders/person-2.astro b/src/components/sections/keynoters/placeholders/person-2.astro
index ec4b51563..ebe784231 100644
--- a/src/components/sections/keynoters/placeholders/person-2.astro
+++ b/src/components/sections/keynoters/placeholders/person-2.astro
@@ -1,3 +1,9 @@
+<!--
+  Decorative avatar colors (Rule D, no token):
+  oklch(0.331 0 0)       = #383838
+  oklch(0.918 0.012 188.7) = #D6EAE8
+  oklch(0.954 0.011 184.6) = #E4F4F3
+-->
 <svg
   width="82"
   height="82"
@@ -9,25 +15,25 @@
   <g clip-path="url(#clip0_1_111)">
     <path
       d="M78.477 76.4503C76.402 69.0713 70.649 63.2963 63.278 61.1923L49.681 57.3123H41.109H32.537L18.94 61.1923C11.569 63.2953 5.816 69.0703 3.741 76.4503L0 82.6893C10.686 92.9033 25.159 99.1893 41.11 99.1893C57.06 99.1893 71.533 92.9033 82.219 82.6893L78.477 76.4503Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
     <path
       d="M49.119 46.3723H41.108H33.097L30.572 59.5893C30.572 59.5893 35.092 64.3273 41.107 64.5773C47.122 64.3273 51.642 59.5893 51.642 59.5893L49.119 46.3723Z"
-      fill="#D6EAE8"></path>
+      fill="oklch(0.918 0.012 188.7)"></path>
     <path
       d="M59.029 27.8273C59.029 38.6603 51.006 53.1683 41.108 53.1683C31.211 53.1683 23.187 38.6603 23.187 27.8273C23.187 16.9943 31.21 8.21231 41.108 8.21231C51.006 8.21131 59.029 16.9933 59.029 27.8273Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M25.457 29.3393C25.372 31.4563 24.112 34.2453 22.699 34.1883C21.286 34.1313 20.255 31.2503 20.34 29.1333C20.425 27.0163 21.64 25.3463 23.053 25.4033C24.466 25.4603 25.543 27.2223 25.457 29.3393Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M61.547 29.1513C61.619 31.2683 60.569 34.1433 59.156 34.1913C57.743 34.2393 56.501 31.4423 56.429 29.3243C56.357 27.2063 57.445 25.4513 58.858 25.4033C60.271 25.3553 61.475 27.0333 61.547 29.1513Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M26.255 11.4823C27.126 9.5783 28.748 7.95431 30.681 7.11731C31.553 6.73931 32.545 6.9463 33.403 6.4503C33.767 6.2403 34.063 5.9303 34.401 5.6813C36.288 4.2873 38.975 5.2583 40.624 6.5733C40.99 6.8653 41.348 7.2153 41.455 7.6723C41.801 9.1623 40.333 12.0293 39.277 13.0253C38.261 13.9843 36.766 14.2263 35.369 14.2333C33.972 14.2403 32.555 14.0603 31.19 14.3593C28.857 14.8703 26.927 16.8833 26.515 19.2363C26.334 20.2733 26.424 21.3423 26.247 22.3803C26.073 23.3963 25.648 24.3533 25.44 25.3633C25.086 27.0813 26.121 28.0023 26.276 29.5713C26.451 31.3513 25.964 33.1963 25.444 34.8833C25.197 35.6843 25.19 36.5373 25.186 37.3753C24.032 36.1793 23.738 34.4053 23.667 32.7443C23.667 31.7593 23.66 30.8113 23.584 29.8203C23.511 28.8733 23.355 27.7833 22.545 27.2883C22.05 26.9863 20.822 26.8863 20.641 27.6003C20.234 26.5393 20.579 25.3503 21.1 24.3923C21.611 23.4523 22.303 22.7663 22.929 21.9553C23.592 21.0963 23.403 19.9903 23.177 18.9863C22.943 17.9473 22.704 16.7793 23.278 15.8813C23.672 15.2653 24.372 14.9183 24.866 14.3783C25.593 13.5813 25.807 12.4603 26.255 11.4823Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
     <path
       d="M56.374 11.4823C55.504 9.5783 53.881 7.95431 51.948 7.11731C51.076 6.73931 50.084 6.9463 49.226 6.4503C48.862 6.2403 48.566 5.9303 48.228 5.6813C46.341 4.2873 43.654 5.2583 42.005 6.5733C41.639 6.8653 41.281 7.2153 41.174 7.6723C40.828 9.1623 42.296 12.0293 43.352 13.0253C44.368 13.9843 45.863 14.2263 47.26 14.2333C48.657 14.2403 50.074 14.0603 51.439 14.3593C53.772 14.8703 55.702 16.8833 56.114 19.2363C56.295 20.2733 56.205 21.3423 56.382 22.3803C56.556 23.3963 56.981 24.3533 57.189 25.3633C57.543 27.0813 56.508 28.0023 56.353 29.5713C56.178 31.3513 56.665 33.1963 57.185 34.8833C57.432 35.6843 57.439 36.5373 57.443 37.3753C58.597 36.1793 58.891 34.4053 58.962 32.7443C58.962 31.7593 58.969 30.8113 59.045 29.8203C59.118 28.8733 59.274 27.7833 60.084 27.2883C60.579 26.9863 61.807 26.8863 61.988 27.6003C62.395 26.5393 62.05 25.3503 61.529 24.3923C61.018 23.4523 60.326 22.7663 59.7 21.9553C59.037 21.0963 59.226 19.9903 59.452 18.9863C59.686 17.9473 59.925 16.7793 59.351 15.8813C58.957 15.2653 58.257 14.9183 57.763 14.3783C57.036 13.5813 56.821 12.4603 56.374 11.4823Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
   </g>
   <defs>
     <clipPath id="clip0_1_111">
diff --git a/src/components/sections/keynoters/placeholders/person-3.astro b/src/components/sections/keynoters/placeholders/person-3.astro
index 71b5a13c3..fa96a9a83 100644
--- a/src/components/sections/keynoters/placeholders/person-3.astro
+++ b/src/components/sections/keynoters/placeholders/person-3.astro
@@ -1,3 +1,9 @@
+<!--
+  Decorative avatar colors (Rule D, no token):
+  oklch(0.331 0 0)       = #383838
+  oklch(0.918 0.012 188.7) = #D6EAE8
+  oklch(0.954 0.011 184.6) = #E4F4F3
+-->
 <svg
   width="82"
   height="82"
@@ -9,25 +15,25 @@
   <g clip-path="url(#clip0_1_112)">
     <path
       d="M71.7789 29.7525C71.6973 29.0819 71.13 28.501 70.4611 28.4031C71.0112 28.0804 71.3076 27.3781 71.1562 26.7591C71.0049 26.1392 70.4176 25.6535 69.7805 25.6209C70.1566 25.2801 70.2889 24.6965 70.0959 24.227C69.9029 23.7576 69.399 23.435 68.8924 23.4567C69.2277 23.0226 69.2694 22.3828 68.9948 21.9079C68.7202 21.433 68.1447 21.1512 67.601 21.2246C67.9481 20.6699 67.8892 19.8924 67.4614 19.3975C66.8687 18.7124 66.0377 19.0187 65.3163 18.7287C65.6688 18.1841 66.0386 17.566 65.7386 16.8736C65.4703 16.2546 64.739 15.8441 64.033 15.9193C64.5686 15.6356 65.0072 15.1236 65.0226 14.5454C65.0381 13.9663 64.5133 13.379 63.9007 13.4234C64.3058 12.9903 64.4291 12.3405 64.2079 11.8021C63.9868 11.2638 63.4304 10.8614 62.8213 10.7989C62.5368 9.27548 60.1469 8.32029 58.706 9.06161C58.89 8.62117 58.7712 8.08375 58.416 7.74934C58.0607 7.41493 57.4898 7.30344 57.0221 7.47653C56.9215 6.73702 56.2908 6.08725 55.5169 5.92774C54.7438 5.76824 53.882 6.109 53.4614 6.74067C53.7351 6.23769 53.62 5.57158 53.1905 5.17735C52.7609 4.78222 52.0522 4.68979 51.5248 4.95986C51.8574 4.51579 51.5112 3.85331 50.9892 3.62312C50.4672 3.39202 49.801 3.57328 49.2301 3.65122C49.4159 3.02136 49.096 2.29092 48.4924 1.96829C47.8888 1.64566 47.0587 1.76075 46.5802 2.23382C46.4841 1.69731 46.0491 1.22695 45.4981 1.06382C44.8683 0.877132 43.8732 1.16623 43.711 1.89215C43.6756 1.39461 43.1427 1.05205 42.6443 1.04571C42.038 1.03755 41.4208 1.48072 41.3474 2.08157C41.0094 1.62481 40.5164 1.63839 40.0641 1.42994C39.5077 1.17347 39.1434 0.865344 38.4755 1.06291C37.9244 1.22604 37.4894 1.6964 37.3934 2.23291C36.914 1.75984 36.0847 1.64384 35.4812 1.96738C34.8776 2.29001 34.5568 3.02045 34.7435 3.6503C34.1725 3.57236 33.5064 3.39111 32.9844 3.6222C32.4624 3.8533 32.1162 4.51578 32.4488 4.95895C31.9214 4.68888 31.2127 4.78131 30.7831 5.17644C30.3535 5.57157 30.2384 6.23678 30.5121 6.73975C30.0916 6.10718 29.2307 5.76642 28.4567 5.92683C27.6837 6.08633 27.052 6.73614 26.9514 7.47565C26.4847 7.30165 25.9128 7.41402 25.5576 7.74843C25.2023 8.08284 25.0836 8.62116 25.2676 9.0607C23.8266 8.31937 21.4368 9.27457 21.1522 10.798C20.5432 10.8605 19.9868 11.2629 19.7656 11.8012C19.5445 12.3395 19.6678 12.9893 20.0729 13.4225C19.4602 13.3772 18.9346 13.9654 18.95 14.5445C18.9654 15.1236 19.4041 15.6347 19.9397 15.9184C19.2337 15.8441 18.5014 16.2537 18.2341 16.8727C17.935 17.5651 18.3048 18.184 18.6564 18.7278C17.935 19.0178 17.1039 18.7115 16.5113 19.3966C16.0835 19.8915 16.0237 20.669 16.3708 21.2237C15.827 21.1502 15.2515 21.4321 14.9769 21.907C14.7023 22.3819 14.744 23.0208 15.0794 23.4558C14.5718 23.434 14.068 23.7567 13.8758 24.2261C13.6828 24.6956 13.8151 25.2792 14.1912 25.62C13.5541 25.6526 12.9678 26.1383 12.8155 26.7582C12.6642 27.3781 12.9605 28.0796 13.5106 28.4022C12.8427 28.5001 12.2754 29.081 12.1938 29.7516C12.1122 30.4222 12.5228 31.1219 13.1481 31.3774C12.24 32.4668 12.8644 34.4207 14.2347 34.7832C13.7616 34.6581 13.3031 35.7429 13.2614 36.0547C13.1662 36.7761 13.5478 37.2355 14.0199 37.7249C14.1713 37.8817 14.3217 38.0385 14.4731 38.1953C13.8142 38.5061 12.9215 39.3662 13.1744 40.0178C13.4272 40.6694 14.2374 41.0799 14.9534 40.9177C13.7997 42.7628 15.8252 43.3755 16.5412 44.5636C17.0478 45.4037 16.8067 47.8977 18.7461 46.6661C18.4697 47.1301 18.5884 47.7609 19.0533 48.0636C19.5137 48.3626 20.159 48.2738 20.5903 47.9349C20.1073 48.5684 20.1408 49.5426 20.6683 50.1407C21.1948 50.7389 22.1573 50.8957 22.8469 50.496C22.8333 51.1648 23.2557 51.8209 23.8692 52.0874C24.4828 52.3529 25.2504 52.2115 25.7289 51.7439C25.6391 52.4009 26.0687 53.0906 26.6968 53.3009C27.3248 53.5111 28.0833 53.2184 28.4069 52.6402C28.6398 53.6987 29.8823 54.1482 30.8184 53.7912C30.8094 54.4382 31.3087 55.262 31.935 55.4995C32.3147 55.6436 34.2704 55.0772 34.1725 54.972C35.3606 56.248 37.6199 56.4628 38.8806 55.2493C40.0705 54.1047 40.9351 53.1087 41.9845 52.2315C43.034 53.1078 43.8986 54.1038 45.0885 55.2493C46.3491 56.4619 48.6093 56.248 49.7965 54.972C49.6986 55.0772 51.6543 55.6436 52.0341 55.4995C52.6612 55.262 53.1606 54.4373 53.1506 53.7912C54.0868 54.1473 55.3293 53.6987 55.5622 52.6402C55.8857 53.2184 56.6442 53.5111 57.2723 53.3009C57.9003 53.0906 58.3299 52.4009 58.2402 51.7439C58.7187 52.2115 59.4863 52.3529 60.0998 52.0874C60.7134 51.8218 61.1357 51.1648 61.1221 50.496C61.8118 50.8957 62.7733 50.7389 63.3007 50.1407C63.8273 49.5426 63.8617 48.5684 63.3787 47.9349C63.8101 48.2738 64.4553 48.3626 64.9157 48.0636C65.3806 47.7618 65.4993 47.1301 65.2229 46.6661C67.1623 47.8977 66.9222 45.4037 67.4279 44.5636C68.1438 43.3755 70.1693 42.7628 69.0156 40.9177C69.7316 41.079 70.5427 40.6694 70.7947 40.0178C71.0475 39.3662 70.1539 38.507 69.496 38.1953C69.6473 38.0385 69.7978 37.8817 69.9491 37.7249C70.4213 37.2346 70.8028 36.7752 70.7076 36.0547C70.666 35.7429 70.2074 34.6581 69.7343 34.7832C71.1055 34.4216 71.729 32.4668 70.8209 31.3774C71.4499 31.1237 71.8604 30.4232 71.7789 29.7525Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
     <path
       d="M74.9743 77.0749C73.0938 70.3876 67.8801 65.1539 61.2 63.248L48.8775 59.7317H41.1091H33.3406L21.0181 63.248C14.338 65.1539 9.12428 70.3876 7.24379 77.0749L3.85345 82.7291C13.5387 91.9857 26.6551 97.6824 41.11 97.6824C55.5649 97.6824 68.6812 91.9857 78.3655 82.7291L74.9743 77.0749Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
     <path
       d="M48.3691 49.8163H41.109H33.849L31.5607 61.7944C31.5607 61.7944 35.657 66.0883 41.109 66.3148C46.5611 66.0892 50.6565 61.7944 50.6565 61.7944L48.3691 49.8163Z"
-      fill="#D6EAE8"></path>
+      fill="oklch(0.918 0.012 188.7)"></path>
     <path
       d="M57.3502 33.0096C57.3502 42.8272 50.0792 55.9753 41.109 55.9753C32.1398 55.9753 24.8679 42.8272 24.8679 33.0096C24.8679 23.1921 32.1388 15.2333 41.109 15.2333C50.0783 15.2324 57.3502 23.1921 57.3502 33.0096Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M26.9251 34.3808C26.8481 36.2994 25.7062 38.827 24.4257 38.7753C23.1451 38.7236 22.2098 36.1127 22.2878 34.1941C22.3648 32.2756 23.4659 30.7621 24.7465 30.8138C26.0261 30.8645 27.0022 32.4614 26.9251 34.3808Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M59.6312 34.2095C59.6965 36.1281 58.7449 38.7336 57.4644 38.7771C56.1838 38.8206 55.0583 36.2858 54.993 34.3663C54.9278 32.4469 55.9138 30.8563 57.1943 30.8128C58.4758 30.7693 59.566 32.2901 59.6312 34.2095Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M37.9979 18.1578C38.4392 19.0568 40.3804 18.8248 41.0556 18.4813C41.4824 19.0649 42.1612 19.3241 42.8745 19.2788C43.5795 19.2344 44.2402 18.9344 44.8818 18.639C45.1963 19.2779 45.9567 19.9649 46.6173 19.6993C46.6391 20.2304 46.9762 20.7361 47.4584 20.959C47.9405 21.182 48.544 21.1122 48.9627 20.7859C48.7996 21.9151 49.6325 23.4404 50.7735 23.4268C50.5596 24.0358 50.8895 24.7382 51.4106 25.1188C51.9326 25.4994 52.6014 25.6154 53.2467 25.6399C52.8851 26.7211 53.9472 27.998 55.0764 27.8376C54.8616 28.2082 54.9223 28.7819 55.1018 29.1698C55.399 29.8123 56.2138 30.3307 56.0035 31.0068C55.9265 31.2542 55.7217 31.4355 55.5667 31.643C54.9667 32.445 55.2332 33.7482 56.1005 34.2494C55.757 34.7324 55.4362 35.259 55.3619 35.8471C55.2876 36.4353 55.5196 37.0987 56.047 37.3688C56.2573 37.4757 56.5174 37.512 56.7258 37.4023C56.9506 37.2845 57.0657 37.0262 57.1137 36.777C57.294 35.8254 56.7176 34.9055 56.5781 33.9476C56.4014 32.7332 56.9324 31.5406 57.4508 30.4277C58.416 28.3551 59.1138 26.2616 58.4767 24.0657C57.5043 20.7144 55.2169 17.7644 52.2135 15.9882C50.8595 15.187 49.376 14.6215 47.8598 14.2019C42.9316 12.8371 37.465 13.0564 32.9228 15.4055C28.3806 17.7545 24.9295 22.3764 24.5697 27.4769C24.5 28.4701 24.5462 29.4924 24.9033 30.4222C25.0818 30.8881 25.3374 31.3276 25.4443 31.8143C25.6101 32.5692 25.4044 33.3604 25.4978 34.128C25.5902 34.8956 26.2074 35.7284 26.9659 35.5762C27.0448 36.5277 27.2088 37.4721 27.4562 38.3937C28.328 37.308 28.4631 35.6858 27.7834 34.4705C27.5858 34.1171 27.3284 33.7999 27.0728 33.4854C27.5559 33.5253 28.0299 33.1129 28.0589 32.629C28.087 32.145 27.6646 31.6801 27.1798 31.6629C27.6547 31.7526 28.1903 31.2406 28.4467 30.8319C28.7032 30.4223 28.6806 29.8567 28.3933 29.4688C28.8337 29.5087 29.2769 29.1816 29.3693 28.7493C29.4609 28.317 29.189 27.8376 28.7703 27.6953C29.5877 27.5902 30.0889 26.4293 29.6666 25.7215C30.3272 25.9535 31.1365 25.4369 31.2045 24.74C32.2304 24.6974 32.9192 23.3117 32.3681 22.4453C32.7805 22.6447 33.3088 22.5758 33.6569 22.2776C34.0049 21.9786 34.1526 21.4674 34.0176 21.0288C34.4163 21.404 35.2247 21.3451 35.7231 21.1158C36.2207 20.8865 36.5533 20.3392 36.5279 19.7918C36.9783 19.9912 37.552 19.8625 37.8882 19.4719C38.1991 19.0921 38.2072 18.5828 37.9979 18.1578Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
   </g>
   <defs>
     <clipPath id="clip0_1_112">
diff --git a/src/components/sections/keynoters/placeholders/person-4.astro b/src/components/sections/keynoters/placeholders/person-4.astro
index c2b8c809e..3e41db32e 100644
--- a/src/components/sections/keynoters/placeholders/person-4.astro
+++ b/src/components/sections/keynoters/placeholders/person-4.astro
@@ -1,3 +1,9 @@
+<!--
+  Decorative avatar colors (Rule D, no token):
+  oklch(0.331 0 0)       = #383838
+  oklch(0.918 0.012 188.7) = #D6EAE8
+  oklch(0.954 0.011 184.6) = #E4F4F3
+-->
 <svg
   width="82"
   height="82"
@@ -9,22 +15,22 @@
   <g clip-path="url(#clip0_1_123)">
     <path
       d="M47.228 17.5403C45.28 17.1973 42.602 18.0113 40.795 17.9553C38.783 17.8923 36.742 17.6273 34.907 16.8013C32.849 15.8743 31.783 14.0213 30.667 12.1673C29.074 9.51933 30.375 8.26032 32.83 6.56032C39.429 1.98832 50.083 3.87132 55.421 9.58032C58.234 12.5873 59.938 16.5463 60.517 20.6223C60.924 23.4883 60.686 26.9373 61.547 29.6653C62.395 32.3513 65.311 33.8183 66.014 36.5823C66.497 38.4803 65.711 40.4353 65.212 42.3283C64.712 44.2223 64.612 46.5293 66.07 47.8363C67.182 48.8333 68.847 48.8953 70.322 48.6593C70.642 48.6083 70.978 48.5473 71.281 48.6583C72.187 48.9913 71.973 50.3043 71.726 51.2363C70.982 54.0363 71.798 57.1743 72.992 59.7253C74.124 62.1433 76.678 64.0613 76.931 66.8473C77.121 68.9393 75.848 70.8623 74.548 72.5123C73.751 71.1663 72.644 70.0063 71.336 69.1473C69.656 68.0433 68.716 66.0403 66.983 64.9753C63.825 63.0343 59.564 62.2113 55.913 62.0453C54.255 61.9693 52.577 62.0503 50.954 61.7063C46.852 60.8373 43.659 57.2323 42.58 53.1813C41.501 49.1293 42.307 44.7503 44.07 40.9463C45.324 38.2413 47.038 35.7783 48.476 33.1663C49.914 30.5543 51.095 27.7023 51.134 24.7213C51.163 22.5193 50.454 19.6723 48.697 18.1773C48.294 17.8353 47.792 17.6393 47.228 17.5403Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
     <path
       d="M34.008 17.5403C35.955 17.1973 38.634 18.0113 40.441 17.9553C42.453 17.8923 44.494 17.6273 46.329 16.8013C48.387 15.8743 49.453 14.0213 50.569 12.1673C52.162 9.51933 50.861 8.26032 48.406 6.56032C44.555 3.89232 39.242 3.21033 34.971 5.26533C31.501 6.93533 27.875 9.07833 24.736 11.3003C20.759 14.1143 20.526 16.8153 20.089 21.2543C19.743 24.7743 16.775 27.3263 16.367 31.1653C16.033 34.3013 16.068 37.6363 14.444 40.3393C14.016 41.0523 13.465 41.9243 13.892 42.6383C14.096 42.9803 14.475 43.1693 14.775 43.4303C16.37 44.8143 15.239 47.5273 13.576 48.8293C11.914 50.1323 9.736 50.9773 8.78 52.8603C7.275 55.8243 9.58699 59.8443 7.71199 62.5883C7.01399 63.6093 5.798 64.3103 5.476 65.5043C5.276 66.2443 5.46799 67.0263 5.65999 67.7683C5.99799 69.0733 6.335 70.3793 6.672 71.6843C11.736 66.0393 17.554 62.4003 25.322 62.0463C26.98 61.9703 28.658 62.0513 30.281 61.7073C34.383 60.8383 37.576 57.2333 38.655 53.1823C39.734 49.1303 38.928 44.7513 37.165 40.9473C35.911 38.2423 34.197 35.7793 32.759 33.1673C31.321 30.5553 30.14 27.7033 30.101 24.7223C30.072 22.5203 30.781 19.6733 32.538 18.1783C32.941 17.8353 33.444 17.6393 34.008 17.5403Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
     <path
       d="M78.477 76.0453C76.402 68.6663 70.649 62.8913 63.278 60.7873L49.681 56.9073H41.109H32.537L18.94 60.7873C11.569 62.8903 5.816 68.6653 3.741 76.0453L0 82.2843C10.687 92.4983 25.16 98.7843 41.11 98.7843C57.06 98.7843 71.533 92.4983 82.219 82.2843L78.477 76.0453Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
     <path
       d="M49.12 45.9673H41.109H33.098L30.573 59.1843C30.573 59.1843 35.093 63.9223 41.109 64.1723C47.125 63.9223 51.644 59.1843 51.644 59.1843L49.12 45.9673Z"
-      fill="#D6EAE8"></path>
+      fill="oklch(0.918 0.012 188.7)"></path>
     <path
       d="M59.03 27.4223C59.03 38.2553 51.007 52.7633 41.109 52.7633C31.212 52.7633 23.188 38.2553 23.188 27.4223C23.188 16.5893 31.211 7.80733 41.109 7.80733C51.006 7.80633 59.03 16.5883 59.03 27.4223Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M42.354 5.61532C47.762 5.21832 52.826 9.06532 55.798 13.3373C51.152 11.7533 44.917 13.6943 43.698 18.9793C43.444 20.0803 43.427 21.2523 42.943 22.2743C41.19 25.9723 35.262 24.9673 32.385 27.8773C29.773 30.5203 30.843 34.9943 29.49 38.4543C28.829 40.1433 27.591 41.5643 26.975 43.2703C26.473 44.6593 26.075 46.5193 24.613 46.7223C23.687 46.8513 22.815 46.1193 22.464 45.2533C22.113 44.3863 22.16 43.4173 22.212 42.4833C22.512 37.1533 21.745 32.9223 20.455 27.7623C19.879 23.9663 21.9 20.3123 23.848 17.0033C25.178 14.7453 26.553 12.4333 28.605 10.8023C30.15 9.57432 31.998 8.79932 33.826 8.05432C36.574 6.93432 39.391 5.83232 42.354 5.61532Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
   </g>
   <defs>
     <clipPath id="clip0_1_123">
diff --git a/src/components/sections/keynoters/placeholders/person-5.astro b/src/components/sections/keynoters/placeholders/person-5.astro
index 8fa81a3dd..202ae5038 100644
--- a/src/components/sections/keynoters/placeholders/person-5.astro
+++ b/src/components/sections/keynoters/placeholders/person-5.astro
@@ -1,3 +1,9 @@
+<!--
+  Decorative avatar colors (Rule D, no token):
+  oklch(0.331 0 0)       = #383838
+  oklch(0.918 0.012 188.7) = #D6EAE8
+  oklch(0.954 0.011 184.6) = #E4F4F3
+-->
 <svg
   width="82"
   height="82"
@@ -9,22 +15,22 @@
   <g clip-path="url(#clip0_1_124)">
     <path
       d="M78.477 74.308C76.402 66.929 70.649 61.154 63.278 59.05L49.681 55.17H41.109H32.537L18.94 59.05C11.569 61.153 5.816 66.928 3.741 74.308L0 80.547C10.687 90.761 25.16 97.047 41.11 97.047C57.06 97.047 71.533 90.761 82.219 80.547L78.477 74.308Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
     <path
       d="M49.12 44.23H41.109H33.098L30.573 57.447C30.573 57.447 35.093 62.185 41.109 62.435C47.124 62.185 51.644 57.447 51.644 57.447L49.12 44.23Z"
-      fill="#D6EAE8"></path>
+      fill="oklch(0.918 0.012 188.7)"></path>
     <path
       d="M59.03 25.685C59.03 36.518 51.007 51.026 41.11 51.026C31.213 51.026 23.189 36.518 23.189 25.685C23.189 14.852 31.212 6.07001 41.11 6.07001C51.006 6.06901 59.03 14.851 59.03 25.685Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M25.458 27.197C25.373 29.314 24.113 32.103 22.7 32.046C21.287 31.989 20.256 29.108 20.341 26.991C20.426 24.874 21.641 23.204 23.054 23.261C24.467 23.318 25.543 25.08 25.458 27.197Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M61.547 27.009C61.619 29.126 60.569 32.001 59.156 32.049C57.743 32.097 56.501 29.3 56.429 27.182C56.357 25.064 57.445 23.309 58.858 23.261C60.272 23.213 61.476 24.891 61.547 27.009Z"
-      fill="#E4F4F3"></path>
+      fill="oklch(0.954 0.011 184.6)"></path>
     <path
       d="M39.388 4.55301C38.402 4.62701 37.421 4.775 36.457 4.993C32.517 5.884 28.824 7.963 26.149 11.008C26.684 10.944 27.218 10.88 27.753 10.817C25.949 12.317 24.317 14.077 23.26 16.172C22.002 18.664 22.528 21.098 21.834 23.637C22.035 22.901 23.233 22.988 23.648 23.628C24.063 24.268 23.952 25.098 23.88 25.858C23.636 28.421 24.018 30.998 24.399 33.544C24.458 33.938 24.573 34.403 24.949 34.535C25.653 32.335 26.366 30.073 26.235 27.767C26.18 26.806 25.979 25.858 25.941 24.896C25.793 21.212 27.953 18.097 29.983 15.228C30.663 14.267 30.648 14.259 31.807 14.56C32.771 14.81 33.733 15.057 34.708 15.259C36.655 15.661 38.63 15.934 40.615 16.035C43.919 16.203 47.292 15.771 50.316 14.429C50.744 14.239 50.796 14.102 51.183 13.84C51.91 15.433 52.637 17.025 53.364 18.618C54.569 21.259 55.785 23.931 56.333 26.781C56.679 28.581 56.714 30.577 55.693 32.099C55.553 32.308 55.387 32.525 55.387 32.777C55.387 32.951 55.466 33.114 55.544 33.27C55.937 34.057 56.331 34.844 56.725 35.63C57.775 33.563 58.843 31.431 59.05 29.122C59.221 27.211 59.117 25.315 59.182 23.404C59.208 22.631 59.436 21.894 59.426 21.115C59.422 20.81 59.304 19.044 58.929 18.959C59.25 19.032 59.54 19.23 59.725 19.502C59.813 17.909 59.62 16.263 58.88 14.85C58.141 13.436 56.795 12.285 55.217 12.048C55.582 11.876 55.947 11.704 56.313 11.532C55.138 10.991 53.849 10.699 52.556 10.681C52.658 9.573 52.608 8.327 52.304 7.252C52.184 6.828 51.993 6.428 51.736 6.069C51.556 5.817 50.764 5.29801 50.713 5.06601C50.799 5.46001 50.724 5.887 50.509 6.228C49.122 5.339 47.633 4.553 46.08 4C47.208 5.626 43.322 4.649 42.631 4.584C41.552 4.48 40.467 4.47301 39.388 4.55301Z"
-      fill="#383838"></path>
+      fill="oklch(0.331 0 0)"></path>
   </g>
   <defs>
     <clipPath id="clip0_1_124">
diff --git a/src/components/sections/krakow.astro b/src/components/sections/krakow.astro
index e84f55a5c..108feffca 100644
--- a/src/components/sections/krakow.astro
+++ b/src/components/sections/krakow.astro
@@ -58,7 +58,7 @@ import Section2 from "@ui/Section2.astro";
 
 
 :global(.krakow-section) {
-    background: var(--color-bg-dark, #0a0a1a);
+    background: var(--color-bg-dark);
     scroll-margin-top: 60px;
   }
 
@@ -67,8 +67,8 @@ import Section2 from "@ui/Section2.astro";
     pointer-events: none;
     z-index: 0;
     background:
-      radial-gradient(ellipse 80% 60% at 10% 50%, rgba(214,32,32,0.08) 0%, transparent 60%),
-      radial-gradient(ellipse 50% 80% at 90% 20%, rgba(180,20,20,0.06) 0%, transparent 55%);
+      radial-gradient(ellipse 80% 60% at 10% 50%, oklch(0.567 0.214 25.9 / 0.08) 0%, transparent 60%),
+      radial-gradient(ellipse 50% 80% at 90% 20%, oklch(0.491 0.191 28.1 / 0.06) 0%, transparent 55%); /* #b41414 */
 
 
   .krakow-gallery-container {
@@ -100,7 +100,7 @@ import Section2 from "@ui/Section2.astro";
     position: relative;
     overflow: hidden;
     border-radius: 2px;
-    border: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border: 1px dashed var(--color-border);
     transition: transform 0.3s ease;
     cursor: pointer;
   }
@@ -136,7 +136,7 @@ import Section2 from "@ui/Section2.astro";
   .image-overlay {
     position: absolute;
     inset: 0;
-    background: linear-gradient(to top, var(--color-black-30, rgba(0,0,0,0.3)), transparent 50%);
+    background: linear-gradient(to top, var(--color-scrim-30), transparent 50%);
     opacity: 0;
     transition: opacity 0.3s ease;
     pointer-events: none;
@@ -155,7 +155,7 @@ import Section2 from "@ui/Section2.astro";
   .krakow-credit {
 
     font-size: 1rem;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
     margin-bottom: 1rem;
   }
 
@@ -167,9 +167,9 @@ import Section2 from "@ui/Section2.astro";
   .krakow-btn {
     display: inline-block;
     padding: 0.75rem 2rem;
-    background: linear-gradient(to bottom, var(--color-green-2e, #2ecc71), var(--color-green-25, #25a85d));
-    color: var(--color-section-bg, #080f1a);
-    border: 1px solid var(--color-green-2e, #2ecc71);
+    background: linear-gradient(to bottom, var(--color-green-2e), var(--color-green-25));
+    color: var(--color-section-bg);
+    border: 1px solid var(--color-green-2e);
     border-radius: 2px;
     font-weight: 700;
     font-size: 1rem;
diff --git a/src/components/sections/orgsummit.astro b/src/components/sections/orgsummit.astro
index c0d08e113..2123f8341 100644
--- a/src/components/sections/orgsummit.astro
+++ b/src/components/sections/orgsummit.astro
@@ -7,7 +7,7 @@ import Display from "@ui/Display.astro";
   <div class="split-layout orgsummit-inner">
 
     <div class="split-left orgsummit-left">
-      <Display id="orgsummit" span="SUMMIT" spanColor="var(--color-green-2e, #2ecc71)" subtitle="A dedicated day for Python conference and community organisers from across Europe — bigger and better than ever before.">CONFERENCE<br>ORGANISERS</Display>
+      <Display id="orgsummit" span="SUMMIT" spanColor="var(--color-green-2e)" subtitle="A dedicated day for Python conference and community organisers from across Europe — bigger and better than ever before.">CONFERENCE<br>ORGANISERS</Display>
       <a href="#" class="orgsummit-cta">Learn more</a>
     </div>
 
@@ -37,7 +37,7 @@ import Display from "@ui/Display.astro";
 
 
   :global(.orgsummit-section) {
-    background: var(--color-section-bg, #080f1a);
+    background: var(--color-section-bg);
   }
 
   .orgsummit-bg {
@@ -46,8 +46,8 @@ import Display from "@ui/Display.astro";
     pointer-events: none;
     z-index: 0;
     background:
-      radial-gradient(ellipse 80% 60% at 10% 50%, rgba(20,160,80,0.1) 0%, transparent 60%),
-      radial-gradient(ellipse 50% 80% at 90% 20%, rgba(10,100,50,0.07) 0%, transparent 55%);
+      radial-gradient(ellipse 80% 60% at 10% 50%, oklch(0.622 0.158 152.5 / 0.1) 0%, transparent 60%) /* #14a050 */,
+      radial-gradient(ellipse 50% 80% at 90% 20%, oklch(0.435 0.108 154.8 / 0.07) 0%, transparent 55%) /* #0a6432 */;
   }
 
 
@@ -85,9 +85,9 @@ import Display from "@ui/Display.astro";
     display: inline-block;
     margin-top: 2rem;
     padding: 0.75rem 2rem;
-    background: linear-gradient(to bottom, var(--color-green-2e, #2ecc71), var(--color-green-25, #25a85d));
-    color: var(--color-section-bg, #080f1a);
-    border: 1px solid var(--color-green-2e, #2ecc71);
+    background: linear-gradient(to bottom, var(--color-green-2e), var(--color-green-25));
+    color: var(--color-section-bg);
+    border: 1px solid var(--color-green-2e);
     border-radius: 2px;
     font-weight: 700;
     font-size: 1rem;
@@ -111,9 +111,9 @@ import Display from "@ui/Display.astro";
   .event-list li {
     padding: 1.4rem 1.8rem 1.4rem 0;
     font-size: 1rem;
-    color: var(--color-text-secondary-dark, rgba(255,255,255,0.78));
+    color: var(--color-text-secondary);
     line-height: 1.6;
-    border-bottom: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border-bottom: 1px dashed var(--color-border);
   }
 
   .event-list li:last-child {
@@ -124,7 +124,7 @@ import Display from "@ui/Display.astro";
     display: block;
     font-weight: 800;
     font-size: 1rem;
-    color: #fff;
+    color: var(--color-text);
     margin-bottom: 0.25rem;
   }
 </style>
diff --git a/src/components/sections/programme.astro b/src/components/sections/programme.astro
index 6e1ad201a..0754c80e8 100644
--- a/src/components/sections/programme.astro
+++ b/src/components/sections/programme.astro
@@ -67,24 +67,24 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
       </div>
     </div>
 
-    <div class="prog-events">
-      <p class="prog-topics-label">More than just talks</p>
-      <p class="prog-events-desc">EuroPython is a full week of community — from dedicated community days and social events to open spaces, workshops, and sprints.</p>
-      <div class="prog-events-list">
-        <a href="/programme/#beginners-day" class="prog-event-btn" style="--event-color: #3ab8ff">Beginners' Day</a>
-        <a href="/programme/#open-spaces" class="prog-event-btn" style="--event-color: #f0c040">Open Spaces</a>
-        <a href="/programme/#lightning-talks" class="prog-event-btn" style="--event-color: #af6ae0">Lightning Talks</a>
-        <a href="/programme/#pyladies" class="prog-event-btn" style="--event-color: #d42027">PyLadies Events</a>
-        <a href="/programme/#orgsummit" class="prog-event-btn" style="--event-color: #2ecc71">Organisers Summit</a>
-        <a href="/programme/#lang-summit" class="prog-event-btn" style="--event-color: #3c78c8">Language Summit</a>
-        <a href="/programme/#rust-summit" class="prog-event-btn" style="--event-color: #de5833">Rust Summit</a>
-        <a href="/programme/#pkg-summit" class="prog-event-btn" style="--event-color: #cc9900">Packaging Summit</a>
-        <a href="/programme/#wasm-summit" class="prog-event-btn" style="--event-color: #7a4e9e">WASM Summit</a>
-        <a href="/participate/#tickets" class="prog-event-btn" style="--event-color: #f0c040">Social Event</a>
-        <a href="/participate/#tickets" class="prog-event-btn" style="--event-color: #f0c040">Speaker Dinner</a>
-        <a href="/participate/#volunteering" class="prog-event-btn" style="--event-color: #f0c040">Volunteering</a>
-      </div>
-    </div>
+    <!-- <div class="prog-events"> -->
+    <!--   <p class="prog-topics-label">More than just talks</p> -->
+    <!--   <p class="prog-events-desc">EuroPython is a full week of community — from dedicated community days and social events to open spaces, workshops, and sprints.</p> -->
+    <!--   <div class="prog-events-list"> -->
+    <!--     <a href="/programme/#beginners-day" class="prog-event-btn" style="--event-color: oklch(0.741 0.143 240.5) /* #3ab8ff */">Beginners' Day</a> -->
+    <!--     <a href="/programme/#open-spaces" class="prog-event-btn" style="--event-color: var(--color-accent-themed)">Open Spaces</a> -->
+    <!--     <a href="/programme/#lightning-talks" class="prog-event-btn" style="--event-color: oklch(0.638 0.182 305.0) /* #af6ae0 */">Lightning Talks</a> -->
+    <!--     <a href="/programme/#pyladies" class="prog-event-btn" style="--event-color: var(--color-pyladies)">PyLadies Events</a> -->
+    <!--     <a href="/programme/#orgsummit" class="prog-event-btn" style="--event-color: var(--color-green-2e)">Organisers Summit</a> -->
+    <!--     <a href="/programme/#lang-summit" class="prog-event-btn" style="--event-color: oklch(0.566 0.137 256.0) /* #3c78c8 */">Language Summit</a> -->
+    <!--     <a href="/programme/#rust-summit" class="prog-event-btn" style="--event-color: oklch(0.640 0.180 38.0) /* #de5833 */">Rust Summit</a> -->
+    <!--     <a href="/programme/#pkg-summit" class="prog-event-btn" style="--event-color: oklch(0.685 0.150 86.0) /* #cc9900 */">Packaging Summit</a> -->
+    <!--     <a href="/programme/#wasm-summit" class="prog-event-btn" style="--event-color: oklch(0.473 0.146 304.0) /* #7a4e9e */">WASM Summit</a> -->
+    <!--     <a href="/participate/#tickets" class="prog-event-btn" style="--event-color: var(--color-accent-themed)">Social Event</a> -->
+    <!--     <a href="/participate/#tickets" class="prog-event-btn" style="--event-color: var(--color-accent-themed)">Speaker Dinner</a> -->
+    <!--     <a href="/participate/#volunteering" class="prog-event-btn" style="--event-color: var(--color-accent-themed)">Volunteering</a> -->
+    <!--   </div> -->
+    <!-- </div> -->
 
     <div class="prog-keynoters">
       <p class="prog-topics-label">Keynote Speakers</p>
@@ -117,7 +117,7 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
 
 
   .prog-section {
-    background: var(--color-section-bg-alt, #070b14);
+    background: var(--color-section-bg-alt);
   }
 
   .prog-section-header {
@@ -131,7 +131,7 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
 
   .prog-topics-label {
     font-size: 1.4rem;
-    color: var(--color-cream, #fff5f0);
+    color: var(--color-text);
     margin-top: 1rem;
     margin-bottom: 1.2rem;
     text-align: center;
@@ -169,19 +169,19 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
 
   .prog-card-date {
     padding: 1.8rem 1.4rem;
-    border-bottom: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border-bottom: 1px dashed var(--color-border);
   }
 
   .prog-card-date-main {
     font-size: 1.55rem;
-    color: var(--color-cream, #fff5f0);
+    color: var(--color-text);
     margin-bottom: 0.3rem;
     line-height: 1.2;
   }
 
   .prog-card-date-days {
     font-size: 1.1rem;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
   }
 
   .prog-card-body {
@@ -191,7 +191,7 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
   .prog-card-title {
     font-size: 1.44rem;
     font-weight: 700;
-    color: var(--color-accent, #f0c040);
+    color: var(--color-accent-themed);
     margin-bottom: 0.7rem;
     line-height: 1.2;
     letter-spacing: 0.03em;
@@ -204,7 +204,7 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
 
   .prog-card-desc {
     font-size: 1.1rem;
-    color: var(--color-text-primary-dark, rgba(255,255,255,0.93));
+    color: var(--color-text-primary);
     line-height: 1.65;
     padding: 0.5rem 0;
     margin: 0;
@@ -213,10 +213,10 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
   .prog-card-btn {
     display: inline-block;
     padding: 0.6rem 1.5rem;
-    border: 1px solid var(--color-accent, #f0c040);
+    border: 1px solid var(--color-accent-themed);
     border-radius: 2px;
-    color: var(--color-section-bg, #080f1a);
-    background: var(--color-accent, #f0c040);
+    color: var(--color-on-accent);
+    background: var(--color-accent-themed);
     font-size: 1rem;
     font-weight: 700;
     text-decoration: none;
@@ -242,10 +242,10 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
   .topic-tag {
     font-weight: 500;
     font-size: 1.1rem;
-    color: var(--color-text-secondary-dark, rgba(255,255,255,0.78));
+    color: var(--color-text-secondary);
     text-decoration: none;
-    background: var(--color-surface-medium, rgba(255,255,255,0.08));
-    border: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    background: var(--color-surface-medium);
+    border: 1px dashed var(--color-border);
     border-radius: 2px;
     padding: 0.35em 1.1em;
     transition: background 0.15s, color 0.15s;
@@ -259,9 +259,9 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
 
   .topic-tag:hover {
     opacity: 1;
-    background: var(--color-accent, #f0c040);
-    color: var(--color-section-bg, #080f1a);
-    border-color: var(--color-accent, #f0c040);
+    background: var(--color-accent-themed);
+    color: var(--color-on-accent);
+    border-color: var(--color-accent-themed);
   }
 
   .prog-keynoters {
@@ -273,7 +273,7 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
     grid-template-columns: repeat(3, 1fr);
     gap: 0;
     margin-top: 1.5rem;
-    border: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border: 1px dashed var(--color-border);
     border-radius: 2px;
     overflow: hidden;
   }
@@ -297,7 +297,7 @@ const placeholders = Array.from({ length: placeholderCount }, (_, i) => ({
 
   .prog-events-desc {
     font-size: 1.1rem;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
     margin-bottom: 1.5rem;
     max-width: 560px;
     margin-left: auto;
diff --git a/src/components/sections/pyladies.astro b/src/components/sections/pyladies.astro
index f2d8263aa..cf76e7d44 100644
--- a/src/components/sections/pyladies.astro
+++ b/src/components/sections/pyladies.astro
@@ -8,7 +8,7 @@ import Display from "@ui/Display.astro";
   <div class="split-layout pyladies-inner">
 
     <div class="split-left pyladies-left">
-      <Display id="pyladies" span="AT EP2026" spanColor="var(--color-pyladies, #d42027)" subtitle="Dedicated events for women and gender minorities in the Python community.">PYLADIES</Display>
+      <Display id="pyladies" span="AT EP2026" spanColor="var(--color-pyladies)" subtitle="Dedicated events for women and gender minorities in the Python community.">PYLADIES</Display>
       <a href="#" class="pyladies-cta">Learn more</a>
     </div>
 
@@ -37,8 +37,8 @@ import Display from "@ui/Display.astro";
     pointer-events: none;
     z-index: 0;
     background:
-      radial-gradient(ellipse 80% 60% at 10% 50%, rgba(210,30,60,0.12) 0%, transparent 60%),
-      radial-gradient(ellipse 50% 80% at 90% 20%, rgba(160,20,60,0.08) 0%, transparent 55%);
+      radial-gradient(ellipse 80% 60% at 10% 50%, oklch(0.553 0.205 12.5 / 0.12) 0%, transparent 60%) /* #d21e3c */,
+      radial-gradient(ellipse 50% 80% at 90% 20%, oklch(0.446 0.176 8.5 / 0.08) 0%, transparent 55%) /* #a0143c */;
   }
 
   .split-layout {
@@ -71,9 +71,9 @@ import Display from "@ui/Display.astro";
     display: inline-block;
     margin-top: 2rem;
     padding: 0.75rem 2rem;
-    background: linear-gradient(to bottom, var(--color-pyladies, #d42027), var(--color-pyladies-dark, #b01a20));
-    color: #fff;
-    border: 1px solid var(--color-pyladies, #d42027);
+    background: linear-gradient(to bottom, var(--color-pyladies), var(--color-pyladies-dark));
+    color: var(--color-white);
+    border: 1px solid var(--color-pyladies);
     border-radius: 2px;
     font-weight: 700;
     font-size: 1rem;
@@ -97,9 +97,9 @@ import Display from "@ui/Display.astro";
   .event-list li {
     padding: 1.4rem 1.8rem 1.4rem 0;
     font-size: 1rem;
-    color: var(--color-text-secondary-dark, rgba(255,255,255,0.78));
+    color: var(--color-text-secondary);
     line-height: 1.6;
-    border-bottom: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border-bottom: 1px dashed var(--color-border);
   }
 
   .event-list li:last-child {
@@ -110,9 +110,7 @@ import Display from "@ui/Display.astro";
     display: block;
     font-weight: 800;
     font-size: 1rem;
-    color: #fff;
+    color: var(--color-text);
     margin-bottom: 0.25rem;
   }
-
-  @media (max-width: 640px) {
 </style>
diff --git a/src/components/sections/speakers.astro b/src/components/sections/speakers.astro
index c4c1a1fcf..8e91bd2ea 100644
--- a/src/components/sections/speakers.astro
+++ b/src/components/sections/speakers.astro
@@ -50,9 +50,9 @@ const sectionSubtitle = "Meet some of our amazing speakers";
   .speakers-cta {
     display: inline-block;
     padding: 0.75rem 2rem;
-    background: var(--color-accent, #f0c040);
-    color: var(--color-section-bg, #080f1a);
-    border: 1px solid var(--color-accent, #f0c040);
+    background: var(--color-accent-themed);
+    color: var(--color-on-accent);
+    border: 1px solid var(--color-accent-themed);
     border-radius: 2px;
     font-weight: 700;
     font-size: 1rem;
diff --git a/src/components/sections/sponsors/sponsors.astro b/src/components/sections/sponsors/sponsors.astro
index ac451ed24..a222b1374 100644
--- a/src/components/sections/sponsors/sponsors.astro
+++ b/src/components/sections/sponsors/sponsors.astro
@@ -62,7 +62,7 @@ const sponsorTiers = tiers
 
 <Section2 id="sponsors" variant="light" className="sponsors-section">
   <div class="sponsors-header">
-   <Title id="sponsors" color="#000">Sponsors & Partners</Title>
+   <Title id="sponsors" color="var(--color-black)">Sponsors & Partners</Title>
   </div>
 
       <div class="text-center mb-12">
@@ -103,7 +103,7 @@ const sponsorTiers = tiers
 
 <style>
   hr {margin: 0;
-  border: 1px solid #ededed;
+  border: 1px solid oklch(0.937 0 0) /* #ededed */;
   }
 
 
diff --git a/src/components/sections/testimonials.astro b/src/components/sections/testimonials.astro
index 1c81bab19..5ca7bad72 100644
--- a/src/components/sections/testimonials.astro
+++ b/src/components/sections/testimonials.astro
@@ -91,7 +91,7 @@ const sectionSubtitle = "Hear from our community";
 
 
 :global(.testimonials-section) {
-    background: var(--color-section-bg, #080f1a);
+    background: var(--color-section-bg);
   }
 
   .testimonials-header {
@@ -114,7 +114,7 @@ const sectionSubtitle = "Hear from our community";
     display: flex;
     flex-direction: column;
     padding: 1.8rem;
-    border: 1px dashed var(--color-border-dark, rgba(255,255,255,0.10));
+    border: 1px dashed var(--color-border);
     border-radius: 2px;
     text-decoration: none;
     transition: border-color 0.2s, background 0.2s;
@@ -122,8 +122,8 @@ const sectionSubtitle = "Hear from our community";
   }
 
   .testimonial-card:hover {
-    border-color: rgba(0,119,181,0.5);
-    background: var(--color-surface-subtle, rgba(255,255,255,0.05));
+    border-color: oklch(0.521 0.124 245.0 / 0.5) /* #0077b5 */;
+    background: var(--color-surface-subtle);
   }
 
   .testimonial-card-header {
@@ -136,7 +136,7 @@ const sectionSubtitle = "Hear from our community";
     width: 48px;
     height: 48px;
     border-radius: 50%;
-    border: 2px solid var(--color-border-dark, rgba(255,255,255,0.10));
+    border: 2px solid var(--color-border);
     flex-shrink: 0;
   }
 
@@ -144,7 +144,7 @@ const sectionSubtitle = "Hear from our community";
 
     font-size: 1.1rem;
     font-weight: 600;
-    color: var(--color-text-primary-dark, rgba(255,255,255,0.93));
+    color: var(--color-text-primary);
     flex: 1;
     line-height: 1.3;
   }
@@ -152,13 +152,13 @@ const sectionSubtitle = "Hear from our community";
   .testimonial-linkedin {
     width: 20px;
     height: 20px;
-    color: rgba(0,119,181,0.7);
+    color: oklch(0.521 0.124 245.0 / 0.7) /* #0077b5 */;
     flex-shrink: 0;
   }
 
   .testimonial-quote {
     font-size: 1rem;
-    color: var(--color-text-secondary-dark, rgba(255,255,255,0.78));
+    color: var(--color-text-secondary);
     line-height: 1.6;
     font-style: italic;
     margin: 0;
diff --git a/src/components/sections/updates/card.astro b/src/components/sections/updates/card.astro
index 036aca002..23a5740d6 100644
--- a/src/components/sections/updates/card.astro
+++ b/src/components/sections/updates/card.astro
@@ -15,7 +15,7 @@ const { title, subtitle, url, image, disabled = false } = Astro.props;
 ---
 
 <div
-  class="prose-xl min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#E8F4F8] rounded-2xl text-center flex flex-col max-w-[360px]"
+  class="prose-xl min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[var(--color-panel-light)] rounded-2xl text-center flex flex-col max-w-[360px]"
 >
     <div class="relative w-full">
       <Image
diff --git a/src/components/sections/updates/updates.astro b/src/components/sections/updates/updates.astro
index f789334a0..822ec5b34 100644
--- a/src/components/sections/updates/updates.astro
+++ b/src/components/sections/updates/updates.astro
@@ -87,23 +87,23 @@ const cards = await Promise.all(
 
   .news-title {
     font-size: 1.4rem;
-    color: var(--color-cream, #fff5f0);
+    color: var(--color-text);
     line-height: 1.25;
   }
 
   .news-desc {
     font-size: 1.1rem;
     line-height: 1.6;
-    color: var(--color-text-secondary-dark, rgba(255,255,255,0.78));
+    color: var(--color-text-secondary);
     flex: 1;
   }
 
   .news-cta {
     display: inline-block;
     padding: 0.6rem 1.5rem;
-    background: var(--color-accent, #f0c040);
-    color: var(--color-section-bg, #080f1a);
-    border: 1px solid var(--color-accent, #f0c040);
+    background: var(--color-accent-themed);
+    color: var(--color-on-accent);
+    border: 1px solid var(--color-accent-themed);
     border-radius: 2px;
     font-weight: 700;
     font-size: 1rem;
diff --git a/src/components/sponsor-tiers/ribbon.astro b/src/components/sponsor-tiers/ribbon.astro
index 61484b7a2..b23860aaf 100644
--- a/src/components/sponsor-tiers/ribbon.astro
+++ b/src/components/sponsor-tiers/ribbon.astro
@@ -18,8 +18,8 @@ const { className, style } = Astro.props;
 >
   <defs>
     <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="overlay">
-      <stop stop-color="#ffffff" offset="0%" stop-opacity={0.4}></stop>
-      <stop stop-color="#ffffff" offset="80%" stop-opacity={0}></stop>
+      <stop stop-color="var(--color-white)" offset="0%" stop-opacity={0.4}></stop>
+      <stop stop-color="var(--color-white)" offset="80%" stop-opacity={0}></stop>
     </linearGradient>
   </defs>
 
diff --git a/src/components/sponsor-tiers/sponsor-tiers.astro b/src/components/sponsor-tiers/sponsor-tiers.astro
index 794bc1a10..a6b234a67 100644
--- a/src/components/sponsor-tiers/sponsor-tiers.astro
+++ b/src/components/sponsor-tiers/sponsor-tiers.astro
@@ -213,7 +213,7 @@ const formatPrice = (price: number | string) => {
           return order[a.title] - order[b.title];
         })
         .map((tier) => (
-          <div class="rounded-2xl p-6 pb-20 relative not-prose z-0 border border-white/10 bg-[#141720] mb-6">
+          <div class="rounded-2xl p-6 pb-20 relative not-prose z-0 border border-[var(--color-border)] bg-[var(--color-card)] mb-6">
             <div class="min-h-[160px]">
               <Ribbon
                 className={`absolute -right-6 -top-8 ${getRibbonClass(tier.title)}`}
@@ -273,7 +273,7 @@ const formatPrice = (price: number | string) => {
         })
 
         .map((tier) => (
-          <div class="rounded-2xl p-6 pb-20 relative not-prose z-0 border border-white/10 bg-[#141720] mb-6">
+          <div class="rounded-2xl p-6 pb-20 relative not-prose z-0 border border-[var(--color-border)] bg-[var(--color-card)] mb-6">
             <div class="min-h-[160px]">
               <Ribbon
                 className={`absolute -right-6 -top-8 ${getRibbonClass(tier.title)}`}
@@ -321,7 +321,7 @@ const formatPrice = (price: number | string) => {
         })
 
         .map((tier) => (
-          <div class="rounded-2xl p-6 pb-20 relative not-prose z-0 border border-white/10 bg-[#141720] mb-6">
+          <div class="rounded-2xl p-6 pb-20 relative not-prose z-0 border border-[var(--color-border)] bg-[var(--color-card)] mb-6">
             <div class="min-h-[160px]">
               <Ribbon
                 className={`absolute -right-6 -top-8 ${getRibbonClass(tier.title)}`}
@@ -381,7 +381,7 @@ const formatPrice = (price: number | string) => {
           return order[a.title] - order[b.title];
         })
         .map((tier) => (
-          <div class="rounded-2xl p-6 pb-20 relative not-prose z-0 border border-white/10 bg-[#141720] mb-6">
+          <div class="rounded-2xl p-6 pb-20 relative not-prose z-0 border border-[var(--color-border)] bg-[var(--color-card)] mb-6">
             <div class="min-h-[160px]">
               <Ribbon
                 className={`absolute -right-6 -top-8 ${getRibbonClass(tier.title)}`}
diff --git a/src/components/ticket-tiers/ticket-tiers.astro b/src/components/ticket-tiers/ticket-tiers.astro
index 60ff44b82..c04eea2ee 100644
--- a/src/components/ticket-tiers/ticket-tiers.astro
+++ b/src/components/ticket-tiers/ticket-tiers.astro
@@ -161,7 +161,7 @@ const formatPrice = (price: number | string) => {
   <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 py-24">
     {
       tiers.map((tier) => (
-        <div class="rounded-2xl p-6 pb-20 relative not-prose z-0 border border-white/10 bg-[#141720]">
+        <div class="rounded-2xl p-6 pb-20 relative not-prose z-0 border border-[var(--color-border)] bg-[var(--color-card)]">
           <div>
             <Headline as="h4" id=`titer-${tier}` title={tier.title} />
             <div class="mt-4 space-y-2">
diff --git a/src/components/ui/Display.astro b/src/components/ui/Display.astro
index 2d1201b94..e685ebce5 100644
--- a/src/components/ui/Display.astro
+++ b/src/components/ui/Display.astro
@@ -7,13 +7,13 @@ export interface Props {
   color?: string;     // title color, default #fff
 }
 
-const { id, subtitle, span, spanColor, color = "#fff" } = Astro.props;
+const { id, subtitle, span, spanColor, color = "" } = Astro.props;
 ---
 
 <div class="display-header">
-  <h2 class="display-title" style={`color: ${color}`}>
+  <h2 class="display-title" style={color ? `color: ${color}` : undefined}>
     <slot />
-    <sup class="display-anchor"><a href={`#${id}`} style={`color: ${color}`}>#</a></sup>
+    <sup class="display-anchor"><a href={`#${id}`} style={color ? `color: ${color}` : undefined}>#</a></sup>
     {span && <span class="display-span" style={spanColor ? `color: ${spanColor}` : ""}>{span}</span>}
   </h2>
   {subtitle && <p class="display-subtitle">{subtitle}</p>}
@@ -25,6 +25,7 @@ const { id, subtitle, span, spanColor, color = "#fff" } = Astro.props;
   }
 
   .display-title {
+    color: var(--color-text);
     font-size: clamp(2.8rem, 6vw, 5.2rem);
     font-weight: 800;
     line-height: 0.9;
@@ -57,7 +58,7 @@ const { id, subtitle, span, spanColor, color = "#fff" } = Astro.props;
 
   .display-subtitle {
     font-size: 1.1rem;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.70));
+    color: var(--color-text-muted);
     margin-top: 1.2rem;
     line-height: 1.55;
     max-width: 600px;
diff --git a/src/components/ui/Note.astro b/src/components/ui/Note.astro
index f2409a4c2..d683a794f 100644
--- a/src/components/ui/Note.astro
+++ b/src/components/ui/Note.astro
@@ -8,32 +8,36 @@ interface Props {
 
 const { type="info", title, icon } = Astro.props;
 
+// Theme-aware status colours: each variant uses a CSS variable for
+// background, text and border so the callout flips between dark and
+// light. Values are defined as --note-<variant>-* tokens in
+// tailwind.css (dark) and light-theme.css (light).
 const styles = {
   warning: {
-    bg: "bg-yellow-500/10",
-    text: "text-yellow-300",
-    border: "border-yellow-500/40",
+    bg: "bg-[var(--note-warning-bg)]",
+    text: "text-[var(--note-warning-text)]",
+    border: "border-[var(--note-warning-border)]",
     defaultIcon: "fas fa-exclamation-triangle fa-2x",
     defaultTitle: "Warning"
   },
   info: {
-    bg: "bg-blue-500/10",
-    text: "text-blue-300",
-    border: "border-blue-500/40",
+    bg: "bg-[var(--note-info-bg)]",
+    text: "text-[var(--note-info-text)]",
+    border: "border-[var(--note-info-border)]",
     defaultIcon: "fas fa-info-circle fa-2x",
     defaultTitle: "Info"
   },
   success: {
-    bg: "bg-green-500/10",
-    text: "text-green-300",
-    border: "border-green-500/40",
+    bg: "bg-[var(--note-success-bg)]",
+    text: "text-[var(--note-success-text)]",
+    border: "border-[var(--note-success-border)]",
     defaultIcon: "fas fa-check-circle fa-2x",
     defaultTitle: "Success"
   },
   error: {
-    bg: "bg-red-500/10",
-    text: "text-red-300",
-    border: "border-red-500/40",
+    bg: "bg-[var(--note-error-bg)]",
+    text: "text-[var(--note-error-text)]",
+    border: "border-[var(--note-error-border)]",
     defaultIcon: "fas fa-times-circle fa-2x",
     defaultTitle: "Error"
   }
diff --git a/src/components/ui/Prose.astro b/src/components/ui/Prose.astro
index ed9d4840e..4879dd7be 100644
--- a/src/components/ui/Prose.astro
+++ b/src/components/ui/Prose.astro
@@ -12,18 +12,18 @@ const { class: className, full=false } = Astro.props;
     "mb-5 prose prose-xl prose-li:m-0 prose-ul:m-0 prose-ul:mb-4 prose-a:underline",
     "prose-h1:text-text prose-headings:font-title",
     "prose-headings:text-text",
-    "prose-a:text-text",
-    "prose-a:hover:text-accent",
+    "prose-a:text-[var(--color-accent-themed)]",
+    "prose-a:hover:text-[var(--color-accent-themed)]",
     "prose-strong:text-text prose-strong:font-bold",
     "prose-li:marker:text-text",
-    "prose-code:text-accent",
-    "prose-code:bg-white/5",
-    "prose-pre:bg-white/5",
+    "prose-code:text-[var(--color-accent-themed)]",
+    "prose-code:bg-[var(--color-surface-subtle)]",
+    "prose-pre:bg-[var(--color-surface-subtle)]",
     "prose-th:text-text",
     "prose-td:text-text",
-    "prose-hr:border-[#ededed]",
-    "prose-blockquote:text-white/80",
-    "prose-blockquote:border-l-white/30",
+    "prose-hr:border-[var(--color-border)]",
+    "prose-blockquote:text-[var(--color-text-secondary)]",
+    "prose-blockquote:border-l-[var(--color-border-bright)]",
     "prose-blockquote:not-italic",
     className,
   ]}
diff --git a/src/components/ui/Section.astro b/src/components/ui/Section.astro
index 1a9e9b485..c77f022db 100644
--- a/src/components/ui/Section.astro
+++ b/src/components/ui/Section.astro
@@ -3,7 +3,7 @@ const { full = false, variant = "default", id, class: className = "" } = Astro.p
 
 const variantClass = {
   default: "",
-  primary: "bg-[#E8F4F8]",
+  primary: "bg-[var(--color-panel-light)]",
   secondary: "bg-white",
   dark: "bg-section-bg",
   "dark-alt": "bg-section-bg-alt",
diff --git a/src/components/ui/Section2.astro b/src/components/ui/Section2.astro
index 4b18648cc..63ee8b003 100644
--- a/src/components/ui/Section2.astro
+++ b/src/components/ui/Section2.astro
@@ -10,11 +10,11 @@ const { id, variant = "default", className = "", delay = 0 } = Astro.props;
 
 const bg: Record<string, string> = {
   default: "",
-  dark: "var(--color-section-bg, #080f1a)",
-  "dark-alt": "var(--color-section-bg-alt, #070b14)",
-  "bg-dark": "var(--color-bg-dark, #0a0a1a)",
-  ep25: "var(--color-ep25-bg, #0b1b4d)",
-  light: "#fff",
+  dark: "var(--color-section-bg)",
+  "dark-alt": "var(--color-section-bg-alt)",
+  "bg-dark": "var(--color-bg-dark)",
+  ep25: "var(--color-ep25-bg)",
+  light: "var(--color-white)",
 };
 ---
 
diff --git a/src/components/ui/SpeakerCard.astro b/src/components/ui/SpeakerCard.astro
index e8c069223..ac95b694e 100644
--- a/src/components/ui/SpeakerCard.astro
+++ b/src/components/ui/SpeakerCard.astro
@@ -39,7 +39,7 @@ const { speaker } = Astro.props;
 
   .speaker-card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+    box-shadow: 0 8px 24px var(--color-scrim-30);
   }
 
   .speaker-photo {
@@ -66,8 +66,8 @@ const { speaker } = Astro.props;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(255,255,255,0.08);
-    color: rgba(255,255,255,0.5);
+    background: var(--color-surface-medium);
+    color: oklch(1 0 0 / 0.5); /* rgba(255,255,255,0.5) */
     font-size: 2rem;
     font-weight: 700;
   }
@@ -75,13 +75,13 @@ const { speaker } = Astro.props;
   .speaker-info {
     padding: 0.5rem 0.5rem;
     text-align: center;
-    background: rgba(255,255,255,0.03);
+    background: var(--color-surface-faint);
   }
 
   .speaker-name {
     font-size: 0.85rem;
     font-weight: 600;
-    color: rgba(255,255,255,0.93);
+    color: var(--color-text-primary);
     margin: 0;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/components/ui/Title.astro b/src/components/ui/Title.astro
index 2da43184b..393c54281 100644
--- a/src/components/ui/Title.astro
+++ b/src/components/ui/Title.astro
@@ -6,14 +6,14 @@ export interface Props {
   anchorColor?: string;  // anchor link color, default matches color
 }
 
-const { id, subtitle, color = "#fff", anchorColor = color } = Astro.props;
+const { id, subtitle, color = "var(--color-text)", anchorColor = color } = Astro.props;
 ---
 
 <h2 class="sec-title" style={`color: ${color}`}>
   <slot />
   <sup class="sec-anchor"><a href={`#${id}`} style={`color: ${anchorColor}`} aria-label={`Jump to ${id}`}>#</a></sup>
 </h2>
-{subtitle && <p class="sec-subtitle" style={`color: var(--color-text-muted-dark, rgba(255,255,255,0.70))`}>{subtitle}</p>}
+{subtitle && <p class="sec-subtitle" style={`color: var(--color-text-muted)`}>{subtitle}</p>}
 
 <style>
   .sec-title {
diff --git a/src/content/pages/tickets.mdx b/src/content/pages/tickets.mdx
index 7e8d2a825..e73ae4652 100644
--- a/src/content/pages/tickets.mdx
+++ b/src/content/pages/tickets.mdx
@@ -17,7 +17,7 @@ Discover the latest Python trends, learn from 180+ expert speakers, network with
 ## Where and When?
 🏛️ <a href="/krakow" class="text-primary hover:text-primary-hover underline">Kraków, Poland</a>
 
-  <div class="bg-white/5 p-6 rounded-lg w-full border border-white/10">
+  <div class="bg-[var(--color-surface-subtle)] p-6 rounded-lg w-full border border-[var(--color-border)]">
     <p class="font-bold text-xl mb-4">A week of all things Python:</p>
     <ul class="list-none space-y-2">
       <li class="flex items-start">
@@ -58,7 +58,7 @@ Combined tickets are **limited to 300** due to tutorial capacity!
 ### Volume Discounts
 Is your company attending the conference as a team? We offer the following volume discounts:
 
-<div class="bg-white/5 p-6 rounded-lg border border-white/10">
+<div class="bg-[var(--color-surface-subtle)] p-6 rounded-lg border border-[var(--color-border)]">
   <ul class="list-none space-y-4">
     <li class="flex items-start">
       <span>💰 Buy 5 business tickets of any type, pay for only 4</span>
@@ -83,7 +83,7 @@ If you're purchasing multiple tickets, please consider sponsoring the event!
 
 ### Additional Information
       <div class="grid grid-cols-1 md:grid-cols-2 gap-10 max-w-4xl mx-auto">
-        <div class="bg-white/5 p-6 rounded-lg border border-white/10">
+        <div class="bg-[var(--color-surface-subtle)] p-6 rounded-lg border border-[var(--color-border)]">
           <h5 class="text-xl font-bold mb-4">Special Grants</h5>
           <p>
             Are you a CPython Core Developer or an EPS Fellow? You're eligible for a free combined ticket!
@@ -95,7 +95,7 @@ If you're purchasing multiple tickets, please consider sponsoring the event!
           </p>
         </div>
 
-        <div class="bg-white/5 p-6 rounded-lg border border-white/10">
+        <div class="bg-[var(--color-surface-subtle)] p-6 rounded-lg border border-[var(--color-border)]">
           <h5 class="text-xl font-bold mb-4">Refund Policy</h5>
           <p class="mb-4">
             We know plans can change! If you can't attend, you can request a full refund via your order confirmation email until June 7, 2026.
@@ -108,7 +108,7 @@ If you're purchasing multiple tickets, please consider sponsoring the event!
 
 <br></br>
 
-<div class="bg-white/5 p-6 rounded-lg border border-white/10">
+<div class="bg-[var(--color-surface-subtle)] p-6 rounded-lg border border-[var(--color-border)]">
   <h5 class="text-xl font-bold mb-4">Important Notes</h5>
   <ul class="list-none space-y-4">
     <li class="flex items-start">
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 581e790a5..3c7141ea5 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -13,6 +13,7 @@ import "@styles/global.css";
 import "@styles/search.css";
 import "@styles/ep2026-theme.css";
 import "@styles/markdown.css";
+import "@styles/light-theme.css";
 
 
 export interface Props {
@@ -115,7 +116,7 @@ main {
 }
 
 footer {
-  background-color: #0c1628;
+  background-color: oklch(0.201 0.039 261.5); /* #0c1628 */
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
 }
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
index f0cca2b59..28726928c 100644
--- a/src/layouts/MarkdownLayout.astro
+++ b/src/layouts/MarkdownLayout.astro
@@ -120,7 +120,7 @@ const { title, description, toc=false } = Astro.props;
     font-size: 0.95rem;
     line-height: 1.5;
     padding: 1rem;
-    border-left: 1px solid #e0e0e0;
+    border-left: 1px solid oklch(0.907 0 89.9); /* #e0e0e0 */
   }
 
   #toc ul {
@@ -135,13 +135,13 @@ const { title, description, toc=false } = Astro.props;
 
   #toc li ul {
     margin-left: 1em;
-    border-left: 1px dashed #ddd;
+    border-left: 1px dashed oklch(0.898 0 89.9); /* #ddd */
     padding-left: 0.75em;
   }
 
   #toc a {
     display: block;
-    color: var(--color-text-muted-dark, rgba(255,255,255,0.6));
+    color: var(--color-text-muted);
     text-decoration: none;
     padding: 0.3em 0.5em;
     border-left: 1px solid transparent;
@@ -153,14 +153,14 @@ const { title, description, toc=false } = Astro.props;
   }
 
   #toc a:hover {
-    color: var(--color-accent, #f0c040);
-    border-left-color: var(--color-accent, #f0c040);
+    color: var(--color-accent-themed);
+    border-left-color: var(--color-accent-themed);
     padding-left: 0.8em;
   }
 
   #toc a.active {
-    color: var(--color-accent, #f0c040);
-    border-left: 1px solid var(--color-accent, #f0c040);
+    color: var(--color-accent-themed);
+    border-left: 1px solid var(--color-accent-themed);
     font-weight: 500;
   }
 
diff --git a/src/layouts/ScheduleLayout.astro b/src/layouts/ScheduleLayout.astro
index acf492e52..c9daf70ea 100644
--- a/src/layouts/ScheduleLayout.astro
+++ b/src/layouts/ScheduleLayout.astro
@@ -54,11 +54,6 @@ body {
   grid-column: 2;
 }
 
-/* Remove light theme background from body on schedule pages */
-body {
-  background-color: var(--color-primary) !important;
-}
-
 main {
   background-color: transparent !important;
 }
@@ -102,15 +97,15 @@ header#navbar .bg-\[\#1c294b\] {
 }
 
 .ep-sched-tab:hover {
-  border-color: var(--ep-accent);
+  border-color: var(--color-accent-themed);
   color: var(--ep-white);
-  background: rgba(240, 192, 64, 0.08);
+  background: var(--color-surface-subtle);
 }
 
 .ep-sched-tab.active {
-  background: var(--ep-accent);
-  border-color: var(--ep-accent);
-  color: var(--ep-bg);
+  background: var(--color-accent-themed);
+  border-color: var(--color-accent-themed);
+  color: var(--color-on-accent);
   font-weight: 600;
 }
 
@@ -161,8 +156,8 @@ header#navbar .bg-\[\#1c294b\] {
     -45deg,
     transparent,
     transparent 2px,
-    rgba(50,180,50,0.3) 2px,
-    rgba(50,180,50,0.3) 4px
+    oklch(0.675 0.201 142.9 / 0.3) 2px, /* rgba(50,180,50,0.3) */
+    oklch(0.675 0.201 142.9 / 0.3) 4px /* rgba(50,180,50,0.3) */
   );
   background-color: var(--ep-surface-subtle);
 }
@@ -172,15 +167,15 @@ header#navbar .bg-\[\#1c294b\] {
     -45deg,
     transparent,
     transparent 2px,
-    rgba(200,50,50,0.3) 2px,
-    rgba(200,50,50,0.3) 4px
+    oklch(0.551 0.187 25.8 / 0.3) 2px, /* rgba(200,50,50,0.3) */
+    oklch(0.551 0.187 25.8 / 0.3) 4px /* rgba(200,50,50,0.3) */
   );
   background-color: var(--ep-surface-subtle);
 }
 
 .ep-legend-break {
-  background: rgba(255,150,0,0.2);
-  border-color: rgba(255,150,0,0.4);
+  background: oklch(0.767 0.175 63.1 / 0.2); /* rgba(255,150,0,0.2) */
+  border-color: oklch(0.767 0.175 63.1 / 0.4); /* rgba(255,150,0,0.4) */
 }
 
 .ep-legend-room-change {
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 7846a170e..a7dcdfec1 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -133,7 +133,7 @@ import Layout from "@layouts/Layout.astro";
     justify-content: center;
     align-items: center;
     position: relative;
-    background: #ffca40;
+    background: oklch(0.863 0.157 86.6); /* #ffca40 */
     padding-top: 100px;
     padding-bottom: 100px;
 
@@ -144,7 +144,7 @@ import Layout from "@layouts/Layout.astro";
       left: 0;
       width: 100%;
       height: 40%;
-      background: #ff8ba1;
+      background: oklch(0.769 0.141 8.9); /* #ff8ba1 */
     }
 
     svg {
diff --git a/src/pages/_overview.astro b/src/pages/_overview.astro
index 0be5f9c61..f468e32b5 100644
--- a/src/pages/_overview.astro
+++ b/src/pages/_overview.astro
@@ -173,10 +173,10 @@ const imageStyle = "m-2 md:float-right lg:float-none max-w-[300px] md:max-w-[400
 
 <style>
     :root {
-      --primary-blue: #3A4CA3;
-      --accent-pink: #F3B719;
-      --bg-cream: #F7F1E6;
-      --text-dark: #333;
+      --primary-blue: oklch(0.451 0.142 270.9); /* #3A4CA3 */
+      --accent-pink: oklch(0.813 0.163 83.9); /* #F3B719 */
+      --bg-cream: oklch(0.96 0.016 82.8); /* #F7F1E6 */
+      --text-dark: oklch(0.321 0 89.9); /* #333 */
     }
     .prose {
       max-width: initial;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ca114cf5c..7f96122bf 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -36,9 +36,9 @@ import Connect from "@sections/connect.astro";
   <!-- <City /> -->
   <Sponsors />
   <CommunityPartners />
-  <FinAid />
-  <PyLadies />
-  <OrgSummit />
+  <!-- <FinAid /> -->
+  <!-- <PyLadies /> -->
+  <!-- <OrgSummit /> -->
   <EuroSciPy />
   <!-- <Ep25 /> -->
   <Connect />
diff --git a/src/pages/speaker/[slug].astro b/src/pages/speaker/[slug].astro
index b220de862..e9a7a6fac 100644
--- a/src/pages/speaker/[slug].astro
+++ b/src/pages/speaker/[slug].astro
@@ -283,7 +283,7 @@ function getGitHosting(url: string): string | undefined {
 dl,
 dd, dt {
   font-size: 1.1rem;
-  color: var(--color-text-primary-dark, rgba(255,255,255,0.93));
+  color: var(--color-text-primary);
 }
 
   </style>
diff --git a/src/pages/speakers.astro b/src/pages/speakers.astro
index 0b8f2f0b9..b6ebf5d59 100644
--- a/src/pages/speakers.astro
+++ b/src/pages/speakers.astro
@@ -63,21 +63,21 @@ const sortedSpeakers = speakers
   .filter-input {
     width: 100%;
     padding: 0.75rem 1rem;
-    background: rgba(255,255,255,0.08);
-    border: 1px solid rgba(255,255,255,0.15);
+    background: var(--color-surface-medium);
+    border: 1px solid var(--color-border-strong);
     border-radius: 2px;
-    color: #fff;
+    color: var(--color-text);
     font-size: 1rem;
     outline: none;
     transition: border-color 0.2s;
   }
 
   .filter-input::placeholder {
-    color: rgba(255,255,255,0.5);
+    color: oklch(1 0 0 / 0.5); /* rgba(255,255,255,0.5) */
   }
 
   .filter-input:focus {
-    border-color: var(--color-accent, #f0c040);
+    border-color: var(--color-accent);
   }
 
   .speakers-grid {
diff --git a/src/styles/bg-universe.css b/src/styles/bg-universe.css
index f4493c1a5..513f72ed8 100644
--- a/src/styles/bg-universe.css
+++ b/src/styles/bg-universe.css
@@ -1,21 +1,21 @@
 .section-universe {
-  background-color: #0b1121;
+  background-color: var(--color-universe-bg);
   background-image:
     radial-gradient(
       circle at 10% 20%,
-      rgba(255, 255, 255, 0.05) 0%,
-      rgba(255, 255, 255, 0) 0.5%
+      oklch(1 0 0 / 0.05) 0%,
+      oklch(1 0 0 / 0) 0.5%
     ),
     radial-gradient(
       circle at 90% 80%,
-      rgba(255, 255, 255, 0.05) 0%,
-      rgba(255, 255, 255, 0) 0.5%
+      oklch(1 0 0 / 0.05) 0%,
+      oklch(1 0 0 / 0) 0.5%
     );
   background-repeat: repeat;
   background-size:
     100% 100%,
     100% 100%;
-  color: #fff;
+  color: var(--color-white);
   position: relative;
   overflow: hidden;
 }
@@ -74,11 +74,11 @@
   width: 100%;
   height: 100%;
   background-image:
-    radial-gradient(2px 2px at 20% 15%, rgba(255, 255, 255, 0.8), transparent),
+    radial-gradient(2px 2px at 20% 15%, oklch(1 0 0 / 0.8), transparent),
     radial-gradient(1px 1px at 45% 35%, white, transparent),
-    radial-gradient(1px 1px at 65% 55%, rgba(255, 255, 255, 0.7), transparent),
+    radial-gradient(1px 1px at 65% 55%, oklch(1 0 0 / 0.7), transparent),
     radial-gradient(2px 2px at 80% 25%, white, transparent),
-    radial-gradient(1px 1px at 35% 75%, rgba(255, 255, 255, 0.9), transparent),
+    radial-gradient(1px 1px at 35% 75%, oklch(1 0 0 / 0.9), transparent),
     radial-gradient(1px 1px at 55% 45%, white, transparent);
   background-size:
     300px 300px,
@@ -189,11 +189,11 @@
 .section-universe strong,
 .section-universe li,
 .section-universe a {
-  color: #fff !important;
+  color: var(--color-white) !important;
 }
 
 .section-universe .bg-icons svg text {
-  fill: #a0b7e9;
+  fill: oklch(0.75 0.067 268.8); /* #a0b7e9 */
   opacity: 0.8;
 }
 
@@ -202,7 +202,7 @@
 .section-universe .bg-\[\#E8F4F8\] h4,
 .section-universe .bg-\[\#E8F4F8\] h5,
 .section-universe .bg-\[\#E8F4F8\] h6 {
-  color: #151f38 !important;
+  color: var(--color-hero-primary) !important;
 }
 
 .section-universe .bg-\[\#E8F4F8\] p,
@@ -210,22 +210,22 @@
 .section-universe .bg-\[\#E8F4F8\] strong,
 .section-universe .bg-\[\#E8F4F8\] a,
 .section-universe .bg-\[\#E8F4F8\] li {
-  color: #151f38 !important;
+  color: var(--color-hero-primary) !important;
 }
 
 .section-universe .bg-\[\#E8F4F8\] button,
 .section-universe .bg-\[\#E8F4F8\] .button,
 .section-universe .bg-\[\#E8F4F8\] a[class*="button"] {
-  color: #fff !important;
+  color: var(--color-white) !important;
 }
 
 .section-universe .text-center {
-  color: #fff;
+  color: var(--color-white);
 }
 
 .section-universe .text-gray-600,
 .section-universe .text-gray-700,
 .section-universe .text-gray-800,
 .section-universe .text-gray-900 {
-  color: #fff !important;
+  color: var(--color-white) !important;
 }
diff --git a/src/styles/ep2026-theme.css b/src/styles/ep2026-theme.css
index bd5bef058..2009d708b 100644
--- a/src/styles/ep2026-theme.css
+++ b/src/styles/ep2026-theme.css
@@ -11,107 +11,66 @@
   box-sizing: border-box;
 }
 
+/* NOTE: The --ep-* palette is now defined centrally in tailwind.css
+   as aliases to the semantic role tokens (so it flips with the
+   theme). Only the few --ep-* values that are NOT part of the
+   semantic system (decorative one-offs used solely by the schedule
+   selectors below) are declared here, in oklch. */
 :root {
-  /* Core brand */
-  /* ========== */
-  --ep-bg: #080002;
-  --ep-red: #d4003a;
-  --ep-red-on-dark: #ff1a4a;
-  --ep-indigo: #4a0018;
-  --ep-magenta: #800020;
-  --ep-accent: #f0c040;
-  --ep-white: #ffffff;
-  --ep-cream: #fff5f0;
-  --ep-dark2: #0e0004;
-  --ep-dark3: #0a0003;
-
-  /* RGB channel triples (for composable rgba) */
-  /* ========================================= */
-  --ep-accent-rgb: 240, 192, 64;
-  --ep-info: #5ab0e0;
-  --ep-info-rgb: 90, 176, 224;
-  --ep-w: 255, 255, 255;
-
-  /* White text levels */
-  /* ================= */
-  --ep-text-primary: rgba(255, 255, 255, 0.93);
-  --ep-text-secondary: rgba(255, 255, 255, 0.78);
-  --ep-text-muted: rgba(255, 255, 255, 0.7);
-  --ep-text-faint: rgba(255, 255, 255, 0.6);
-
-  /* White decorative (borders, surfaces) */
-  /* ==================================== */
-  --ep-border: rgba(255, 255, 255, 0.1);
-  --ep-border-strong: rgba(255, 255, 255, 0.15);
-  --ep-border-bright: rgba(255, 255, 255, 0.25);
-  --ep-surface-faint: rgba(255, 255, 255, 0.03);
-  --ep-surface-subtle: rgba(255, 255, 255, 0.05);
-  --ep-surface-medium: rgba(255, 255, 255, 0.08);
-
-  /* Black shadows */
-  /* ============= */
-  --ep-black-75: rgba(0, 0, 0, 0.75);
-  --ep-black-70: rgba(0, 0, 0, 0.7);
-  --ep-black-50: rgba(0, 0, 0, 0.5);
-  --ep-black-40: rgba(0, 0, 0, 0.4);
-  --ep-black-30: rgba(0, 0, 0, 0.3);
-  --ep-black-15: rgba(0, 0, 0, 0.15);
-
-  /* CTA red gradient */
-  /* ================ */
-  --ep-cta-red: #d62020;
-  --ep-cta-red-dark: #8a0020;
-  --ep-cta-mid: #a8002d;
-  --ep-cta-end: #700020;
-
-  /* CTA text on colored buttons */
-  /* =========================== */
-  --ep-cta-text: #0d1a2a;
-  --ep-cta-text-warm: #f0ede8;
-
-  /* Grays */
-  /* ===== */
-  --ep-gray-ee: #eeeeee;
-  --ep-gray-88: #888888;
-  --ep-gray-37: #374151;
-  --ep-gray-22: #222222;
-
-  /* Red / green accents */
-  /* =================== */
-  --ep-red-f0: #f04040;
-  --ep-red-cc: #cc3030;
-  --ep-green-2e: #2ecc71;
-  --ep-green-25: #25a85d;
-  --ep-green-light: #6fd66f;
-  --ep-red-light: #e07070;
-  --ep-green-1a: #1a5c2a;
-
-  /* Schedule room bg */
-  /* ================ */
-  --ep-sched-room-bg: #1e3456;
-
-  /* Section backgrounds */
-  /* =================== */
-  --ep-bg-section: #080f1a;
-  --ep-bg-section-alt: #070b14;
-  --ep-bg-dark: #0a0a1a;
-  --ep-bg-card: #3d1a2a;
-
-  /* Footer gradient */
-  /* =============== */
-  --ep-footer-g1: #0c1628;
-  --ep-footer-g2: #142744;
-  --ep-footer-g3: #1a1a3a;
-  --ep-footer-g4: #0f1a2e;
-
-  /* Overlay */
-  /* ======= */
-  --ep-overlay-dark: rgba(10, 10, 20, 0.95);
-
-  /* Links */
-  /* ===== */
-  --ep-link-color: var(--ep-accent);
-  --ep-link-hover: var(--ep-white);
+  /* Theme-constant decorative one-offs */
+  --ep-dark2: oklch(0.13 0.02 18.8); /* #0e0004 scrollbar track */
+  --ep-dark3: oklch(0.13 0.024 18.8); /* #0a0003 */
+  --ep-info: oklch(0.72 0.099 232.7); /* #5ab0e0 */
+  --ep-cta-text: oklch(0.2 0.03 256.4); /* #0d1a2a */
+  --ep-cta-text-warm: oklch(0.94 0.008 67.7); /* #f0ede8 */
+  --ep-gray-ee: oklch(0.949 0 0); /* #eeeeee */
+  --ep-gray-88: oklch(0.629 0 0); /* #888888 */
+  --ep-gray-37: oklch(0.373 0.027 257.9); /* #374151 */
+  --ep-gray-22: oklch(0.279 0 0); /* #222222 */
+  --ep-red-f0: oklch(0.633 0.211 23.6); /* #f04040 */
+  --ep-red-cc: oklch(0.553 0.176 24.5); /* #cc3030 */
+  --ep-green-light: oklch(0.793 0.166 146.6); /* #6fd66f */
+  --ep-red-light: oklch(0.64 0.121 20.7); /* #e07070 */
+  --ep-green-1a: oklch(0.43 0.105 150.4); /* #1a5c2a */
+  --ep-bg-card: oklch(0.27 0.07 5.9); /* #3d1a2a */
+
+  /* Schedule room bg — flips with theme via light-theme.css */
+  --ep-sched-room-bg: oklch(0.32 0.06 264.4); /* #1e3456 */
+
+  /* Footer gradient stops (dark theme) */
+  --ep-footer-g1: oklch(0.21 0.04 264.6); /* #0c1628 */
+  --ep-footer-g2: oklch(0.29 0.07 263.9); /* #142744 */
+  --ep-footer-g3: oklch(0.26 0.06 286.4); /* #1a1a3a */
+  --ep-footer-g4: oklch(0.24 0.05 266.4); /* #0f1a2e */
+
+  /* Schedule decorative one-offs (dark theme; light overrides in
+     light-theme.css). These flip so the schedule chrome matches the
+     active theme instead of staying navy/dark in light mode. */
+  --ep-session-hover-bg: oklch(0.24 0.05 266.4); /* #0f1a2e */
+  --ep-beginner-stripe: oklch(0.66 0.18 145 / 0.2); /* rgba(50,180,50,.2) */
+  --ep-advanced-stripe: oklch(0.55 0.18 25 / 0.2); /* rgba(200,50,50,.2) */
+  --ep-break-bg: oklch(0.75 0.15 70 / 0.06); /* rgba(255,150,0,.06) */
+  --ep-break-border: oklch(0.75 0.15 70 / 0.18); /* rgba(255,150,0,.18) */
+  --ep-day-end-bg: oklch(0.34 0.03 266); /* #2d3548 */
+  --ep-day-end-text: oklch(1 0 0 / 0.55);
+
+  /* Schedule chrome: sticky header / posters / room-change panels */
+  --ep-sched-chrome-bg: var(--color-hero-primary); /* dark navy */
+  --ep-sched-chrome-text: oklch(1 0 0 / 0.55); /* muted light */
+
+  /* Session level pills — dark theme: translucent tint + colored ink.
+     (Light theme makes these solid; see light-theme.css.) */
+  --ep-level-beginner-bg: oklch(0.654 0.196 142.5 / 0.2);
+  --ep-level-beginner-text: var(--color-session-beginner);
+  --ep-level-intermediate-bg: var(--color-surface-medium);
+  --ep-level-intermediate-text: var(--color-text-muted);
+  --ep-level-advanced-bg: oklch(0.521 0.196 27.5 / 0.2);
+  --ep-level-advanced-text: var(--color-session-advanced);
+
+  /* Note / info box — dark theme: faint amber tint + light ink. */
+  --ep-note-bg: oklch(0.831 0.142 84.4 / 0.08);
+  --ep-note-border: oklch(0.831 0.142 84.4 / 0.2);
+  --ep-note-text: var(--color-text-secondary);
 }
 
 /* Dark theme base styles */
@@ -250,7 +209,7 @@ body.ep2026-theme {
 
 .ep-session:hover {
   border-color: var(--ep-accent);
-  background: #0f1a2e !important;
+  background: var(--ep-session-hover-bg) !important;
   z-index: 10;
   transition:
     border-color 0.1s ease-in-out,
@@ -308,8 +267,8 @@ body.ep2026-theme {
       -45deg,
       transparent,
       transparent 4px,
-      rgba(50, 180, 50, 0.2) 4px,
-      rgba(50, 180, 50, 0.2) 6px
+      var(--ep-beginner-stripe) 4px,
+      var(--ep-beginner-stripe) 6px
     ),
     var(--ep-surface-subtle);
 }
@@ -320,8 +279,8 @@ body.ep2026-theme {
       -45deg,
       transparent,
       transparent 4px,
-      rgba(200, 50, 50, 0.2) 4px,
-      rgba(200, 50, 50, 0.2) 6px
+      var(--ep-advanced-stripe) 4px,
+      var(--ep-advanced-stripe) 6px
     ),
     var(--ep-surface-subtle);
 }
@@ -332,8 +291,8 @@ body.ep2026-theme {
   align-items: center;
   justify-content: center;
   text-align: center;
-  background: rgba(255, 150, 0, 0.06);
-  border: 2px solid rgba(255, 150, 0, 0.18);
+  background: var(--ep-break-bg);
+  border: 2px solid var(--ep-break-border);
   border-radius: 6px;
   padding: 0.4rem 0.8rem;
   font-family: "Inter Tight", system-ui, sans-serif;
@@ -351,10 +310,10 @@ body.ep2026-theme {
 }
 
 .ep-break.day-end {
-  background: #2d3548;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--ep-day-end-bg);
+  border: 1px solid var(--ep-surface-medium);
   border-radius: 4px;
-  color: rgba(255, 255, 255, 0.55);
+  color: var(--ep-day-end-text);
   font-size: 0.9rem;
   margin: 0.5rem 0;
   padding: 0.5rem 1rem;
@@ -366,7 +325,7 @@ body.ep2026-theme {
   text-align: center;
   border: 2px solid var(--ep-accent);
   border-radius: 6px;
-  background: rgba(var(--ep-accent-rgb), 0.04);
+  background: oklch(0.831 0.142 84.4 / 0.04);
 }
 
 .ep-posters h2 {
@@ -415,11 +374,11 @@ body.ep2026-theme {
 
 /* Note / info box */
 .ep-note {
-  background: rgba(var(--ep-accent-rgb), 0.08);
-  border: 1px solid rgba(var(--ep-accent-rgb), 0.2);
+  background: var(--ep-note-bg);
+  border: 1px solid var(--ep-note-border);
   border-radius: 6px;
   padding: 0.8rem 1rem;
-  color: var(--ep-text-secondary);
+  color: var(--ep-note-text);
   font-family: "Inter Tight", system-ui, sans-serif;
   font-size: 0.95rem;
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index 0807649c0..0e06590c3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -72,7 +72,7 @@ body {
 }
 
 .prose :is(h1, h2, h3, h4, h5, h6) a:focus {
-  outline: 4px solid #0073e6;
+  outline: 4px solid oklch(0.55 0.18 250.4); /* #0073e6 */
   outline-offset: 5px;
 }
 
@@ -82,12 +82,12 @@ body {
   width: 100%;
   height: auto;
   border-width: 4px;
-  border-color: white;
+  border-color: var(--color-white);
   border-style: solid;
   border-radius: 0.5rem;
   box-shadow:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    0 10px 15px -3px oklch(0 0 0 / 0.1),
+    0 4px 6px -2px oklch(0 0 0 / 0.05);
 }
 
 .prose .no-border img {
diff --git a/src/styles/light-theme.css b/src/styles/light-theme.css
new file mode 100644
index 000000000..7fe66ca00
--- /dev/null
+++ b/src/styles/light-theme.css
@@ -0,0 +1,261 @@
+/* ============================================================
+   Light theme — thin override layer.
+
+   The bulk of theming now happens automatically: components use
+   the semantic role tokens (--color-bg, --color-text,
+   --color-surface-*, --color-border, --color-button, …) which are
+   re-valued for .light in tailwind.css. Everything below is only
+   for cases the semantic tokens cannot reach:
+     1. Legacy --ep-* schedule values that need a light variant.
+     2. Third-party widget internals (pagefind) we don't control.
+     3. The intentionally always-dark starfield universe section.
+   No more per-component !important hex overrides.
+   ============================================================ */
+
+.light {
+  /* Schedule room header bg (legacy --ep-* one-off) */
+  --ep-sched-room-bg: oklch(0.945 0.004 264); /* #e6e8ed */
+  --ep-session-hover-bg: oklch(0.97 0.003 264); /* light hover */
+  --ep-day-end-bg: oklch(0.945 0.004 264);
+  --ep-day-end-text: oklch(0 0 0 / 0.55);
+
+  /* Schedule chrome flips to light surface + dark muted ink */
+  --ep-sched-chrome-bg: oklch(0.945 0.004 264); /* #e6e8ed */
+  --ep-sched-chrome-text: oklch(0 0 0 / 0.55);
+
+  /* Session level stripes: lighter, lower-alpha on light cards so the
+     diagonal hatch stays subtle instead of heavy. */
+  --ep-beginner-stripe: oklch(0.72 0.17 145 / 0.12);
+  --ep-advanced-stripe: oklch(0.6 0.2 25 / 0.1);
+
+  /* Session level pills — light theme: SOLID pastel chips (no
+     opacity). High lightness + low chroma backgrounds with darker
+     ink of the same hue for readable, low-saturation labels. */
+  --ep-level-beginner-bg: oklch(0.92 0.06 145); /* pastel green */
+  --ep-level-beginner-text: oklch(0.42 0.12 145); /* deep green ink */
+  --ep-level-intermediate-bg: oklch(0.92 0.004 264); /* pastel gray */
+  --ep-level-intermediate-text: oklch(0.4 0.005 264); /* deep gray ink */
+  --ep-level-advanced-bg: oklch(0.91 0.05 25); /* pastel red */
+  --ep-level-advanced-text: oklch(0.45 0.15 25); /* deep red ink */
+
+  /* Note / info box — light theme: clear amber callout with strong,
+     near-black warm ink for high contrast. */
+  --ep-note-bg: oklch(0.93 0.07 88); /* amber fill */
+  --ep-note-border: oklch(0.78 0.13 84); /* amber border */
+  --ep-note-text: oklch(0.25 0.04 70); /* near-black warm ink */
+
+  /* Status callouts (Note.astro) — light theme: soft tinted bg with
+     DARK coloured ink for strong contrast (no more light -300 text
+     on a faint tint). */
+  --note-info-bg: oklch(0.95 0.04 245);
+  --note-info-text: oklch(0.4 0.16 250);
+  --note-info-border: oklch(0.6 0.18 250);
+  --note-success-bg: oklch(0.95 0.05 150);
+  --note-success-text: oklch(0.4 0.13 152);
+  --note-success-border: oklch(0.62 0.16 150);
+  --note-warning-bg: oklch(0.95 0.06 88);
+  --note-warning-text: oklch(0.42 0.1 70);
+  --note-warning-border: oklch(0.75 0.13 84);
+  --note-error-bg: oklch(0.95 0.04 25);
+  --note-error-text: oklch(0.45 0.18 25);
+  --note-error-border: oklch(0.62 0.2 25);
+
+  /* Footer gradient stops → flatten to light surface */
+  --ep-footer-g1: oklch(0.97 0.003 264);
+  --ep-footer-g2: oklch(0.97 0.003 264);
+  --ep-footer-g3: oklch(0.945 0.004 264);
+  --ep-footer-g4: oklch(0.97 0.003 264);
+}
+
+/* ── Pagefind search widget (3rd-party internals) ── */
+.light .pagefind-ui {
+  --pagefind-ui-primary: oklch(0.23 0.04 277);
+  --pagefind-ui-text: oklch(0.23 0.04 277);
+  --pagefind-ui-background: var(--color-white);
+  --pagefind-ui-border: oklch(0 0 0 / 0.1);
+}
+
+.light .search-modal-content {
+  background: var(--color-white);
+}
+
+.light .search-modal-content .pagefind-ui__search-input {
+  color: oklch(0.23 0.04 277);
+  border-bottom-color: oklch(0 0 0 / 0.1);
+}
+
+.light .search-modal-content .pagefind-ui__search-input::placeholder {
+  color: oklch(0 0 0 / 0.4);
+}
+
+.light nav[aria-label="Breadcrumb"] a {
+  color: oklch(0.39 0.11 277) !important;
+}
+.light nav[aria-label="Breadcrumb"] span {
+  color: oklch(0 0 0 / 0.5) !important;
+}
+.light nav[aria-label="Breadcrumb"] .text-white\/60,
+.light nav[aria-label="Breadcrumb"] .text-white\/40 {
+  color: oklch(0 0 0 / 0.5) !important;
+}
+
+.light .search-modal-content .pagefind-ui__result {
+  border-bottom-color: oklch(0 0 0 / 0.05);
+}
+
+.light .search-modal-content .pagefind-ui__result-link {
+  color: oklch(0.23 0.04 277);
+}
+
+.light .search-modal-content .pagefind-ui__result-excerpt {
+  color: oklch(0 0 0 / 0.65);
+}
+
+.light .search-modal-content .pagefind-ui__message {
+  color: oklch(0 0 0 / 0.5);
+}
+
+.light .search-modal-backdrop {
+  background: oklch(1 0 0 / 0.8);
+}
+
+.light .website-btn {
+  color: #ffffff !important;
+}
+
+/* ── Filter inputs & selects ── */
+.light select,
+.light .filter-input {
+  background: #ffffff !important;
+  color: #1a1a2e !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+.light label {
+  color: #1a1a2e !important;
+}
+
+.light .filter-sessions select {
+  background: #ffffff !important;
+  color: #1a1a2e !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+/* ── Sessions page filter input ── */
+.light #sessionSearch {
+  color: #1a1a2e !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+  background: #ffffff !important;
+}
+
+.light #sessionSearch:focus {
+  border-color: #1a56db !important;
+}
+
+.light #sessionSearch::placeholder {
+  color: rgba(0, 0, 0, 0.4) !important;
+}
+
+.light .filter-sessions select {
+  color: #1a1a2e !important;
+  background: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+
+.light .filter-sessions select:focus {
+  border-color: #1a56db !important;
+}
+
+/* ── Labels ── */
+.light label {
+  color: #1a1a2e !important;
+}
+
+/* ── Tags (session type/level badges) ── */
+.light .inline-block.bg-white\/10 {
+  background: rgba(0, 0, 0, 0.06) !important;
+  color: #1a1a2e !important;
+}
+
+/* ── Session list tags ── */
+.light .sessions a.inline-block,
+.light a.inline-block.bg-white\/10 {
+  background: rgba(0, 0, 0, 0.06) !important;
+  color: #1a1a2e !important;
+}
+
+.light .sessions a.inline-block:hover,
+.light a.inline-block.bg-white\/10:hover {
+  background: #1a56db !important;
+  color: #fff !important;
+}
+
+/* ── Pre / code blocks ── */
+.light pre,
+.light code {
+  background: rgba(0, 0, 0, 0.04) !important;
+  color: #1a1a2e !important;
+}
+
+/* ── Sprint cards ── */
+.light .sprint-card {
+  background: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+.light .sprint-card h3 {
+  color: #1a1a2e !important;
+}
+
+.light .sprint-card .text-white\/60,
+.light .sprint-card .text-white\/70,
+.light .sprint-card .text-white\/90 {
+  color: rgba(0, 0, 0, 0.65) !important;
+}
+
+.light .sprint-card a {
+  color: #1a56db !important;
+}
+
+/* ── Speaker detail page ── */
+.light #speaker-page h1,
+.light #speaker-page h2,
+.light #speaker-page h3 {
+  color: #1a1a2e !important;
+}
+
+.light #speaker-page a {
+  color: #1a56db !important;
+}
+
+.light #speaker-page dl,
+.light #speaker-page dt,
+.light #speaker-page dd {
+  color: rgba(0, 0, 0, 0.65) !important;
+}
+
+/* ── Keynoter placeholder ── */
+.light .prog-keynoter-photo--empty {
+  background: rgba(0, 0, 0, 0.04) !important;
+}
+
+.light .prog-keynoter-placeholder {
+  opacity: 0.2 !important;
+  color: #1a1a2e !important;
+}
+
+/* ── Session detail page ── */
+.light #session-page h1,
+.light #session-page h2,
+.light #session-page h3 {
+  color: #1a1a2e !important;
+}
+
+.light #session-page a {
+  color: #1a56db !important;
+}
+
+/* ── Light footer gradient ── */
+.light footer {
+  background: linear-gradient(135deg, #f4f5f7, #ebedef) !important;
+}
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
index 5923cf4ee..a37ba74b2 100644
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -7,7 +7,7 @@
 }
 
 .prose :is(h1, h2, h3, h4, h5, h6) a:focus {
-  outline: 4px solid #0073e6;
+  outline: 4px solid oklch(0.55 0.18 250.4); /* #0073e6 */
   outline-offset: 5px;
 }
 
diff --git a/src/styles/search.css b/src/styles/search.css
index 11c59e733..846d7365a 100644
--- a/src/styles/search.css
+++ b/src/styles/search.css
@@ -10,44 +10,52 @@
 }
 
 .pagefind-ui__search-input {
-  border: 1px solid #ccc;
+  border: 1px solid oklch(0.8 0 0); /* #ccc */
   border-radius: 20px;
   padding-inline-start: 0.75rem;
   padding-inline-end: 0.5rem;
-  background-color: #fff;
+  background-color: var(--color-white);
   font-size: 16px;
-  color: #000000;
+  color: var(--color-black);
 }
 
 .pagefind-ui__result.selected {
-  background-color: #f8f8f8;
-  background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
+  background-color: oklch(0.973 0 0); /* #f8f8f8 */
+  background-image: linear-gradient(
+    to right,
+    oklch(0.57 0.105 245.8) 7px,
+    transparent 5px
+  ); /* #3684b6 */
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
 .pagefind-ui__result:hover {
-  background-color: #f8f8f8;
+  background-color: oklch(0.973 0 0); /* #f8f8f8 */
 }
 .pagefind-ui__message {
   margin: 1em;
 }
 .pagefind-ui__result mark {
-  background: #f9eb5d;
-  background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
+  background: oklch(0.916 0.16 100.6); /* #f9eb5d */
+  background-image: linear-gradient(
+    to right,
+    oklch(0.916 0.16 100.6) 10%,
+    oklch(0.958 0.082 98.3) 100%
+  ); /* #f9eb5d -> #fcf4a7 */
   margin: 4px;
   padding-right: 6px;
   padding-left: 6px;
   padding-top: 2px;
   padding-bottom: 2px;
-  color: #000000;
+  color: var(--color-black);
   font-family: monospace;
   border-radius: 4px;
 }
 .pagefind-ui {
   --pagefind-ui-scale: 1;
-  --pagefind-ui-primary: #141f36;
-  --pagefind-ui-text: black;
-  --pagefind-ui-border: #d8d8d8;
+  --pagefind-ui-primary: oklch(0.25 0.04 266.3); /* #141f36 */
+  --pagefind-ui-text: var(--color-black);
+  --pagefind-ui-border: oklch(0.873 0 0); /* #d8d8d8 */
   --pagefind-ui-border-width: 2px;
   --pagefind-ui-border-radius: 0.5rem;
 }
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 1368231c2..68c6933eb 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,161 +1,359 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
-@layer base {
-  :root {
-    --color-red: #d4003a;
-    --color-red-on-dark: #ff1a4a;
-    --color-indigo: #4a0018;
-    --color-magenta: #800020;
-    --color-accent: #f0c040;
-    --color-cream: #fff5f0;
-    --color-white: #ffffff;
-
-    --accent-rgb: 240, 192, 64;
-
-    --text-primary: rgba(255, 255, 255, 0.93);
-    --text-secondary: rgba(255, 255, 255, 0.78);
-    --text-muted: rgba(255, 255, 255, 0.7);
-    --text-faint: rgba(255, 255, 255, 0.6);
-
-    --border: rgba(255, 255, 255, 0.1);
-    --border-strong: rgba(255, 255, 255, 0.15);
-    --border-bright: rgba(255, 255, 255, 0.25);
-    --surface-faint: rgba(255, 255, 255, 0.03);
-    --surface-subtle: rgba(255, 255, 255, 0.05);
-    --surface-medium: rgba(255, 255, 255, 0.08);
-
-    --black-75: rgba(0, 0, 0, 0.75);
-    --black-70: rgba(0, 0, 0, 0.7);
-    --black-50: rgba(0, 0, 0, 0.5);
-    --black-40: rgba(0, 0, 0, 0.4);
-    --black-30: rgba(0, 0, 0, 0.3);
-    --black-15: rgba(0, 0, 0, 0.15);
-
-    --cta-red: #d62020;
-    --cta-red-dark: #8a0020;
-    --cta-mid: #a8002d;
-    --cta-end: #700020;
-
-    --bg-section: #080f1a;
-    --bg-section-alt: #070b14;
-    --bg-dark: #0a0a1a;
-
-    --overlay-dark: rgba(10, 10, 20, 0.95);
-  }
-}
+/* ============================================================
+   EP2026 COLOR SYSTEM — single source of truth (oklch)
+   ------------------------------------------------------------
+   Tokens are organised by ROLE, not by appearance, so that the
+   same token flips correctly between the dark (default) and the
+   light theme. Brand colours are theme-constant and live in the
+   @theme block below; the role tokens that change per theme live
+   in the :root (dark) / .light blocks further down.
+
+   All colours are expressed in oklch(L C H [/ alpha]).
+   The original hex/rgba values are kept in comments for ref.
+   ============================================================ */
 
 @theme {
-  /* Base Colors */
-  --color-black: #000;
-  --color-white: #fff;
+  /* ---------- Primitives ---------- */
+  --color-black: oklch(0 0 0); /* #000 */
+  --color-white: oklch(1 0 0); /* #fff */
   --color-transparent: transparent;
   --color-current: currentColor;
   --color-inherit: inherit;
 
-  /* Text Colors */
-  --color-text: rgba(255, 255, 255, 0.9);
-  --color-text-inverted: #fdfdfd;
-
-  /* Body Colors */
-  --color-body-background: #070b14;
-  --color-body-inverted: #001c13;
-  --color-body-light: #888;
-
-  /* Primary Colors */
-  --color-primary: #151f38;
-  --color-primary-hover: #7a7ebd;
-  --color-primary-active: #7a7ebd;
-
-  /* Button Colors */
-  --color-button: #f0c040;
-  --color-button-hover: #d4a830;
-  --color-button-active: #514689;
-  --color-button-focus: #9c4222;
-  --color-button-disabled: #b7b2c7;
-  --color-button-text: #080f1a;
-
-  /* Secondary Colors */
-  --color-secondary: #151f38;
-  --color-secondary-dark: #f5e5d6;
-  --color-secondary-darkest: #ffffff;
-  --color-secondary-light: #7a7ebd;
-
-  /* Section Colors */
-  --color-euroscipy: #2e2ed4;
-  --color-section-bg: #080f1a;
-  --color-section-bg-alt: #070b14;
-  --color-bg-dark: #0a0a1a;
-  --color-cta-red: #d62020;
-  --color-green-2e: #2ecc71;
-  --color-green-25: #25a85d;
-
-  /* Text Variants for dark sections */
-  --color-text-primary-dark: rgba(255, 255, 255, 0.93);
-  --color-text-secondary-dark: rgba(255, 255, 255, 0.78);
-  --color-text-muted-dark: rgba(255, 255, 255, 0.7);
-  --color-text-faint-dark: rgba(255, 255, 255, 0.6);
-  --color-surface-medium: rgba(255, 255, 255, 0.08);
-  --color-surface-subtle: rgba(255, 255, 255, 0.05);
-  --color-border-dark: rgba(255, 255, 255, 0.1);
-  --color-border-bright: rgba(255, 255, 255, 0.25);
-  --color-black-30: rgba(0, 0, 0, 0.3);
-  --color-accent: #f0c040;
-  --color-cream: #fff5f0;
-
-  /* Hero Colors */
-  --color-hero-primary: #151f38;
-  --color-hero-secondary: #fabc1b;
-
-  /* Session Levels */
-  --color-session-neutral: #f5e5d6;
-  --color-session-beginner: #63d452;
-  --color-session-intermediate: #ffcd45;
-  --color-session-advanced: #d34847;
-
-  /* Sponsor Tiers */
-  --color-sponsor-keystone: #5c9f92;
-  --color-sponsor-diamond: #568497;
-  --color-sponsor-platinum: #6b6c6e;
-  --color-sponsor-gold: #f5c251;
-  --color-sponsor-silver: #c0c0c0;
-  --color-sponsor-startup: #8572c6;
-  --color-sponsor-bronze: #6e6151;
-  --color-sponsor-patron: #a11217;
-
-  --color-top-notification: #ee714b;
-
-  /* Footer Colors */
-  --color-footer-bg: #0a0003;
-  --color-footer-gray: #222222;
-  --color-footer-accent: #f0c040;
-  --color-footer-red: #d4003a;
-  --color-footer-red-on-dark: #ff1a4a;
-  --color-footer-text-muted: rgba(255, 255, 255, 0.7);
-  --color-footer-text-secondary: rgba(255, 255, 255, 0.78);
-
-  /* Section-specific colors */
-  --color-pyladies: #d42027;
-  --color-pyladies-dark: #b01a20;
-  --color-ep25-bg: #0b1b4d;
-  --color-ep25-yellow: #ffd43b;
-  --color-ep25-yellow-dark: #dbb52e;
-
-  /* Aspect Ratios */
+  /* ---------- Brand (theme-constant) ---------- */
+  --color-accent: oklch(0.831 0.142 84.4); /* #f0c040 */
+  --color-accent-hover: oklch(0.755 0.137 78.9); /* #d4a830 */
+  --color-accent-rgb: 240, 192, 64;
+  --color-cream: oklch(0.971 0.014 39.4); /* #fff5f0 */
+
+  --color-red: oklch(0.553 0.224 11.6); /* #d4003a */
+  --color-red-on-dark: oklch(0.636 0.244 13.4); /* #ff1a4a */
+  --color-indigo: oklch(0.276 0.13 7.5); /* #4a0018 */
+  --color-magenta: oklch(0.371 0.166 11.3); /* #800020 */
+
+  /* CTA gradient (theme-constant red) */
+  --color-cta-red: oklch(0.567 0.214 25.9); /* #d62020 */
+  --color-cta-red-dark: oklch(0.394 0.166 16.4); /* #8a0020 */
+  --color-cta-mid: oklch(0.448 0.193 13.6); /* #a8002d */
+  --color-cta-end: oklch(0.342 0.149 14.9); /* #700020 */
+
+  /* Brand accents / status */
+  --color-blue: oklch(0.522 0.218 264.4); /* #1a56db */
+  --color-green-2e: oklch(0.768 0.176 153.6); /* #2ecc71 */
+  --color-green-25: oklch(0.66 0.158 154.6); /* #25a85d */
+  --color-euroscipy: oklch(0.45 0.27 268.7); /* #2e2ed4 */
+  --color-top-notification: oklch(0.708 0.165 41.1); /* #ee714b */
+
+  /* ---------- Hero ---------- */
+  --color-hero-primary: oklch(0.27 0.06 268.8); /* #151f38 */
+  --color-hero-secondary: oklch(0.81 0.156 76.9); /* #fabc1b */
+
+  /* ---------- Session levels (theme-constant) ---------- */
+  --color-session-neutral: oklch(0.927 0.022 56.4); /* #f5e5d6 */
+  --color-session-beginner: oklch(0.79 0.211 145.4); /* #63d452 */
+  --color-session-intermediate: oklch(0.853 0.149 86.6); /* #ffcd45 */
+  --color-session-advanced: oklch(0.616 0.198 22.6); /* #d34847 */
+
+  /* ---------- Sponsor tiers (theme-constant) ---------- */
+  --color-sponsor-keystone: oklch(0.652 0.066 173.6); /* #5c9f92 */
+  --color-sponsor-diamond: oklch(0.624 0.069 230.9); /* #568497 */
+  --color-sponsor-platinum: oklch(0.508 0.003 247.9); /* #6b6c6e */
+  --color-sponsor-gold: oklch(0.821 0.139 82.5); /* #f5c251 */
+  --color-sponsor-silver: oklch(0.806 0 0); /* #c0c0c0 */
+  --color-sponsor-startup: oklch(0.598 0.144 298.3); /* #8572c6 */
+  --color-sponsor-bronze: oklch(0.475 0.03 67.1); /* #6e6151 */
+  --color-sponsor-patron: oklch(0.452 0.179 22.6); /* #a11217 */
+
+  /* ---------- Section-specific brand colours ---------- */
+  --color-pyladies: oklch(0.55 0.213 22.4); /* #d42027 */
+  --color-pyladies-dark: oklch(0.49 0.19 22.7); /* #b01a20 */
+  --color-ep25-bg: oklch(0.296 0.119 266.9); /* #0b1b4d */
+  --color-ep25-yellow: oklch(0.879 0.166 90.8); /* #ffd43b */
+  --color-ep25-yellow-dark: oklch(0.77 0.142 90.3); /* #dbb52e */
+
+  /* ---------- Footer brand ---------- */
+  --color-footer-red: oklch(0.553 0.224 11.6); /* #d4003a */
+  --color-footer-red-on-dark: oklch(0.636 0.244 13.4); /* #ff1a4a */
+  --color-footer-gray: oklch(0.279 0 0); /* #222 */
+
+  /* ---------- Aspect ratios ---------- */
   --aspect-hero: 2.4380530973;
 
-  /* Font Families */
+  /* ---------- Fonts ---------- */
   --font-system: system-ui, sans-serif;
   --font-heading: "Roboto", sans-serif;
   --font-body: "Roboto", system-ui, sans-serif;
   --font-display: var(--font-heading);
-
   --font-title:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
     sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --font-sans:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
     sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+  /* ============================================================
+     ROLE TOKENS — default (DARK) values.
+     These are re-declared inside @theme so Tailwind generates the
+     utility classes (bg-surface, text-muted, border-default, …).
+     Their *runtime* values are overridden by :root / .light below.
+     ============================================================ */
+
+  /* Surfaces / backgrounds */
+  --color-bg: oklch(0.16 0.02 265); /* #070b14 base body */
+  --color-bg-elevated: oklch(0.2 0.03 265);
+  --color-section-bg: oklch(0.17 0.024 264.4); /* #080f1a */
+  --color-section-bg-alt: oklch(0.16 0.02 265.5); /* #070b14 */
+  --color-bg-dark: oklch(0.16 0.03 286.4); /* #0a0a1a */
+  --color-universe-bg: oklch(0.16 0.04 264.6); /* #0b1121 starfield */
+  --color-card: oklch(0.18 0.02 277); /* #141720 elevated card */
+  --color-panel-light: oklch(0.96 0.012 213.4); /* #e8f4f8 light info panel */
+  --color-nav-level: oklch(0.26 0.06 266.4); /* #1c294b nav submenu */
+  --color-surface-faint: oklch(1 0 0 / 0.03);
+  --color-surface-subtle: oklch(1 0 0 / 0.05);
+  --color-surface-medium: oklch(1 0 0 / 0.08);
+
+  /* Text */
+  --color-text: oklch(1 0 0 / 0.9);
+  --color-text-primary: oklch(1 0 0 / 0.93);
+  --color-text-secondary: oklch(1 0 0 / 0.78);
+  --color-text-muted: oklch(1 0 0 / 0.7);
+  --color-text-faint: oklch(1 0 0 / 0.6);
+  --color-text-inverted: oklch(0.991 0 0); /* #fdfdfd */
+
+  /* Borders */
+  --color-border: oklch(1 0 0 / 0.1);
+  --color-border-strong: oklch(1 0 0 / 0.15);
+  --color-border-bright: oklch(1 0 0 / 0.25);
+
+  /* Shadow scrims (black alpha) */
+  --color-scrim-15: oklch(0 0 0 / 0.15);
+  --color-scrim-30: oklch(0 0 0 / 0.3);
+  --color-scrim-40: oklch(0 0 0 / 0.4);
+  --color-scrim-50: oklch(0 0 0 / 0.5);
+  --color-scrim-70: oklch(0 0 0 / 0.7);
+  --color-scrim-75: oklch(0 0 0 / 0.75);
+
+  /* Overlay */
+  --color-overlay-dark: oklch(0.15 0.02 286 / 0.95);
+
+  /* Primary / secondary (UI accents) */
+  --color-primary: oklch(0.27 0.06 268.8); /* #151f38 */
+  --color-primary-hover: oklch(0.62 0.075 290.7); /* #7a7ebd */
+  --color-primary-active: oklch(0.62 0.075 290.7);
+  --color-secondary: oklch(0.27 0.06 268.8); /* #151f38 */
+  --color-secondary-light: oklch(0.62 0.075 290.7); /* #7a7ebd */
+
+  /* Buttons */
+  --color-button: oklch(0.831 0.142 84.4); /* accent */
+  --color-button-hover: oklch(0.755 0.137 78.9);
+  --color-button-text: oklch(0.17 0.024 264.4); /* dark navy on accent */
+  --color-button-disabled: oklch(0.76 0.025 295.6); /* #b7b2c7 */
+
+  /* Theme-aware accent for headings/CTAs: amber on dark, blue on
+     light (amber fails contrast on light surfaces). Pair with
+     --color-on-accent for text placed on top of it. */
+  --color-accent-themed: oklch(0.831 0.142 84.4); /* accent */
+  --color-on-accent: oklch(0.17 0.024 264.4); /* dark text on amber */
+
+  /* Body helpers */
+  --color-body-background: var(--color-bg);
+  --color-body-light: oklch(0.6 0 0); /* #888 */
+
+  /* Footer */
+  --color-footer-bg: oklch(0.13 0.024 18.8); /* #0a0003 */
+  --color-footer-accent: var(--color-accent);
+  --color-footer-text-muted: var(--color-text-muted);
+  --color-footer-text-secondary: var(--color-text-secondary);
+}
+
+/* ============================================================
+   THEME RUNTIME VALUES
+   ============================================================ */
+
+/* DARK (default) — these match the @theme defaults above but are
+   declared on :root so .light can cleanly override them. */
+:root {
+  color-scheme: dark;
+
+  --color-bg: oklch(0.16 0.02 265);
+  --color-bg-elevated: oklch(0.2 0.03 265);
+  --color-section-bg: oklch(0.17 0.024 264.4);
+  --color-section-bg-alt: oklch(0.16 0.02 265.5);
+  --color-bg-dark: oklch(0.16 0.03 286.4);
+  --color-surface-faint: oklch(1 0 0 / 0.03);
+  --color-surface-subtle: oklch(1 0 0 / 0.05);
+  --color-surface-medium: oklch(1 0 0 / 0.08);
+
+  --color-text: oklch(1 0 0 / 0.9);
+  --color-text-primary: oklch(1 0 0 / 0.93);
+  --color-text-secondary: oklch(1 0 0 / 0.78);
+  --color-text-muted: oklch(1 0 0 / 0.7);
+  --color-text-faint: oklch(1 0 0 / 0.6);
+
+  --color-border: oklch(1 0 0 / 0.1);
+  --color-border-strong: oklch(1 0 0 / 0.15);
+  --color-border-bright: oklch(1 0 0 / 0.25);
+
+  --color-primary: oklch(0.27 0.06 268.8);
+  --color-primary-hover: oklch(0.62 0.075 290.7);
+
+  --color-button: oklch(0.831 0.142 84.4);
+  --color-button-hover: oklch(0.755 0.137 78.9);
+  --color-button-text: oklch(0.17 0.024 264.4);
+
+  --color-accent-themed: oklch(0.831 0.142 84.4); /* amber */
+  --color-on-accent: oklch(0.17 0.024 264.4);
+
+  --color-footer-bg: oklch(0.13 0.024 18.8);
+
+  /* Status callouts (Note.astro) — dark theme: faint tint bg + light
+     coloured text + medium border. */
+  --note-info-bg: oklch(0.62 0.19 250 / 0.12);
+  --note-info-text: oklch(0.8 0.11 245);
+  --note-info-border: oklch(0.62 0.19 250 / 0.45);
+  --note-success-bg: oklch(0.72 0.18 150 / 0.12);
+  --note-success-text: oklch(0.82 0.15 150);
+  --note-success-border: oklch(0.72 0.18 150 / 0.45);
+  --note-warning-bg: oklch(0.82 0.14 85 / 0.12);
+  --note-warning-text: oklch(0.86 0.13 88);
+  --note-warning-border: oklch(0.82 0.14 85 / 0.45);
+  --note-error-bg: oklch(0.62 0.21 25 / 0.12);
+  --note-error-text: oklch(0.74 0.16 22);
+  --note-error-border: oklch(0.62 0.21 25 / 0.45);
+}
+
+/* LIGHT — improved, consistent neutral scheme.
+   Only role tokens change; brand colours stay constant.
+   Surfaces are warm-neutral greys; text is dark navy; the primary
+   action colour shifts from amber to brand blue for AA contrast on
+   light backgrounds. */
+.light {
+  color-scheme: light;
+
+  /* Surfaces */
+  --color-bg: oklch(0.985 0.002 264); /* near-white #f7f8fa */
+  --color-bg-elevated: oklch(1 0 0); /* #ffffff cards */
+  --color-section-bg: oklch(0.97 0.003 264); /* #f0f1f4 */
+  --color-section-bg-alt: oklch(0.945 0.004 264); /* #e6e8ed */
+  --color-bg-dark: oklch(1 0 0);
+  --color-surface-faint: oklch(0 0 0 / 0.02);
+  --color-surface-subtle: oklch(0 0 0 / 0.03);
+  --color-surface-medium: oklch(0 0 0 / 0.06);
+
+  /* Text — dark navy ink */
+  --color-text: oklch(0.23 0.04 277); /* #1a1a2e */
+  --color-text-primary: oklch(0 0 0 / 0.87);
+  --color-text-secondary: oklch(0 0 0 / 0.65);
+  --color-text-muted: oklch(0 0 0 / 0.55);
+  --color-text-faint: oklch(0 0 0 / 0.4);
+
+  /* Borders */
+  --color-border: oklch(0 0 0 / 0.1);
+  --color-border-strong: oklch(0 0 0 / 0.15);
+  --color-border-bright: oklch(0 0 0 / 0.22);
+
+  /* UI accents */
+  --color-primary: oklch(0.23 0.04 277);
+  --color-primary-hover: oklch(0.32 0.05 282);
+
+  /* Action colour shifts to brand blue for contrast on light */
+  --color-button: oklch(0.522 0.218 264.4); /* brand blue */
+  --color-button-hover: oklch(0.47 0.2 264.4);
+  --color-button-text: oklch(1 0 0);
+
+  /* Heading/CTA accent → brand blue on light (amber is unreadable) */
+  --color-accent-themed: oklch(0.522 0.218 264.4); /* brand blue */
+  --color-on-accent: oklch(1 0 0); /* white text on blue */
+
+  /* Footer matches section surface in light */
+  --color-footer-bg: oklch(0.97 0.003 264);
+  --color-footer-text-muted: oklch(0 0 0 / 0.55);
+  --color-footer-text-secondary: oklch(0 0 0 / 0.65);
+
+  /* Elevated surfaces flip to white in light */
+  --color-card: oklch(1 0 0);
+  --color-panel-light: oklch(1 0 0);
+  --color-nav-level: oklch(0.97 0.003 264);
+}
+
+/* ============================================================
+   LEGACY ALIASES — keep older class-based CSS (ep2026-theme.css,
+   the old --ep-* palette, and previous --color-*-dark names)
+   working by pointing them at the new semantic tokens. These will
+   flip automatically with the theme. Prefer the semantic tokens in
+   new code.
+   ============================================================ */
+:root,
+.light {
+  /* --ep-* palette (used by ep2026-theme.css class selectors) */
+  --ep-bg: var(--color-bg);
+  --ep-white: var(--color-text); /* was used as foreground colour */
+  --ep-accent: var(--color-accent);
+  --ep-cream: var(--color-cream);
+  --ep-red: var(--color-red);
+  --ep-red-on-dark: var(--color-red-on-dark);
+  --ep-indigo: var(--color-indigo);
+  --ep-magenta: var(--color-magenta);
+  --ep-accent-rgb: var(--color-accent-rgb);
+
+  --ep-text-primary: var(--color-text-primary);
+  --ep-text-secondary: var(--color-text-secondary);
+  --ep-text-muted: var(--color-text-muted);
+  --ep-text-faint: var(--color-text-faint);
+
+  --ep-border: var(--color-border);
+  --ep-border-strong: var(--color-border-strong);
+  --ep-border-bright: var(--color-border-bright);
+  --ep-surface-faint: var(--color-surface-faint);
+  --ep-surface-subtle: var(--color-surface-subtle);
+  --ep-surface-medium: var(--color-surface-medium);
+
+  --ep-black-75: var(--color-scrim-75);
+  --ep-black-70: var(--color-scrim-70);
+  --ep-black-50: var(--color-scrim-50);
+  --ep-black-40: var(--color-scrim-40);
+  --ep-black-30: var(--color-scrim-30);
+  --ep-black-15: var(--color-scrim-15);
+
+  --ep-cta-red: var(--color-cta-red);
+  --ep-cta-red-dark: var(--color-cta-red-dark);
+  --ep-cta-mid: var(--color-cta-mid);
+  --ep-cta-end: var(--color-cta-end);
+
+  --ep-bg-section: var(--color-section-bg);
+  --ep-bg-section-alt: var(--color-section-bg-alt);
+  --ep-bg-dark: var(--color-bg-dark);
+  --ep-overlay-dark: var(--color-overlay-dark);
+
+  --ep-green-2e: var(--color-green-2e);
+  --ep-green-25: var(--color-green-25);
+  --ep-link-color: var(--color-accent);
+  --ep-link-hover: var(--color-text);
+
+  /* Previous duplicate :root tokens / -dark suffixed names */
+  --text-primary: var(--color-text-primary);
+  --text-secondary: var(--color-text-secondary);
+  --text-muted: var(--color-text-muted);
+  --text-faint: var(--color-text-faint);
+  --border: var(--color-border);
+  --border-strong: var(--color-border-strong);
+  --border-bright: var(--color-border-bright);
+  --accent-rgb: var(--color-accent-rgb);
+
+  --color-text-primary-dark: var(--color-text-primary);
+  --color-text-secondary-dark: var(--color-text-secondary);
+  --color-text-muted-dark: var(--color-text-muted);
+  --color-text-faint-dark: var(--color-text-faint);
+  --color-border-dark: var(--color-border);
+  --color-black-30: var(--color-scrim-30);
+
+  --color-secondary-dark: var(--color-session-neutral);
+  --color-secondary-darkest: var(--color-text);
+  --color-button-active: oklch(0.45 0.09 290.7); /* #514689 */
+  --color-button-focus: oklch(0.5 0.13 41.1); /* #9c4222 */
+  --color-body-inverted: oklch(0.23 0.06 167.6); /* #001c13 */
 }
 
 /* Customize typography plugin */