refactor(theme): 全站硬编码颜色统一为主题变量体系 → 9文件190+处修复： Footer背景/hover用brand-black/brand + News/Investors/Sustainability光晕改brand-accent/sus-*-soft + About蒙层/NotFound border/Contact L38+L104+L243改color-mix派生 + Home HERO渐变/Banner蒙层/CTA文字改color-mix + Header阴影/背景改accent/brand-white color-mix

src/components/About.tsx

@@ -68,7 +68,7 @@ export default function About({ locale }: { locale: Locale }) {
       {/* ===== 全宽大图横幅（连接用户与生活） ===== */}
       <section className="relative w-full h-[360px] md:h-[520px] scroll-reveal overflow-hidden">
         <img src="/connect-life.jpg" alt="" className="w-full h-full object-cover" />
-        <div className="pointer-events-none absolute inset-0 bg-[rgba(26,26,26,0.28)]" />
+        <div className="pointer-events-none absolute inset-0 bg-[color-mix(in_oklch,var(--accent)_28%,transparent)]" />
         <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
           <h2 className="text-h1 md:text-h1 font-semibold text-white tracking-tight drop-shadow-sm">{a.banner.text}</h2>
           <p className="mt-3 text-body md:text-body text-white/85 drop-shadow-sm">{a.banner.sub}</p>

src/components/Contact.tsx

@@ -35,13 +35,13 @@ export default function Contact({ locale }: { locale: Locale }) {
       {/* ===== 高亮 Callout：在巴适伙伴，你不只是员工（单独拉出）===== */}
       <section className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pb-[var(--space-8)]">
         <div className="scroll-reveal cta-band px-8 py-12 md:py-14 text-center">
-          <span className="relative z-10 inline-block text-micro font-semibold tracking-[0.15em] uppercase text-[rgba(235,234,246,0.7)]" style={{ fontFamily: 'var(--font-body)' }}>
+          <span className="relative z-10 inline-block text-micro font-semibold tracking-[0.15em] uppercase text-[color-mix(in_oklch,var(--brand)_70%,transparent)]" style={{ fontFamily: 'var(--font-body)' }}>
             {j.manifestoCallout.eyebrow}
           </span>
           <h2 className="relative z-10 mt-3 text-h1 font-bold font-[var(--font-display)] text-white leading-tight">
             {j.manifestoCallout.title}
           </h2>
-          <p className="relative z-10 mt-4 text-body md:text-body text-[rgba(255,255,255,0.85)] max-w-2xl mx-auto leading-relaxed">
+          <p className="relative z-10 mt-4 text-body md:text-body text-[color-mix(in_oklch,var(--brand-white)_85%,transparent)] max-w-2xl mx-auto leading-relaxed">
             {j.manifestoCallout.body}
           </p>
         </div>
@@ -101,7 +101,7 @@ export default function Contact({ locale }: { locale: Locale }) {
           {j.growthIncentive.items.map((item: string, index: number) => {
             const color = 'var(--brand-accent)';
             return (
-              <div key={index} className="scroll-reveal flex items-start gap-3 rounded-2xl card-surface p-5 hover:border-[rgba(235,234,246,0.25)] hover:shadow-sm transition-all duration-300">
+              <div key={index} className="scroll-reveal flex items-start gap-3 rounded-2xl card-surface p-5 hover:border-[color-mix(in_oklch,var(--brand)_25%,transparent)] hover:shadow-sm transition-all duration-300">
                 <span className="icon-tile w-9 h-9" style={cssVars({ '--track-color': color })}>
                   <Icon name={growthIncentiveIcons[index]} className="w-5 h-5" />
                 </span>
@@ -206,8 +206,8 @@ export default function Contact({ locale }: { locale: Locale }) {
                 <p className="text-body leading-[1.7] text-[var(--text-secondary)] mb-6">{c.biz.desc}</p>
                 <div className="mt-auto space-y-4">
                   <a href={'mailto:' + c.biz.email} className="btn btn-primary w-full">
-                    {c.biz.cta}
                     <Icon name="mail" className="w-4 h-4" />
+                    {c.biz.cta}
                   </a>
                   <div className="flex items-center gap-2 rounded-xl border border-[var(--border-light)] bg-[var(--bg-primary)] px-3 py-2.5">
                     <span className="text-body font-semibold tracking-[0.06em] uppercase text-[var(--text-muted)] mr-1 whitespace-nowrap" style={{ fontFamily: 'var(--font-body)' }}>{c.biz.emailLabel}</span>
@@ -240,7 +240,7 @@ export default function Contact({ locale }: { locale: Locale }) {
             loading="lazy"
             decoding="async"
           />
-          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-[rgba(12,12,18,0.45)] via-transparent to-transparent" />
+          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-[color-mix(in_oklch,var(--accent)_32%,transparent)] via-transparent to-transparent" />
         </div>
         <p className="mt-4 text-center text-body text-[var(--text-muted)]">
           {locale === 'en' ? 'We are in Jing\'an, Shanghai — come say hi' : '我们在上海静安，等你来坐坐'}

src/components/Footer.tsx

@@ -15,7 +15,7 @@ export default function Footer({ locale }: { locale: Locale }) {
     locale === 'en' ? en : locale === 'hk' ? hk : zh;
 
   return (
-    <footer className="bg-[#0E0E0E] border-t border-[rgba(255,255,255,0.1)]">
+    <footer className="bg-[var(--brand-black)] border-t border-[color-mix(in_oklch,var(--brand-white)_10%,transparent)]">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
         {/* Main Footer Grid */}
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12 mb-10 md:mb-14">
@@ -27,25 +27,25 @@ export default function Footer({ locale }: { locale: Locale }) {
                 alt="BaskBuddy"
                 className="w-12 h-12 object-contain rounded-xl bg-white"
               />
-              <span className="font-semibold text-body text-[#EBEAF6]" style={{ fontFamily: 'var(--font-body)' }}>
+              <span className="font-semibold text-body text-[var(--brand)]" style={{ fontFamily: 'var(--font-body)' }}>
                 {brandName}
               </span>
             </div>
-            <p className="text-body leading-relaxed mb-4 text-[rgba(255,255,255,0.6)]">
+            <p className="text-body leading-relaxed mb-4 text-[color-mix(in_oklch,var(--brand-white)_60%,transparent)]">
               {zhText(
                 '以温暖科技，连接美好生活。五大赛道全面覆盖数字生活服务生态。',
                 '以溫暖科技，連接美好生活。五大賽道全面覆蓋數位生活服務生態。',
                 'Connecting beautiful life with warm tech. Five tracks covering the digital life service ecosystem.',
               )}
             </p>
-            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-micro font-semibold tracking-[0.06em] uppercase bg-[rgba(235,234,246,0.12)] text-[rgba(235,234,246,0.92)] border border-[rgba(235,234,246,0.22)]" style={{ fontFamily: 'var(--font-body)' }}>
+            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-micro font-semibold tracking-[0.06em] uppercase bg-[color-mix(in_oklch,var(--brand)_12%,transparent)] text-[color-mix(in_oklch,var(--brand)_92%,transparent)] border border-[color-mix(in_oklch,var(--brand)_22%,transparent)]" style={{ fontFamily: 'var(--font-body)' }}>
               I·C·I·D·P
             </div>
           </div>
 
           {/* Column 2: Quick Links */}
           <div>
-            <h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[rgba(255,255,255,0.5)]" style={{ fontFamily: 'var(--font-body)' }}>
+            <h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)]" style={{ fontFamily: 'var(--font-body)' }}>
               {zhText('快速导航', '快速導航', 'QUICK LINKS')}
             </h4>
             <div className="flex flex-col gap-3.5 leading-relaxed">
@@ -53,7 +53,7 @@ export default function Footer({ locale }: { locale: Locale }) {
                 <a
                   key={key}
                   href={getLocalizedPath(`/${key === 'home' ? '' : key}`, locale)}
-                  className="inline-flex items-center text-body transition-colors duration-200 text-[rgba(255,255,255,0.65)] hover:text-[#EBEAF6]"
+                  className="inline-flex items-center text-body transition-colors duration-200 text-[color-mix(in_oklch,var(--brand-white)_65%,transparent)] hover:text-[var(--brand)]"
                 >
                   {label}
                 </a>
@@ -63,12 +63,12 @@ export default function Footer({ locale }: { locale: Locale }) {
 
           {/* Column 3: Tracks */}
           <div>
-            <h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[rgba(255,255,255,0.5)]" style={{ fontFamily: 'var(--font-body)' }}>
+            <h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)]" style={{ fontFamily: 'var(--font-body)' }}>
               {zhText('业务赛道', '業務賽道', 'BUSINESS TRACKS')}
             </h4>
             <div className="flex flex-col gap-3.5 leading-relaxed">
               {Object.entries(t.home.tracks).map(([key, track]) => (
-                <a key={key} href="/business" className="inline-flex items-center gap-2 text-body transition-colors duration-200 text-[rgba(255,255,255,0.65)] hover:text-[#EBEAF6]">
+                <a key={key} href="/business" className="inline-flex items-center gap-2 text-body transition-colors duration-200 text-[color-mix(in_oklch,var(--brand-white)_65%,transparent)] hover:text-[var(--brand)]">
                   <Icon name={trackIcons[key]} className="w-4 h-4" />
                   {track.name}
                 </a>
@@ -78,19 +78,19 @@ export default function Footer({ locale }: { locale: Locale }) {
 
           {/* Column 4: Contact */}
           <div>
-            <h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[rgba(255,255,255,0.5)]" style={{ fontFamily: 'var(--font-body)' }}>
+            <h4 className="text-micro font-semibold tracking-[0.08em] uppercase mb-4 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)]" style={{ fontFamily: 'var(--font-body)' }}>
               {zhText('联系我们', '聯繫我們', 'CONTACT')}
             </h4>
             <div className="flex flex-col gap-3.5 leading-relaxed">
-              <a href="/contact" className="text-body transition-colors duration-200 text-[rgba(255,255,255,0.65)] hover:text-[#EBEAF6]">
+              <a href="/contact" className="text-body transition-colors duration-200 text-[color-mix(in_oklch,var(--brand-white)_65%,transparent)] hover:text-[var(--brand)]">
                 {zhText('求职咨询', '求職諮詢', 'Job Inquiry')}
               </a>
-              <a href="/contact" className="text-body transition-colors duration-200 text-[rgba(255,255,255,0.65)] hover:text-[#EBEAF6]">
+              <a href="/contact" className="text-body transition-colors duration-200 text-[color-mix(in_oklch,var(--brand-white)_65%,transparent)] hover:text-[var(--brand)]">
                 {zhText('商务合作', '商務合作', 'Business Cooperation')}
               </a>
               <a
                 href="mailto:baskbuddy@163.com"
-                className="text-body font-medium transition-all duration-200 hover:underline underline-offset-2 text-[#EBEAF6] hover:text-[#FFFFFF]"
+                className="text-body font-medium transition-all duration-200 hover:underline underline-offset-2 text-[var(--brand)] hover:text-[var(--brand-white)]"
                 style={{ fontFamily: 'var(--font-body)' }}
                 title={zhText('点击发送邮件 (求职)', '點擊發送郵件 (求職)', 'Click to send email (Jobs)')}
               >
@@ -98,13 +98,13 @@ export default function Footer({ locale }: { locale: Locale }) {
               </a>
               <a
                 href="mailto:baskbuddy@163.com"
-                className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[rgba(255,255,255,0.5)] hover:text-[rgba(255,255,255,0.85)]"
+                className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)] hover:text-[color-mix(in_oklch,var(--brand-white)_85%,transparent)]"
                 style={{ fontFamily: 'var(--font-body)' }}
                 title={zhText('点击发送邮件 (商务)', '點擊發送郵件 (商務)', 'Click to send email (Business)')}
               >
                 baskbuddy@163.com
               </a>
-              <p className="flex items-start gap-1 text-micro text-[rgba(255,255,255,0.5)]" title={zhText('巴适伙伴（上海）科技有限公司 办公地址', '巴適夥伴（上海）科技有限公司 辦公地址', 'BaskBuddy (Shanghai) Office')}>
+              <p className="flex items-start gap-1 text-micro text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)]" title={zhText('巴适伙伴（上海）科技有限公司 办公地址', '巴適夥伴（上海）科技有限公司 辦公地址', 'BaskBuddy (Shanghai) Office')}>
                 <Icon name="mapPin" className="w-3.5 h-3.5 shrink-0 mt-0.5" />
                 <span>{zhText('中国 · 上海市静安区康宁路288弄2号410室', '中國 · 上海市靜安區康寧路288弄2號410室', "Room 410, No.2, Lane 288, Kangning Rd, Jing'an District, Shanghai, China")}</span>
               </p>
@@ -113,9 +113,9 @@ export default function Footer({ locale }: { locale: Locale }) {
         </div>
 
         {/* Bottom Bar */}
-        <div className="border-t border-[rgba(255,255,255,0.1)] pt-6 flex flex-col md:flex-row items-center justify-between gap-5">
+        <div className="border-t border-[color-mix(in_oklch,var(--brand-white)_10%,transparent)] pt-6 flex flex-col md:flex-row items-center justify-between gap-5">
           <div className="flex flex-col md:flex-row items-center gap-3 md:gap-4 text-center md:text-left">
-            <p className="text-micro text-[rgba(255,255,255,0.5)]">
+            <p className="text-micro text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)]">
               {zhText(
                 `© 2026 巴适伙伴（上海）科技有限公司. 保留所有权利`,
                 `© 2026 巴適夥伴（上海）科技有限公司. 保留所有權利`,
@@ -126,7 +126,7 @@ export default function Footer({ locale }: { locale: Locale }) {
               href="https://beian.miit.gov.cn/"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[rgba(255,255,255,0.5)] hover:text-[#EBEAF6]"
+              className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)] hover:text-[var(--brand)]"
               title={zhText('工信部ICP/IP地址/域名信息备案管理系统', '工信部ICP/IP地址/域名信息備案管理系統', 'MIIT ICP Filing Query (China)')}
             >
               {icpNumber}
@@ -135,7 +135,7 @@ export default function Footer({ locale }: { locale: Locale }) {
               href="https://beian.mps.gov.cn/"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[rgba(255,255,255,0.5)] hover:text-[#EBEAF6] inline-flex items-center gap-1"
+              className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)] hover:text-[var(--brand)] inline-flex items-center gap-1"
               title={zhText('全国互联网安全管理服务平台 — 公安备案', '全國互聯網安全管理服務平台 — 公安備案', 'MPS Public Security Internet Filing (China)')}
             >
               <Icon name="shieldCheck" className="w-3.5 h-3.5" />
@@ -145,11 +145,11 @@ export default function Footer({ locale }: { locale: Locale }) {
                 `PSB Filing Code ${psbFilingCode}`,
               )}
             </a>
-            <a href="/privacy" className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[rgba(255,255,255,0.5)] hover:text-[#EBEAF6]">
+            <a href="/privacy" className="text-micro transition-all duration-200 hover:underline underline-offset-2 text-[color-mix(in_oklch,var(--brand-white)_50%,transparent)] hover:text-[var(--brand)]">
               {zhText('隐私政策', '隱私政策', 'Privacy')}
             </a>
           </div>
-          <p className="text-micro font-semibold tracking-wide text-[rgba(255,255,255,0.45)]" style={{ fontFamily: 'var(--font-body)' }} aria-hidden="true">
+          <p className="text-micro font-semibold tracking-wide text-[color-mix(in_oklch,var(--brand-white)_45%,transparent)]" style={{ fontFamily: 'var(--font-body)' }} aria-hidden="true">
             Integrity · Courage · Innovation · Devotion · Passion
           </p>
         </div>

src/components/Header.tsx

@@ -249,7 +249,7 @@ export default function Header({ locale }: { locale: Locale }) {
 
       {/* Mobile Navigation */}
       <div className={`md:hidden ${menuOpen ? 'block' : 'hidden'}`}>
-        <div className="px-4 pb-3 pt-1 bg-[rgba(255,255,255,0.82)] backdrop-blur-xl">
+        <div className="px-4 pb-3 pt-1 bg-[color-mix(in_oklch,var(--brand-white)_82%,transparent)] backdrop-blur-xl">
           <div className="flex flex-col gap-0.5">
           {Object.entries(t.nav).map(([key, label]) => {
             const subnav = getSubnav(key as NavKey);

src/components/Home.tsx

@@ -222,8 +222,11 @@ export default function Home({ locale }: { locale: Locale }) {
       <section
         className="hero-text-visible relative w-full h-[calc(100vh-60px)] min-h-[520px] max-h-[900px] overflow-hidden"
         style={{
-          background:
+          // 由主题变量派生的淡蓝紫渐变：色相严格锚定 --brand-accent 品牌蓝，不再硬编码随机淡蓝紫
-            'linear-gradient(135deg, #f2f5ff 0%, #e8eeff 50%, #eeeaff 100%)', /* 极淡蓝紫，与 hero-bg.jpg 边缘无缝衔接 */
+          background: `linear-gradient(135deg,
+            color-mix(in oklch, var(--brand-accent) 8%, var(--bg-primary)) 0%,
+            color-mix(in oklch, var(--brand-accent) 5%, var(--brand)) 50%,
+            color-mix(in oklch, var(--track-ai) 7%, var(--bg-primary)) 100%)`,
         }}
       >
         {/* 背景图：玻璃球/水滴主题图，原图直接展示，不叠加任何蒙层/粒子/光晕/星芒 */}
@@ -319,13 +322,16 @@ export default function Home({ locale }: { locale: Locale }) {
               loading="lazy"
               decoding="async"
             />
-            {/* 左深右透蒙层：保证左侧白色标题在浅色图上仍清晰 */}
+            {/* 左深右透蒙层：保证左侧白色标题在浅色图上仍清晰（色相锚定 accent+品牌蓝，不硬编码深蓝 #0a0e2a） */}
             <div
               className="absolute inset-0 pointer-events-none"
               aria-hidden="true"
               style={{
-                background:
+                background: `linear-gradient(90deg,
-                  'linear-gradient(90deg, rgba(10, 14, 42, 0.78) 0%, rgba(10, 14, 42, 0.55) 35%, rgba(10, 14, 42, 0.15) 70%, transparent 100%)',
+                  color-mix(in oklch, color-mix(in oklch, var(--accent) 75%, var(--brand-accent-darker) 25%) 78%, transparent) 0%,
+                  color-mix(in oklch, color-mix(in oklch, var(--accent) 75%, var(--brand-accent-darker) 25%) 55%, transparent) 35%,
+                  color-mix(in oklch, color-mix(in oklch, var(--accent) 75%, var(--brand-accent-darker) 25%) 15%, transparent) 70%,
+                  transparent 100%)`,
               }}
             />
             <div className="relative z-10 h-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-center">
@@ -379,7 +385,7 @@ export default function Home({ locale }: { locale: Locale }) {
       <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-[var(--space-10)]">
         <div className="cta-band scroll-reveal px-8 py-14 md:py-16 text-center">
           <h2 className="relative z-10 text-h1 font-bold font-[var(--font-display)] text-white">{t.contact.subtitle}</h2>
-          <p className="relative z-10 mt-3 text-body text-[rgba(255,255,255,0.7)] max-w-xl mx-auto">
+          <p className="relative z-10 mt-3 text-body text-[color-mix(in_oklch,var(--brand-white)_70%,transparent)] max-w-xl mx-auto">
             {tr(
               'Whether for a job inquiry or business cooperation, we look forward to meeting you with warmth.',
               '無論是求職諮詢還是商務合作，我們都期待與你溫暖相遇。',

src/components/Investors.tsx

@@ -15,8 +15,8 @@ export default function Investors({ locale }: { locale: Locale }) {
     <>
       {/* ===== HERO ===== */}
       <section className="relative overflow-hidden bg-[var(--bg-subtle)]">
-        <div className="pointer-events-none absolute -top-24 -right-24 w-[420px] h-[420px] rounded-full bg-[rgba(61,90,254,0.10)] blur-3xl" />
+        <div className="pointer-events-none absolute -top-24 -right-24 w-[420px] h-[420px] rounded-full bg-[color-mix(in_oklch,var(--brand-accent)_10%,transparent)] blur-3xl" />
-        <div className="pointer-events-none absolute -bottom-32 -left-24 w-[360px] h-[360px] rounded-full bg-[rgba(61,90,254,0.08)] blur-3xl" />
+        <div className="pointer-events-none absolute -bottom-32 -left-24 w-[360px] h-[360px] rounded-full bg-[color-mix(in_oklch,var(--brand-accent)_8%,transparent)] blur-3xl" />
         <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28 text-center">
           <span className="section-eyebrow">{ir.stats.eyebrow.replace('BY THE NUMBERS', 'INVESTORS')}</span>
           <h1 className="hero-slogan">{ir.title}</h1>
@@ -177,17 +177,17 @@ export default function Investors({ locale }: { locale: Locale }) {
       {/* ===== IR 垂询 CTA ===== */}
       <section className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pb-[var(--space-11)]">
         <div className="cta-band px-8 py-12 md:py-14 text-center">
-          <span className="relative z-10 inline-block text-micro font-semibold tracking-[0.15em] uppercase text-[rgba(235,234,246,0.7)]" style={{ fontFamily: 'var(--font-body)' }}>
+          <span className="relative z-10 inline-block text-micro font-semibold tracking-[0.15em] uppercase text-[color-mix(in_oklch,var(--brand)_70%,transparent)]" style={{ fontFamily: 'var(--font-body)' }}>
             {ir.contact.eyebrow}
           </span>
           <h2 className="relative z-10 mt-3 text-h1 font-bold font-[var(--font-display)] text-white leading-tight">{ir.contact.title}</h2>
-          <p className="relative z-10 mt-4 text-body text-[rgba(255,255,255,0.85)] max-w-2xl mx-auto leading-relaxed">{ir.contact.desc}</p>
+          <p className="relative z-10 mt-4 text-body text-[color-mix(in_oklch,var(--brand-white)_85%,transparent)] max-w-2xl mx-auto leading-relaxed">{ir.contact.desc}</p>
           <div className="relative z-10 mt-7 flex flex-col sm:flex-row items-center justify-center gap-3.5">
             <a href={'mailto:' + ir.contact.email} className="btn btn-light btn-lg">
               <Icon name="mail" className="w-4 h-4 -ml-0.5 mr-2" />
               {ir.contact.cta}
             </a>
-            <span className="text-micro uppercase tracking-widest text-[rgba(235,234,246,0.55)]">{ir.contact.or}</span>
+            <span className="text-micro uppercase tracking-widest text-[color-mix(in_oklch,var(--brand)_55%,transparent)]">{ir.contact.or}</span>
             <a href={getLocalizedPath('/contact', locale)} className="btn btn-outline-light btn-lg">
               {ir.contact.contactPage}
             </a>

src/components/News.tsx

@@ -9,8 +9,8 @@ export default function News({ locale }: { locale: Locale }) {
     <>
       {/* ===== HERO ===== */}
       <section className="relative overflow-hidden bg-[var(--bg-subtle)]">
-        <div className="pointer-events-none absolute -top-24 -right-24 w-[420px] h-[420px] rounded-full bg-[rgba(61,90,254,0.10)] blur-3xl" />
+        <div className="pointer-events-none absolute -top-24 -right-24 w-[420px] h-[420px] rounded-full bg-[color-mix(in_oklch,var(--brand-accent)_10%,transparent)] blur-3xl" />
-        <div className="pointer-events-none absolute -bottom-32 -left-24 w-[360px] h-[360px] rounded-full bg-[rgba(61,90,254,0.08)] blur-3xl" />
+        <div className="pointer-events-none absolute -bottom-32 -left-24 w-[360px] h-[360px] rounded-full bg-[color-mix(in_oklch,var(--brand-accent)_8%,transparent)] blur-3xl" />
         <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28 text-center">
           <span className="section-eyebrow">NEWSROOM</span>
           <h1 className="hero-slogan">{n.title}</h1>

src/components/NotFound.tsx

@@ -43,7 +43,7 @@ export default function NotFound({ locale }: { locale: Locale }) {
                 <a
                   key={key}
                   href={getLocalizedPath(`/${key}`, locale)}
-                  className="group inline-flex items-center gap-2 rounded-xl bg-white border border-[var(--border-light)] px-4 py-3 text-body font-medium text-[var(--text-secondary)] transition-all duration-200 hover:border-[rgba(235,234,246,0.2)] hover:bg-[var(--brand-cream-light)] hover:text-[var(--brand-black)]"
+                  className="group inline-flex items-center gap-2 rounded-xl bg-white border border-[var(--border-light)] px-4 py-3 text-body font-medium text-[var(--text-secondary)] transition-all duration-200 hover:border-[color-mix(in_oklch,var(--brand)_20%,transparent)] hover:bg-[var(--brand-cream-light)] hover:text-[var(--brand-black)]"
                 >
                   <Icon name={navIcons[key]} className="w-4 h-4" />
                   {label}

src/components/Sustainability.tsx

@@ -42,8 +42,8 @@ export default function Sustainability({ locale }: { locale: Locale }) {
     <>
       {/* ===== HERO ===== */}
       <section className="relative overflow-hidden bg-[var(--bg-subtle)]">
-        <div className="pointer-events-none absolute -top-24 -right-24 w-[420px] h-[420px] rounded-full bg-[rgba(16,185,129,0.10)] blur-3xl" />
+        <div className="pointer-events-none absolute -top-24 -right-24 w-[420px] h-[420px] rounded-full bg-[var(--sus-green-soft)] blur-3xl" />
-        <div className="pointer-events-none absolute -bottom-32 -left-24 w-[360px] h-[360px] rounded-full bg-[rgba(61,90,254,0.08)] blur-3xl" />
+        <div className="pointer-events-none absolute -bottom-32 -left-24 w-[360px] h-[360px] rounded-full bg-[var(--sus-blue-soft)] blur-3xl" />
         <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28 text-center">
           <span className="section-eyebrow">RESPONSIBILITY</span>
           <h1 className="hero-slogan">{s.title}</h1>