/* Fonte e transições globais */
body {
  font-family: 'Inter', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  height: 100%;
  position: relative;
  color: var(--text-color);
}

/* Variáveis para tema claro */
:root {
  --bg-color: #f8fafc;
  --text-color: #1e293b;
  --card-bg-color: #ffffff;
  --primary-color: #0284c7;
  --primary-text-color: #ffffff;
  --secondary-text-color: #475569;
  --border-color: #e2e8f0;
  --icon-color: #334155;
}

/* Variáveis para tema escuro */
html.dark {
  --bg-color: #0f172a;
  --text-color: #e2e8f0;
  --card-bg-color: #1e293b;
  --primary-color: #38bdf8;
  --primary-text-color: #0f172a;
  --secondary-text-color: #94a3b8;
  --border-color: #334155;
  --icon-color: #cbd5e1;
}

/* Fundo padrão com base nas variáveis */
body {
  background-color: var(--bg-color);
}

/* Imagem de fundo com efeito visual para cada tema */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transition: background-image 0.3s ease, background-color 0.3s ease;
}

/* Modo claro com imagem clara */
html:not(.dark) body::before {
  background-image: url("img/dinoclaro.jpg"); /* <- imagem clara */
  opacity: 0.4;
  mix-blend-mode: darken;
}

/* Modo escuro com imagem escura */
html.dark body::before {
  background-image: url("img/dinoback.jpg"); /* <- imagem escura */
  opacity: 0.7;
  mix-blend-mode: lighten;
}

/* Estilização de cartões e botões */
.card {
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
}

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

.primary-button {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
}

.primary-button:hover {
  opacity: 0.9;
}

.secondary-text { color: var(--secondary-text-color); }
.border-color { border-color: var(--border-color); }
.icon-color { color: var(--icon-color); }

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--card-bg-color);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
  opacity: 0.8;
}

/* Tooltip */
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
  padding: 4px 8px;
  background-color: #333;
  color: white;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 10;
}

[data-tooltip] {
  position: relative;
}

/* Cursor piscando */
.blinking-cursor {
  animation: blink 1s step-end infinite;
  font-weight: bold;
  color: var(--primary-color);
}

@keyframes blink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}