Atualizacao visual HGTX Commander

tailwind.config.ts

@@ -25,6 +25,9 @@ export default {
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
+          hover: "hsl(var(--primary-hover))",
+          pressed: "hsl(var(--primary-pressed))",
+          light: "hsl(var(--primary-light))",
         },
         secondary: {
           DEFAULT: "hsl(var(--secondary))",
@@ -68,11 +71,33 @@ export default {
           border: "hsl(var(--sidebar-border))",
           ring: "hsl(var(--sidebar-ring))",
         },
+        "bubble-bot": "hsl(var(--bubble-bot))",
+        "nav-active": "hsl(var(--nav-active))",
+        "input-bg": "hsl(var(--input-bg))",
+        placeholder: "hsl(var(--placeholder))",
+        "btn-secondary-border": "hsl(var(--btn-secondary-border))",
+        "border-subtle": "hsl(var(--border-subtle))",
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        sm: "var(--radius-sm)",
+        md: "var(--radius-md)",
+        lg: "var(--radius-lg)",
+        xl: "var(--radius-xl)",
+        "2xl": "20px",
+        pill: "var(--radius-pill)",
+      },
+      boxShadow: {
+        card: "var(--shadow-card)",
+        modal: "var(--shadow-modal)",
+      },
+      fontSize: {
+        display: ["32px", { lineHeight: "1.25", fontWeight: "700" }],
+        h1: ["24px", { lineHeight: "1.25", fontWeight: "600" }],
+        h2: ["18px", { lineHeight: "1.5", fontWeight: "600" }],
+        h3: ["15px", { lineHeight: "1.5" }],
+        body: ["14px", { lineHeight: "1.5" }],
+        small: ["12px", { lineHeight: "1.5" }],
+        caption: ["11px", { lineHeight: "1.5" }],
       },
       keyframes: {
         "accordion-down": {
@@ -84,15 +109,25 @@ export default {
           to: { height: "0" },
         },
         "pulse-glow": {
-          "0%, 100%": { 
-            boxShadow: "0 0 20px hsl(190 100% 50% / 0.3)",
+          "0%, 100%": {
+            boxShadow: "0 0 20px hsl(210 100% 33% / 0.3)",
             transform: "scale(1)"
           },
-          "50%": { 
-            boxShadow: "0 0 40px hsl(190 100% 50% / 0.5)",
+          "50%": {
+            boxShadow: "0 0 40px hsl(210 100% 33% / 0.5)",
             transform: "scale(1.02)"
           },
         },
+        "online-pulse": {
+          "0%, 100%": {
+            boxShadow: "0 0 0 0 hsl(134 61% 41% / 0.7)",
+            opacity: "1",
+          },
+          "50%": {
+            boxShadow: "0 0 0 4px hsl(134 61% 41% / 0)",
+            opacity: "0.85",
+          },
+        },
         "slide-in-right": {
           "0%": { transform: "translateX(100%)", opacity: "0" },
           "100%": { transform: "translateX(0)", opacity: "1" },
@@ -106,6 +141,7 @@ export default {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "pulse-glow": "pulse-glow 2s ease-in-out infinite",
+        "online-pulse": "online-pulse 1.5s ease-in-out infinite",
         "slide-in-right": "slide-in-right 0.3s ease-out",
         "fade-in": "fade-in 0.3s ease-out",
       },