hover и active цвета для brand кнопки

src/app/components/Hero.tsx

@@ -41,7 +41,7 @@ export default function Hero() {
 
                 {/* Кнопка для мобильных устройств */}
                 <div className="md:hidden flex  justify-center">
-                    <Button className="bg-brand hover:bg-teal-700 font-bold text-white h-[64px] px-8 text-lg w-full">
+                    <Button className="bg-brand hover:bg-brand-hover active:bg-brand-active font-bold text-white h-[64px] border-0 px-8 text-lg w-full">
                         Выберите яхту
                     </Button>
                 </div>
@@ -142,7 +142,7 @@ export default function Hero() {
                             </div>
 
                             {/* Кнопка поиска */}
-                            <Button className="bg-brand hover:bg-teal-700 font-bold text-white h-[64px] w-[176px] px-8">
+                            <Button className="bg-brand hover:bg-brand-hover active:bg-brand-active font-bold text-white h-[64px] w-[176px] px-8">
                                 Найти
                             </Button>
                         </div>

src/app/globals.css

@@ -43,6 +43,8 @@
     --color-card-foreground: var(--card-foreground);
     --color-card: var(--card);
     --color-brand: var(--brand);
+    --color-brand-hover: var(--brand-hover);
+    --color-brand-active: var(--brand-active);
     --radius-sm: calc(var(--radius) - 4px);
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
@@ -83,6 +85,8 @@
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
     --brand: oklch(0.5588 0.0992 215.93);
+    --brand-hover: oklch(0.4588 0.0992 215.93); /* #006B7A */
+    --brand-active: oklch(0.3588 0.0992 215.93);
 }
 
 .dark {