@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');
@import "tailwindcss";

/* Configuração global */
* {
  @apply border-zinc-200 dark:border-zinc-800;
}

html {
  @apply antialiased;
}

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;
}

.font-heading {
  font-family: 'Open Sans', system-ui, sans-serif;
}

.font-mono {
  font-family: 'Fira Code', ui-monospace, monospace;
}

/* 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;
}