add some ui improvements

css/components.css

@@ -11,6 +11,10 @@
     transition: all var(--transition-fast);
 }
 
+.btn:active {
+    transform: scale(0.97);
+}
+
 .btn-primary {
     background-color: var(--color-primary);
     color: var(--color-bg);
@@ -64,6 +68,12 @@
     box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
+.input:focus-visible,
+.btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
 .input::placeholder {
     color: var(--color-text-muted);
 }
@@ -86,11 +96,12 @@
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     overflow: hidden;
-    transition: box-shadow var(--transition-fast);
+    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
 }
 
 .card:hover {
     box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
 }
 
 .card-image {
@@ -200,6 +211,11 @@ app-header {
     z-index: var(--z-sticky);
     background-color: var(--color-bg);
     border-bottom: 1px solid var(--color-border);
+    transition: box-shadow var(--transition-fast);
+}
+
+app-header.scrolled {
+    box-shadow: var(--shadow-sm);
 }
 
 app-header .header-inner {