/* ============================================================
   base.css — Reset, tipografia base, helpers
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  transition:
    background 0.5s var(--ease),
    color 0.5s var(--ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
  color: inherit;
}

ul {
  list-style: none;
}

em {
  font-style: italic;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ambient background */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    #000 0%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    #000 0%,
    transparent 75%
  );
}
.ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
}
.ambient__orb--a {
  width: 50vw;
  height: 50vw;
  top: -15vw;
  left: -10vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  animation: orbFloat 16s var(--ease) infinite;
}
.ambient__orb--b {
  width: 40vw;
  height: 40vw;
  bottom: -10vw;
  right: -10vw;
  background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%);
  animation: orbFloat 20s var(--ease) infinite reverse;
}
.ambient__noise {
  position: absolute;
  inset: 0;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Refinamentos do TEMA CLARO — separação clara dos componentes
   Cards brancos ganham sombra sutil + borda definida sobre o
   fundo cinza-azulado, criando hierarquia e profundidade.
   ============================================================ */
[data-theme="light"] .value,
[data-theme="light"] .timeline,
[data-theme="light"] .timeline__card,
[data-theme="light"] .member,
[data-theme="light"] .site,
[data-theme="light"] .client-panel,
[data-theme="light"] .team__cta,
[data-theme="light"] .mq-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .dash-card,
[data-theme="light"] .session-item,
[data-theme="light"] .heatmap-kpi,
[data-theme="light"] .scroll-heatmap-wrap,
[data-theme="light"] .clicks-wrap,
[data-theme="light"] .admin-card,
[data-theme="light"] .visitors-table-wrap {
  box-shadow: var(--shadow-s);
}

/* Faixas/insets ganham contraste extra para "dividir" do branco */
[data-theme="light"] .stat-list-item,
[data-theme="light"] .click-item,
[data-theme="light"] .channel,
[data-theme="light"] .timeline__card {
  background: var(--bg-3);
}

/* Header com borda sempre perceptível no claro */
[data-theme="light"] .header.is-scrolled::before {
  border-bottom-color: var(--border);
  box-shadow:
    0 1px 0 rgba(13, 27, 58, 0.04),
    var(--shadow-s);
}

/* Inputs e tabelas com borda mais nítida */
[data-theme="light"] .visitors-table th {
  background: var(--surface-2);
}
[data-theme="light"] .logs-terminal {
  background: #0b0d14; /* terminal permanece escuro p/ leitura de logs */
  border-color: var(--border);
}