fix: icons

app/globals.css

@@ -6,6 +6,19 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@layer base {
+	* {
+		@supports (color: color-mix(in lab, red, red)) {
+			outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+		}
+	}
+
+	* {
+		border-color: var(--border);
+		outline-color: var(--ring);
+	}
+}
+
 /* Awesome Gradient Text - Dynamic theme support */
 .gradient-text, .prose h1 {
   background: var(--gradient-awesome);
@@ -224,11 +237,6 @@ kbd {
   color: inherit;
 }
 
-/* Focus Ring */
-*:focus-visible {
-  @apply outline-none ring-2 ring-primary ring-offset-2;
-}
-
 /* Loading Spinner */
 @keyframes spin-awesome {
   from {