design: Termius-dark theme - black bg, green accent, terminal style

web/default/src/components/layout/components/footer.tsx

@@ -58,7 +58,7 @@ function FooterLinkItem(props: { link: FooterLink }) {
           href={props.link.href}
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#8B8D97] hover:text-[#00D2FF] text-sm transition-colors duration-200'
+          className='text-[#8B8D97] hover:text-[#28C840] text-sm transition-colors duration-200'
         >
           {label}
         </a>
@@ -110,7 +110,7 @@ function LegalLinks(props: { leadingSeparator?: boolean }) {
           )}
           <Link
             to={item.href}
-            className='text-[#8B8D97] hover:text-[#00D2FF] transition-colors duration-200'
+            className='text-[#8B8D97] hover:text-[#28C840] transition-colors duration-200'
           >
             {item.label}
           </Link>
@@ -131,7 +131,7 @@ function ProjectAttribution(props: { currentYear: number; inline?: boolean }) {
         href='https://git.viaeon.com/admin/new-api'
         target='_blank'
         rel='noopener noreferrer'
-        className='text-[#8B8D97] hover:text-[#00D2FF] font-medium transition-colors'
+        className='text-[#8B8D97] hover:text-[#28C840] font-medium transition-colors'
       >
         {t('ModelsToken')}
       </a>
@@ -164,17 +164,17 @@ export function Footer(props: FooterProps) {
     return (
       <footer
         className={cn(
-          'border-[#2A2B33] bg-[#0C0D10] border-t',
+          'border-[#1A1F29] bg-[#0A0E14] border-t',
           props.className
         )}
       >
         <div className='mx-auto w-full max-w-6xl px-6 py-5'>
-          <div className='border-[#2A2B33] bg-[#13141A] flex flex-col items-center justify-between gap-4 rounded-lg border px-4 py-4 sm:flex-row sm:px-5'>
+          <div className='border-[#1A1F29] bg-[#0F1419] flex flex-col items-center justify-between gap-4 rounded-lg border px-4 py-4 sm:flex-row sm:px-5'>
             <div
               className='text-[#8B8D97] min-w-0 text-center text-sm sm:text-left'
               dangerouslySetInnerHTML={{ __html: footerHtml }}
             />
-            <div className='border-[#2A2B33] text-[#5C5D66] flex w-full flex-wrap items-center justify-center gap-x-3 gap-y-1 border-t pt-4 text-xs sm:w-auto sm:justify-end sm:border-t-0 sm:border-l sm:pt-0 sm:pl-5'>
+            <div className='border-[#1A1F29] text-[#5C6370] flex w-full flex-wrap items-center justify-center gap-x-3 gap-y-1 border-t pt-4 text-xs sm:w-auto sm:justify-end sm:border-t-0 sm:border-l sm:pt-0 sm:pl-5'>
               <LegalLinks />
               <ProjectAttribution currentYear={currentYear} inline />
             </div>
@@ -186,7 +186,7 @@ export function Footer(props: FooterProps) {
 
   return (
     <footer
-      className={cn('border-[#2A2B33] bg-[#0C0D10] border-t', props.className)}
+      className={cn('border-[#1A1F29] bg-[#0A0E14] border-t', props.className)}
     >
       <div className='mx-auto max-w-5xl px-6 py-8'>
         <div className='flex flex-col items-center justify-between gap-4 sm:flex-row'>
@@ -203,7 +203,7 @@ export function Footer(props: FooterProps) {
           </Link>
 
           {/* Links + Copyright */}
-          <div className='text-[#5C5D66] flex flex-wrap items-center justify-center gap-x-2 gap-y-1 text-xs'>
+          <div className='text-[#5C6370] flex flex-wrap items-center justify-center gap-x-2 gap-y-1 text-xs'>
             <span>&copy; {currentYear} {displayName}</span>
             <LegalLinks leadingSeparator />
             <ProjectAttribution currentYear={currentYear} inline />

web/default/src/components/layout/components/public-header.tsx

@@ -184,7 +184,7 @@ export function PublicHeader(props: PublicHeaderProps) {
             className={cn(
               'flex items-center justify-between transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]',
               scrolled
-                ? 'bg-[#0C0D10]/80 ring-[#2A2B33]/80 h-12 rounded-2xl pr-1.5 pl-4 shadow-[0_2px_16px_-6px_rgba(0,0,0,0.5)] ring-[0.5px] backdrop-blur-2xl'
+                ? 'bg-[#0A0E14]/80 ring-[#1A1F29]/80 h-12 rounded-2xl pr-1.5 pl-4 shadow-[0_2px_16px_-6px_rgba(0,0,0,0.5)] ring-[0.5px] backdrop-blur-2xl'
                 : 'h-16 px-2'
             )}
           >
@@ -286,7 +286,7 @@ export function PublicHeader(props: PublicHeaderProps) {
                   ) : (
                     <Button
                       size='sm'
-                      className='h-8 rounded-lg bg-[#00D2FF] px-3.5 text-xs font-semibold text-[#0C0D10] hover:bg-[#00B8E6]'
+                      className='h-8 rounded-lg bg-[#28C840] px-3.5 text-xs font-semibold text-[#0A0E14] hover:bg-[#22A836]'
                       render={<Link to='/sign-in' />}
                     >
                       {t('Sign in')}
@@ -339,7 +339,7 @@ export function PublicHeader(props: PublicHeaderProps) {
       {/* Mobile full-screen overlay */}
       <div
         className={cn(
-          'bg-[#0C0D10]/98 fixed inset-0 z-40 backdrop-blur-2xl transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] sm:pointer-events-none sm:hidden',
+          'bg-[#0A0E14]/98 fixed inset-0 z-40 backdrop-blur-2xl transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] sm:pointer-events-none sm:hidden',
           mobileOpen
             ? 'pointer-events-auto opacity-100'
             : 'pointer-events-none opacity-0'
@@ -405,7 +405,7 @@ export function PublicHeader(props: PublicHeaderProps) {
               <Link
                 to={isAuthenticated ? '/dashboard' : '/sign-in'}
                 onClick={() => setMobileOpen(false)}
-                className='bg-[#00D2FF] text-[#0C0D10] inline-flex h-10 items-center justify-center rounded-lg text-sm font-semibold transition-opacity hover:opacity-90 active:opacity-80'
+                className='bg-[#28C840] text-[#0A0E14] inline-flex h-10 items-center justify-center rounded-lg text-sm font-semibold transition-opacity hover:opacity-90 active:opacity-80'
               >
                 {isAuthenticated ? t('Go to Dashboard') : t('Sign in')}
               </Link>

web/default/src/features/auth/auth-layout.tsx

@@ -30,7 +30,7 @@ export function AuthLayout({ children }: AuthLayoutProps) {
   const { systemName, logo, loading } = useSystemConfig()
 
   return (
-    <div className='relative grid h-svh max-w-none bg-[#0C0D10]'>
+    <div className='relative grid h-svh max-w-none bg-[#0A0E14]'>
       <Link
         to='/'
         className='absolute top-4 left-4 z-10 flex items-center gap-2 transition-opacity hover:opacity-80 sm:top-8 sm:left-8'

web/default/src/features/home/components/sections/hero.tsx

@@ -27,6 +27,21 @@ interface HeroProps {
   isAuthenticated?: boolean
 }
 
+/* Termius-dark terminal palette: black bg, green primary, dim gray secondary */
+const T = {
+  bg: '#0A0E14',
+  surface: '#0F1419',
+  border: '#1A1F29',
+  green: '#28C840',
+  greenDim: '#1B7A2B',
+  cyan: '#00D2FF',
+  yellow: '#FEBC2E',
+  gray: '#5C6370',
+  grayLight: '#8B8D97',
+  white: '#C5C6D0',
+  red: '#FF5F57',
+}
+
 const features = [
   { icon: Zap, title: 'Multi-model Routing', desc: 'Intelligent routing across providers with automatic failover and load balancing' },
   { icon: Key, title: 'Key Management', desc: 'Centralized API key lifecycle management with usage tracking and rotation' },
@@ -44,43 +59,48 @@ export function Hero(props: HeroProps) {
     `${window.location.origin}`
 
   return (
-    <section className='relative overflow-hidden bg-[#0C0D10]'>
-      {/* Top gradient glow */}
+    <section className='relative overflow-hidden' style={{ backgroundColor: T.bg }}>
+      {/* Subtle top glow - green tint */}
       <div
         aria-hidden
         className='pointer-events-none absolute inset-0'
         style={{
           background:
-            'radial-gradient(ellipse 70% 40% at 50% -5%, rgba(0,210,255,0.08) 0%, transparent 70%)',
+            'radial-gradient(ellipse 60% 35% at 50% -5%, rgba(40,200,64,0.06) 0%, transparent 70%)',
         }}
       />
 
       <div className='relative mx-auto max-w-6xl px-6'>
-        {/* Hero area */}
+        {/* ── Hero ── */}
         <div className='flex min-h-[calc(100svh-3rem)] flex-col items-center justify-center py-20 text-center'>
           {/* Badge */}
-          <div className='mb-6 inline-flex items-center gap-2 rounded-full border border-[#2A2B33] bg-[#13141A] px-4 py-1.5 text-xs text-[#8B8D97]'>
-            <span className='inline-block size-1.5 rounded-full bg-[#00D2FF]' />
+          <div
+            className='mb-6 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-xs'
+            style={{ borderColor: T.border, backgroundColor: T.surface, color: T.grayLight }}
+          >
+            <span className='inline-block size-1.5 rounded-full' style={{ backgroundColor: T.green }} />
             {t('Compatible with OpenAI API')}
           </div>
 
           {/* Headline */}
-          <h1 className='max-w-3xl text-[clamp(2rem,5.5vw,3.5rem)] leading-[1.1] font-bold tracking-[-0.025em] text-white'>
+          <h1
+            className='max-w-3xl text-[clamp(2rem,5.5vw,3.5rem)] leading-[1.1] font-bold tracking-[-0.025em]'
+            style={{ color: T.green }}
+          >
             {t('Unified LLM Gateway')}
           </h1>
 
           {/* Subtitle */}
-          <p className='mt-5 max-w-lg text-base leading-relaxed text-[#8B8D97] sm:text-lg'>
-            {t(
-              'One endpoint for all models. OpenAI-compatible, switch and go.'
-            )}
+          <p className='mt-5 max-w-lg text-base leading-relaxed sm:text-lg' style={{ color: T.grayLight }}>
+            {t('One endpoint for all models. OpenAI-compatible, switch and go.')}
           </p>
 
           {/* CTA */}
           <div className='mt-8 flex flex-wrap items-center justify-center gap-3'>
             {props.isAuthenticated ? (
               <Button
-                className='group h-11 rounded-lg bg-[#00D2FF] px-6 text-sm font-semibold text-[#0C0D10] hover:bg-[#00B8E6]'
+                className='group h-11 rounded-lg px-6 text-sm font-semibold hover:opacity-90'
+                style={{ backgroundColor: T.green, color: T.bg }}
                 render={<Link to='/dashboard' />}
               >
                 {t('Go to Dashboard')}
@@ -89,7 +109,8 @@ export function Hero(props: HeroProps) {
             ) : (
               <>
                 <Button
-                  className='group h-11 rounded-lg bg-[#00D2FF] px-6 text-sm font-semibold text-[#0C0D10] hover:bg-[#00B8E6]'
+                  className='group h-11 rounded-lg px-6 text-sm font-semibold hover:opacity-90'
+                  style={{ backgroundColor: T.green, color: T.bg }}
                   render={<Link to='/sign-up' />}
                 >
                   {t('Get Started')}
@@ -97,7 +118,8 @@ export function Hero(props: HeroProps) {
                 </Button>
                 <Button
                   variant='outline'
-                  className='h-11 rounded-lg border-[#2A2B33] bg-transparent px-6 text-sm font-medium text-[#C5C6D0] hover:border-[#3A3B45] hover:bg-[#1A1B20] hover:text-white'
+                  className='h-11 rounded-lg px-6 text-sm font-medium hover:opacity-90'
+                  style={{ borderColor: T.border, backgroundColor: 'transparent', color: T.white }}
                   render={<Link to='/pricing' />}
                 >
                   {t('View Pricing')}
@@ -107,68 +129,71 @@ export function Hero(props: HeroProps) {
           </div>
         </div>
 
-        {/* Terminal demo - centered, overlapping hero and features */}
+        {/* ── Terminal demo ── */}
         <div className='-mt-10 mb-20 flex justify-center pb-8'>
-          <div className='w-full max-w-2xl overflow-hidden rounded-lg border border-[#2A2B33] bg-[#13141A] shadow-[0_8px_40px_-12px_rgba(0,0,0,0.6)]'>
+          <div
+            className='w-full max-w-2xl overflow-hidden rounded-lg border shadow-[0_8px_40px_-12px_rgba(0,0,0,0.6)]'
+            style={{ borderColor: T.border, backgroundColor: T.surface }}
+          >
             {/* Terminal header */}
-            <div className='flex items-center gap-2 border-b border-[#2A2B33] px-4 py-3'>
+            <div className='flex items-center gap-2 border-b px-4 py-3' style={{ borderColor: T.border }}>
               <div className='flex gap-1.5'>
-                <div className='size-[9px] rounded-full bg-[#FF5F57]' />
-                <div className='size-[9px] rounded-full bg-[#FEBC2E]' />
-                <div className='size-[9px] rounded-full bg-[#28C840]' />
+                <div className='size-[9px] rounded-full' style={{ backgroundColor: T.red }} />
+                <div className='size-[9px] rounded-full' style={{ backgroundColor: T.yellow }} />
+                <div className='size-[9px] rounded-full' style={{ backgroundColor: T.green }} />
               </div>
-              <span className='ml-1 text-[11px] font-medium text-[#5C5D66]'>
-                bash
+              <span className='ml-1 text-[11px] font-medium' style={{ color: T.gray }}>
+                bash — ModelsToken
               </span>
             </div>
             {/* Terminal content */}
             <div className='p-5 font-mono text-[13px] leading-[1.8]'>
               <div>
-                <span className='select-none text-[#5C5D66]'>$</span>{' '}
-                <span className='text-[#C5C6D0]'>curl</span>{' '}
-                <span className='text-[#00D2FF]'>{serverAddress}/v1/chat/completions</span>{' '}
-                <span className='text-[#5C5D66]'>\</span>
+                <span style={{ color: T.green }}>$</span>{' '}
+                <span style={{ color: T.white }}>curl</span>{' '}
+                <span style={{ color: T.cyan }}>{serverAddress}/v1/chat/completions</span>{' '}
+                <span style={{ color: T.gray }}>\</span>
               </div>
               <div className='pl-4'>
-                <span className='text-[#5C5D66]'>-H</span>{' '}
-                <span className='text-[#FEBC2E]'>"Authorization: Bearer sk-..."</span>{' '}
-                <span className='text-[#5C5D66]'>\</span>
+                <span style={{ color: T.gray }}>-H</span>{' '}
+                <span style={{ color: T.yellow }}>"Authorization: Bearer sk-..."</span>{' '}
+                <span style={{ color: T.gray }}>\</span>
               </div>
               <div className='pl-4'>
-                <span className='text-[#5C5D66]'>-d</span>{' '}
-                <span className='text-[#FEBC2E]'>{'\'{ "model": "gpt-4o", "messages": [...] }\''}</span>
+                <span style={{ color: T.gray }}>-d</span>{' '}
+                <span style={{ color: T.yellow }}>{"'{ \"model\": \"gpt-4o\", \"messages\": [...] }'"}</span>
               </div>
-              <div className='mt-4 flex items-center gap-2 border-t border-[#2A2B33] pt-4'>
-                <span className='inline-block size-1.5 rounded-full bg-[#28C840]' />
-                <span className='text-[11px] font-medium text-[#5C5D66]'>200 OK</span>
-                <span className='text-[11px] text-[#5C5D66]'>-- 312ms</span>
+              <div className='mt-4 flex items-center gap-2 border-t pt-4' style={{ borderColor: T.border }}>
+                <span className='inline-block size-1.5 rounded-full' style={{ backgroundColor: T.green }} />
+                <span className='text-[11px] font-medium' style={{ color: T.gray }}>200 OK</span>
+                <span className='text-[11px]' style={{ color: T.gray }}>-- 312ms</span>
               </div>
               <div className='mt-2'>
-                <span className='text-[#5C5D66]'>{'{'}</span>{' '}
-                <span className='text-[#00D2FF]'>"model"</span>
-                <span className='text-[#5C5D66]'>:</span>{' '}
-                <span className='text-[#FEBC2E]'>"gpt-4o"</span>
-                <span className='text-[#5C5D66]'>,</span>{' '}
-                <span className='text-[#00D2FF]'>"usage"</span>
-                <span className='text-[#5C5D66]'>:</span>{' '}
-                <span className='text-[#5C5D66]'>{'{'}...{'}'}</span>
-                <span className='text-[#5C5D66]'>{'}'}</span>
+                <span style={{ color: T.gray }}>{"{"}</span>{' '}
+                <span style={{ color: T.cyan }}>"model"</span>
+                <span style={{ color: T.gray }}>:</span>{' '}
+                <span style={{ color: T.yellow }}>"gpt-4o"</span>
+                <span style={{ color: T.gray }}>,</span>{' '}
+                <span style={{ color: T.cyan }}>"usage"</span>
+                <span style={{ color: T.gray }}>:</span>{' '}
+                <span style={{ color: T.gray }}>{"{...}"}</span>
+                <span style={{ color: T.gray }}>{"}"}</span>
               </div>
               <div className='mt-3'>
-                <span className='select-none text-[#5C5D66]'>$</span>
-                <span className='ml-1 inline-block h-3.5 w-[7px] animate-pulse bg-[#C5C6D0] align-middle' />
+                <span style={{ color: T.green }}>$</span>
+                <span className='ml-1 inline-block h-3.5 w-[7px] animate-pulse align-middle' style={{ backgroundColor: T.green }} />
               </div>
             </div>
           </div>
         </div>
 
-        {/* Features grid */}
+        {/* ── Features ── */}
         <div className='pb-24'>
           <div className='mb-12 text-center'>
-            <h2 className='text-xl font-semibold tracking-tight text-white sm:text-2xl'>
+            <h2 className='text-xl font-semibold tracking-tight sm:text-2xl' style={{ color: T.green }}>
               {t('Full-featured gateway')}
             </h2>
-            <p className='mt-2 text-sm text-[#8B8D97]'>
+            <p className='mt-2 text-sm' style={{ color: T.grayLight }}>
               {t('Everything you need to manage, route, and monitor LLM API traffic')}
             </p>
           </div>
@@ -177,15 +202,28 @@ export function Hero(props: HeroProps) {
             {features.map((feature) => (
               <div
                 key={feature.title}
-                className='group rounded-lg border border-[#2A2B33] bg-[#13141A] p-5 transition-colors duration-200 hover:border-[#3A3B45]'
+                className='group rounded-lg border p-5 transition-colors duration-200'
+                style={{
+                  borderColor: T.border,
+                  backgroundColor: T.surface,
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.borderColor = T.greenDim
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.borderColor = T.border
+                }}
               >
-                <div className='mb-3 flex size-9 items-center justify-center rounded-md bg-[#00D2FF]/10'>
-                  <feature.icon className='size-[18px] text-[#00D2FF]' />
+                <div
+                  className='mb-3 flex size-9 items-center justify-center rounded-md'
+                  style={{ backgroundColor: `${T.green}15` }}
+                >
+                  <feature.icon className='size-[18px]' style={{ color: T.green }} />
                 </div>
-                <h3 className='text-sm font-semibold text-[#C5C6D0]'>
+                <h3 className='text-sm font-semibold' style={{ color: T.white }}>
                   {t(feature.title)}
                 </h3>
-                <p className='mt-1.5 text-[13px] leading-relaxed text-[#5C5D66]'>
+                <p className='mt-1.5 text-[13px] leading-relaxed' style={{ color: T.gray }}>
                   {t(feature.desc)}
                 </p>
               </div>

web/default/src/features/home/index.tsx

@@ -33,8 +33,8 @@ export function Home() {
   if (!isLoaded) {
     return (
       <PublicLayout showMainContainer={false}>
-        <main className='flex min-h-screen items-center justify-center bg-[#0C0D10]'>
-          <div className='text-[#5C5D66]'>{t('Loading...')}</div>
+        <main className='flex min-h-screen items-center justify-center bg-[#0A0E14]'>
+          <div className='text-[#5C6370]'>{t('Loading...')}</div>
         </main>
       </PublicLayout>
     )
@@ -43,7 +43,7 @@ export function Home() {
   if (content) {
     return (
       <PublicLayout showMainContainer={false}>
-        <main className='overflow-x-hidden bg-[#0C0D10]'>
+        <main className='overflow-x-hidden bg-[#0A0E14]'>
           {isUrl ? (
             <iframe
               src={content}

web/default/src/styles/theme.css

@@ -146,47 +146,47 @@ For commercial licensing, please contact admin@modelstoken.com
 }
 
 .dark {
-  /* Termius-inspired dark mode: deep charcoal, muted cyan accent */
-  --background: oklch(0.13 0.005 270);
+  /* Termius-dark: deep black bg, green accent (#28C840 ≈ oklch(0.72 0.19 145)) */
+  --background: oklch(0.10 0.005 270);
   --foreground: oklch(0.93 0.005 270);
-  --card: oklch(0.17 0.005 270);
+  --card: oklch(0.14 0.005 270);
   --card-foreground: oklch(0.93 0.005 270);
-  --popover: oklch(0.17 0.005 270);
+  --popover: oklch(0.14 0.005 270);
   --popover-foreground: oklch(0.93 0.005 270);
-  --primary: oklch(0.72 0.14 210);
-  --primary-foreground: oklch(0.13 0.005 270);
+  --primary: oklch(0.72 0.19 145);
+  --primary-foreground: oklch(0.10 0.005 270);
   --secondary: oklch(0.22 0.005 270);
   --secondary-foreground: oklch(0.88 0.005 270);
-  --muted: oklch(0.20 0.005 270);
-  --muted-foreground: oklch(0.58 0.01 270);
-  --accent: oklch(0.25 0.005 270);
+  --muted: oklch(0.18 0.005 270);
+  --muted-foreground: oklch(0.55 0.01 270);
+  --accent: oklch(0.22 0.005 270);
   --accent-foreground: oklch(0.93 0.005 270);
   --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.985 0 0);
-  --success: oklch(0.696 0.17 162.48);
-  --success-foreground: oklch(0.13 0.005 270);
+  --success: oklch(0.72 0.19 145);
+  --success-foreground: oklch(0.10 0.005 270);
   --warning: oklch(0.769 0.188 70.08);
-  --warning-foreground: oklch(0.13 0.005 270);
+  --warning-foreground: oklch(0.10 0.005 270);
   --info: oklch(0.68 0.17 237.323);
-  --info-foreground: oklch(0.13 0.005 270);
-  --neutral: oklch(0.58 0.01 270);
-  --neutral-foreground: oklch(0.13 0.005 270);
-  --border: oklch(0.25 0.005 270);
-  --input: oklch(0.25 0.005 270);
-  --ring: oklch(0.72 0.14 210);
-  --chart-1: oklch(0.72 0.14 210);
+  --info-foreground: oklch(0.10 0.005 270);
+  --neutral: oklch(0.55 0.01 270);
+  --neutral-foreground: oklch(0.10 0.005 270);
+  --border: oklch(0.22 0.005 270);
+  --input: oklch(0.22 0.005 270);
+  --ring: oklch(0.72 0.19 145);
+  --chart-1: oklch(0.72 0.19 145);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.11 0.005 270);
+  --sidebar: oklch(0.08 0.005 270);
   --sidebar-foreground: oklch(0.88 0.005 270);
-  --sidebar-primary: oklch(0.72 0.14 210);
-  --sidebar-primary-foreground: oklch(0.13 0.005 270);
-  --sidebar-accent: oklch(0.20 0.005 270);
+  --sidebar-primary: oklch(0.72 0.19 145);
+  --sidebar-primary-foreground: oklch(0.10 0.005 270);
+  --sidebar-accent: oklch(0.18 0.005 270);
   --sidebar-accent-foreground: oklch(0.88 0.005 270);
-  --sidebar-border: oklch(0.25 0.005 270);
-  --sidebar-ring: oklch(0.72 0.14 210);
-  --skeleton-base: oklch(0.20 0.005 270);
-  --skeleton-highlight: oklch(0.28 0.005 270);
+  --sidebar-border: oklch(0.22 0.005 270);
+  --sidebar-ring: oklch(0.72 0.19 145);
+  --skeleton-base: oklch(0.18 0.005 270);
+  --skeleton-highlight: oklch(0.26 0.005 270);
 }