Prepara versao dev 1.0

frontend-aggios.app/app/globals.css

@@ -1,49 +1,37 @@
-@config "../tailwind.config.js";
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&family=Fira+Code:wght@400&display=swap');
-@import url('https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css');
+/* @config "../tailwind.config.js"; */
 @import "tailwindcss";
+@import "./tokens.css";
 
-/* Configuração global */
-* {
-  @apply border-zinc-200 dark:border-zinc-800;
+:root {
+  color-scheme: light;
 }
 
-html {
-  @apply antialiased;
+html.dark {
+  color-scheme: dark;
 }
 
-body {
-  @apply bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100;
-  font-family: 'Inter', system-ui, sans-serif;
-  scroll-behavior: smooth;
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
+@layer base {
+  body {
+    background-color: var(--color-surface-muted);
+    color: var(--color-text-primary);
+    transition: background-color 0.25s ease, color 0.25s ease;
+  }
 
-.font-heading {
-  font-family: 'Open Sans', system-ui, sans-serif;
-}
+  ::selection {
+    background-color: var(--color-brand-500);
+    color: var(--color-text-inverse);
+  }
 
-.font-mono {
-  font-family: 'Fira Code', ui-monospace, monospace;
-}
+  .surface-card {
+    background-color: var(--color-surface-card);
+    border: 1px solid var(--color-border-strong);
+    box-shadow: 0 20px 80px rgba(15, 23, 42, 0.08);
+  }
 
-/* Classes do design system - gradientes sempre visíveis */
-.gradient-text {
-  background: linear-gradient(135deg, #FF3A05, #FF0080);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.bg-linear-to-r {
-  background: linear-gradient(to right, #FF3A05, #FF0080);
-}
-
-.bg-linear-to-br {
-  background: linear-gradient(to bottom right, #FF3A05, #FF0080);
-}
-
-/* Estados de foco */
-*:focus-visible {
-  @apply outline-2 outline-offset-2 outline-orange-500;
+  .glass-panel {
+    background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
+    backdrop-filter: blur(20px);
+  }
 }