/* OnlyFlow - Global Styles */

:root {
  --primary-50: #eef9ff;
  --primary-100: #d6eeff;
  --primary-200: #b0ddff;
  --primary-300: #7ac4ff;
  --primary-400: #3fa3ff;
  --primary-500: #1c86ff;
  --primary-600: #0864db;
  --primary-700: #064fb0;
  --primary-800: #08438f;
  --primary-900: #0b376f;
  --slate-950: #020617;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Theme: dark (default) and light */
html[data-theme='dark'] {
  color-scheme: dark;
}

html[data-theme='light'] {
  color-scheme: light;
}

html[data-theme='light'] body {
  background-color: #f9fafb;
  color: #0f172a;
}

/* Override main dark backgrounds in light mode */
html[data-theme='light'] .bg-slate-950,
html[data-theme='light'] .bg-slate-950\/60,
html[data-theme='light'] .bg-slate-950\/70,
html[data-theme='light'] .bg-slate-950\/80,
html[data-theme='light'] .bg-slate-950\/90,
html[data-theme='light'] .bg-slate-900\/70,
html[data-theme='light'] .bg-slate-900\/80 {
  background-color: #f9fafb;
}

html[data-theme='light'] .bg-slate-800\/80,
html[data-theme='light'] .bg-slate-900\/50 {
  background-color: #e5e7eb;
}

/* Specific section gradient (\"Tudo que você precisa\") */
html[data-theme='light'] .bg-gradient-to-b.from-slate-950.to-slate-950\/60 {
  background-image: linear-gradient(to bottom, #ffffff, #f3f4f6, #e5e7eb);
}

/* Cards de features na versão clara */
html[data-theme='light'] .bg-slate-900\/60 {
  background-color: #e5e7eb;
}

/* Soften dark gradients in light mode */
html[data-theme='light'] .bg-gradient-to-b.from-primary-950.via-slate-950.to-slate-950 {
  background-image: linear-gradient(to bottom, #ffffff, #f3f4f6, #e5e7eb);
}

html[data-theme='light'] .bg-gradient-to-b.from-slate-950.via-slate-950.to-slate-950 {
  background-image: linear-gradient(to bottom, #ffffff, #f3f4f6, #e5e7eb);
}

html[data-theme='light'] .bg-gradient-to-b.from-slate-950\/80.via-primary-950\/40.to-slate-950 {
  background-image: linear-gradient(to bottom, #ffffff, #e5f2ff, #e5e7eb);
}

/* Text colors in light mode */
html[data-theme='light'] .text-white {
  color: #020617;
}

html[data-theme='light'] .text-white\/80 {
  color: rgba(15, 23, 42, 0.9);
}

html[data-theme='light'] .text-white\/70 {
  color: rgba(15, 23, 42, 0.75);
}

html[data-theme='light'] .text-white\/60 {
  color: rgba(15, 23, 42, 0.68);
}

html[data-theme='light'] .text-white\/50 {
  color: rgba(15, 23, 42, 0.58);
}

/* Ainda um pouco mais forte para labels muito claros (ex: \"CRM Kanban • Hoje\") */
html[data-theme='light'] .text-white\/40 {
  color: rgba(15, 23, 42, 0.56);
}

/* Texto em blocos pre/code (ex: documentação) no tema claro */
html[data-theme='light'] .text-white\/90 {
  color: rgba(15, 23, 42, 0.95);
}

/* Página Documentação - tema claro: garantir leitura de todos os textos */
html[data-theme='light'] [data-page='docs'] article {
  color: #1f2937;
}

html[data-theme='light'] [data-page='docs'] article h1,
html[data-theme='light'] [data-page='docs'] article h2,
html[data-theme='light'] [data-page='docs'] article h3 {
  color: #111827;
}

html[data-theme='light'] [data-page='docs'] article p,
html[data-theme='light'] [data-page='docs'] article li {
  color: #374151;
}

html[data-theme='light'] [data-page='docs'] article code {
  color: #1d4ed8;
  background-color: rgba(59, 130, 246, 0.12);
}

html[data-theme='light'] [data-page='docs'] article pre {
  background-color: #e5e7eb;
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme='light'] [data-page='docs'] article pre code {
  color: #111827;
  background-color: transparent;
}

html[data-theme='light'] [data-page='docs'] article .text-primary-200 {
  color: #1d4ed8;
}

/* Cards da documentação (bg-slate-900/70) no tema claro */
html[data-theme='light'] [data-page='docs'] .bg-slate-900\/70 {
  background-color: #f3f4f6;
  border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme='light'] [data-page='docs'] .bg-slate-950\/80 {
  background-color: #e5e7eb;
}

/* Caixas Sucesso/Erro na documentação */
html[data-theme='light'] [data-page='docs'] .text-emerald-200 {
  color: #047857;
}

html[data-theme='light'] [data-page='docs'] .text-red-200 {
  color: #b91c1c;
}

/* Seção "Informações importantes" (amber) no tema claro */
html[data-theme='light'] [data-page='docs'] .text-amber-200 {
  color: #b45309;
}

/* Borders in light mode */
html[data-theme='light'] .border-white\/5,
html[data-theme='light'] .border-white\/10 {
  border-color: rgba(15, 23, 42, 0.08);
}

/* Chips / badges background in light mode */
html[data-theme='light'] .bg-white\/5 {
  background-color: rgba(148, 163, 184, 0.16);
}

/* Language switcher + theme toggle in light mode */
html[data-theme='light'] .lang-switcher {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(148, 163, 184, 0.6);
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

html[data-theme='light'] .lang-switcher:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(37, 99, 235, 0.7);
  color: #1f2937;
}

/* Hero: badge \"Plataforma completa de comunicação com IA\" */
html[data-theme='light'] [data-i18n='hero.badge'] {
  color: #1d4ed8; /* primary-700 aprox */
}

/* Hero: CTA \"Ver integrações\" */
html[data-theme='light'] a[data-i18n='hero.ctaIntegrations'] {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.5);
}

html[data-theme='light'] a[data-i18n='hero.ctaIntegrations']:hover {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.8);
  background-color: rgba(219, 234, 254, 0.5);
}

/* Hero: \"Empresas que confiam na OnlyFlow\" */
html[data-theme='light'] [data-i18n='hero.trustedBy'] {
  color: rgba(15, 23, 42, 0.7);
}

/* Balões de conversa do mock do agente (text-primary-100) */
html[data-theme='light'] .text-primary-100 {
  color: #1d4ed8;
}

/* Language Switcher Button */
.lang-switcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(28, 134, 255, 0.15);
  border: 1px solid rgba(28, 134, 255, 0.3);
  border-radius: 9999px;
  color: #b0ddff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.lang-switcher:hover {
  background: rgba(28, 134, 255, 0.25);
  border-color: rgba(28, 134, 255, 0.5);
  color: #d6eeff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.lang-switcher:active {
  transform: translateY(0);
}

.lang-switcher svg {
  width: 16px;
  height: 16px;
}

/* Smooth transitions for language changes */
[data-lang] {
  transition: opacity 0.2s ease;
}

/* Utility classes */
.text-primary {
  color: var(--primary-500);
}

.bg-primary {
  background-color: var(--primary-500);
}

.border-primary {
  border-color: var(--primary-500);
}

/* Gradient text utility for highlights (#2781cc → #b500ff) */
.text-gradient-primary {
  background-image: linear-gradient(90deg, #2781cc, #b500ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* melhor suporte em WebKit */
  display: inline-block;
}

/* Logo variants for dark / light theme */
.logo-dark {
  display: inline-block;
}

.logo-light {
  display: none;
}

html[data-theme='light'] .logo-dark {
  display: none;
}

html[data-theme='light'] .logo-light {
  display: inline-block;
}

/* Trusted-by logos (empresas que confiam) - tons de cinza */
.trusted-logo {
  filter: grayscale(100%);
  opacity: 0.8;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.trusted-logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* WhatsApp CTAs - make green more visible on light theme */
html[data-theme='light'] a[data-i18n='hero.ctaWhatsApp'],
html[data-theme='light'] a[data-i18n='cta.whatsapp'],
html[data-theme='light'] a[href*='wa.me'] {
  color: #059669; /* emerald-600 */
}

html[data-theme='light'] a[data-i18n='hero.ctaWhatsApp']:hover,
html[data-theme='light'] a[data-i18n='cta.whatsapp']:hover,
html[data-theme='light'] a[href*='wa.me']:hover {
  color: #047857; /* emerald-700 */
}

/* Smooth scroll offset for sections */
section[id] {
  scroll-margin-top: 80px;
}

/* Section "Conecte a qualquer sistema" (gradiente) em tema claro */
html[data-theme='light'] .bg-gradient-to-b.from-slate-950\/80.to-slate-950 {
  background-image: linear-gradient(to bottom, #ffffff, #f3f4f6, #e5e7eb);
}

/* Card Pro ("Mais popular") em tema claro */
html[data-theme='light'] .bg-gradient-to-b.from-primary-500\/20.via-slate-900.to-slate-900 {
  background-image: linear-gradient(
    to bottom,
    rgba(59, 130, 246, 0.10),
    #ffffff,
    #e5e7eb
  );
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .lang-switcher {
    bottom: 16px;
    right: 16px;
    padding: 8px 12px;
    font-size: 12px;
  }
  
  section[id] {
    scroll-margin-top: 60px;
  }
}