@import url('theme.css');

/* Hero e gradiente de texto — baseados na paleta primária (Cor da Paleta) */
.hero-bg {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--color-primary-bg) 90%, white) 0%, color-mix(in srgb, var(--color-primary-bg) 60%, white) 50%, color-mix(in srgb, var(--color-primary-bg) 20%, white) 100%);
  transition: background 0.3s ease;
}
.dark .hero-bg {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--color-primary) 40%, black) 0%, color-mix(in srgb, var(--color-primary) 15%, black) 100%);
}
.text-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sombras da landing usando a paleta primária */
.landing-shadow-primary {
  box-shadow: 0 10px 15px -3px rgba(var(--color-primary-rgb), 0.2), 0 4px 6px -2px rgba(var(--color-primary-rgb), 0.1);
}
.landing-shadow-primary-soft {
  box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.1);
}
.landing-shadow-code {
  box-shadow: 0 25px 50px -12px rgba(var(--color-primary-rgb), 0.15);
}
.dark .landing-shadow-code-dark {
  box-shadow: 0 0 50px rgba(var(--color-primary-rgb), 0.2);
}

/* Bloco "export_data.tsv" — contraste legível no modo escuro para qualquer paleta (ex.: ciano) */
.landing-code-header {
  color: var(--color-primary);
  font-weight: 600;
}
.dark .landing-code-header {
  color: var(--color-primary-light);
  opacity: 0.9;
}
.landing-code-row {
  background-color: var(--color-primary-bg);
  color: #0f172a;
}
.dark .landing-code-row {
  background-color: rgba(var(--color-primary-rgb), 0.35);
  color: #e5e7eb;
}
.landing-code-row-alt {
  color: var(--color-primary);
}
.dark .landing-code-row-alt {
  color: #d1d5db;
}
.landing-code-loading {
  background-color: var(--color-primary-bg);
}
.dark .landing-code-loading {
  background-color: rgba(var(--color-primary-rgb), 0.2);
}

.glass-card {
  background: rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dark .glass-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Modal Transitions */
.modal { transition: opacity 0.3s ease, visibility 0.3s ease; opacity: 0; visibility: hidden; }
.modal.active { opacity: 1; visibility: visible; }
.modal-content { transform: scale(0.95); transition: transform 0.3s ease; }
.modal.active .modal-content { transform: scale(1); }

/* Ícones sociais do rodapé (landing): mesmo set da modal Sobre — hover por opacity/scale e cor primária, sem forçar fill→stroke (traços nítidos) */
.about-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.about-social-icon:hover {
  color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.dark .about-social-icon:hover {
  color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}