/* @config "../tailwind.config.js"; */
@import "tailwindcss";
@import "./tokens.css";

:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

@layer base {
  body {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  html.dark body {
    background-color: #0f172a;
    color: #f8fafc;
  }

  /* Força fonte Arimo nos headings */
  h1, h2, h3, h4, h5, h6,
  .font-heading {
    font-family: var(--font-arimo), ui-sans-serif, system-ui, sans-serif !important;
  }

  ::selection {
    background-color: var(--color-brand-500);
    color: var(--color-text-inverse);
  }

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

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

@layer utilities {
  .bg-brand {
    background: var(--color-gradient-brand);
  }

  .bg-brand-soft {
    background: linear-gradient(135deg, var(--color-brand-from-20), var(--color-brand-to-20));
  }

  .bg-brand-horizontal-soft {
    background: linear-gradient(90deg, var(--color-brand-from-20), var(--color-brand-to-20));
  }

  .hover\:bg-brand:hover {
    background: var(--color-gradient-brand);
  }

  .text-brand-gradient {
    background: var(--color-gradient-brand);
    -webkit-background-clip: text;
    color: transparent;
  }

  .hover\:text-brand-gradient:hover {
    background: var(--color-gradient-brand);
    -webkit-background-clip: text;
    color: transparent;
  }

  .shadow-brand-20 {
    box-shadow: 0 10px 15px -3px var(--color-brand-shadow-20), 0 4px 6px -4px var(--color-brand-shadow-20);
  }

  .gradient-text {
    background: var(--color-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ========== Animations ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.4s ease-out forwards;
}

/* ========== Dark Mode Override ========== */
/* Force dark mode styles outside Tailwind layers to ensure they work */

/* Base colors */
html.dark body {
  background-color: #09090b !important;
  color: #f8fafc !important;
}

html.dark main {
  background-color: #09090b !important;
}

/* Sections */
html.dark section {
  background-color: #18181b !important;
}

html.dark section.bg-white,
html.dark section[class*="bg-white"] {
  background-color: #18181b !important;
}

html.dark section.bg-zinc-50,
html.dark section[class*="bg-zinc-50"] {
  background-color: #27272a !important;
}

/* Typography */
/* Preserve gradient text by not applying color to elements with bg-clip-text */
html.dark h1:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
html.dark h2:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
html.dark h3:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
html.dark h4:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
html.dark h5:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
html.dark h6:not([class*="bg-clip-text"]):not([class*="text-transparent"]) {
  color: #ffffff !important;
}

html.dark p:not([class*="bg-clip-text"]):not([class*="text-transparent"]) {
  color: #d4d4d8 !important;
}

/* Gradient text should remain transparent */
html.dark .text-transparent {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Ensure gradients work in dark mode */
html.dark .bg-clip-text {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Force gradient backgrounds to be visible */
html.dark [class*="from-emerald"],
html.dark [class*="from-blue"],
html.dark [class*="from-purple"],
html.dark [class*="from-orange"],
html.dark [class*="from-indigo"],
html.dark [class*="from-pink"],
html.dark [class*="to-teal"],
html.dark [class*="to-cyan"],
html.dark [class*="to-rose"] {
  /* Preserve gradient colors */
}

html.dark .text-zinc-900:not(.text-transparent) {
  color: #ffffff !important;
}

html.dark .text-zinc-600:not(.text-transparent),
html.dark .text-zinc-700:not(.text-transparent) {
  color: #d4d4d8 !important;
}

html.dark .text-zinc-500:not(.text-transparent) {
  color: #a1a1aa !important;
}

html.dark .text-zinc-400:not(.text-transparent) {
  color: #a1a1aa !important;
}

html.dark .text-zinc-300:not(.text-transparent) {
  color: #d4d4d8 !important;
}

html.dark .text-zinc-200:not(.text-transparent) {
  color: #e4e4e7 !important;
}

/* Cards & containers */
html.dark .bg-white {
  background-color: #18181b !important;
}

html.dark .bg-zinc-50 {
  background-color: #27272a !important;
}

html.dark .bg-white\/80 {
  background-color: rgba(24, 24, 27, 0.8) !important;
}

html.dark .bg-white\/60 {
  background-color: rgba(24, 24, 27, 0.6) !important;
}

/* Borders */
html.dark .border-zinc-100 {
  border-color: #3f3f46 !important;
}

html.dark .border-zinc-200 {
  border-color: #3f3f46 !important;
}

html.dark .border-zinc-300 {
  border-color: #52525b !important;
}

html.dark .border-zinc-800 {
  border-color: #27272a !important;
}

/* Buttons */
html.dark button.border-zinc-200 {
  border-color: #3f3f46 !important;
  background-color: #18181b !important;
  color: #f8fafc !important;
}

html.dark a.border-zinc-200,
html.dark a.border-2.border-zinc-200 {
  border-color: #52525b !important;
  color: #d4d4d8 !important;
}

html.dark a.border-zinc-300 {
  border-color: #52525b !important;
  color: #d4d4d8 !important;
}

/* Header */
html.dark header {
  background-color: rgba(9, 9, 11, 0.8) !important;
  border-color: rgba(63, 63, 70, 0.7) !important;
}

html.dark header .bg-white\/90 {
  background-color: rgba(9, 9, 11, 0.9) !important;
}

html.dark header button.border-zinc-200 {
  border-color: #3f3f46 !important;
}

html.dark header .text-zinc-600,
html.dark header .text-zinc-700 {
  color: #d4d4d8 !important;
}

/* Mega menu - full width dropdown */
html.dark header .group:hover .fixed {
  background-color: rgba(9, 9, 11, 0.95) !important;
}

/* Mobile menu */
html.dark header .bg-white\/95 {
  background-color: rgba(9, 9, 11, 0.95) !important;
}

html.dark header .bg-zinc-100\/70 {
  background-color: rgba(39, 39, 42, 0.7) !important;
}

html.dark header .bg-zinc-900\/95 {
  background-color: rgba(24, 24, 27, 0.95) !important;
}

/* Footer - sempre escuro mas ajusta no dark */
html.dark footer.bg-zinc-900 {
  background-color: #000000 !important;
}

html.dark footer .bg-zinc-800 {
  background-color: #18181b !important;
}

html.dark footer .border-zinc-800 {
  border-color: #27272a !important;
}

/* Solution pages specific fixes */
html.dark .bg-zinc-800 {
  background-color: #27272a !important;
}

html.dark .bg-zinc-900 {
  background-color: #18181b !important;
}

html.dark .bg-zinc-950 {
  background-color: #09090b !important;
}

/* Ensure colored backgrounds remain visible in dark mode */
html.dark .bg-emerald-50,
html.dark .bg-blue-50,
html.dark .bg-purple-50,
html.dark .bg-orange-50,
html.dark .bg-indigo-50,
html.dark .bg-pink-50,
html.dark .bg-red-50 {
  background-color: rgba(var(--tw-bg-opacity, 1)) !important;
}

/* Keep gradient backgrounds intact */
html.dark [class*="bg-gradient-to"] {
  background-image: var(--tw-gradient-stops) !important;
}

/* Preserve brand colors */
html.dark .bg-brand,
html.dark .bg-emerald-600,
html.dark .bg-blue-600,
html.dark .bg-purple-600,
html.dark .bg-orange-600,
html.dark .bg-indigo-600,
html.dark .bg-pink-600,
html.dark .bg-emerald-500,
html.dark .bg-blue-500,
html.dark .bg-purple-500,
html.dark .bg-orange-500,
html.dark .bg-indigo-500,
html.dark .bg-pink-500,
html.dark .bg-red-500,
html.dark .bg-red-600,
html.dark .bg-yellow-500,
html.dark .bg-zinc-900 {
  /* Don't override brand colors */
}

/* Text on colored backgrounds should remain white */
html.dark .bg-emerald-600 *,
html.dark .bg-blue-600 *,
html.dark .bg-purple-600 *,
html.dark .bg-orange-600 *,
html.dark .bg-indigo-600 *,
html.dark .bg-pink-600 * {
  /* Preserve text colors on colored backgrounds */
}