:root {
  color-scheme: light;
  --color-primary: 0 26 61;
  --color-secondary: 0 200 0;
  --color-background: 248 249 255;
  --color-surface: 248 249 255;
  --color-on-background: 11 28 48;
  --color-on-surface: 11 28 48;
  --color-on-surface-variant: 68 71 78;
  --color-outline: 116 119 127;
  --color-outline-variant: 196 198 207;
  --color-surface-container-lowest: 255 255 255;
  --color-surface-container-low: 239 244 255;
  --color-surface-container: 229 238 255;
  --color-surface-container-high: 220 233 255;
  --color-surface-container-highest: 211 228 254;
  --color-primary-container: 1 27 62;
  --color-on-primary-container: 111 132 173;
  --color-error: 186 26 26;
  --color-error-container: 255 218 214;
  --color-on-error-container: 147 0 10;
}

/* O atributo `hidden` tem que ganhar da classe de display do Tailwind.

   `[hidden] { display: none }` vem da folha do navegador, e perde de qualquer classe:
   um `<div class="flex" hidden>` aparece na tela do mesmo jeito. Já mordeu duas vezes —
   o esqueleto de Conexões por cima da lista carregada, e o "só o dono vê" do perfil que
   não escondia nada — e cada vez o remendo foi escrito de novo num CSS de página.

   Aqui vale para todas: `css/styles.css` é a única folha que toda tela carrega. */
[hidden] {
  display: none !important;
}

html.dark {
  color-scheme: dark;
  --color-background: 11 18 32;
  --color-surface: 11 18 32;
  --color-on-background: 234 241 255;
  --color-on-surface: 234 241 255;
  --color-on-surface-variant: 167 176 196;
  --color-outline: 124 135 158;
  --color-outline-variant: 42 53 80;
  --color-surface-container-lowest: 17 26 46;
  --color-surface-container-low: 22 33 58;
  --color-surface-container: 27 39 64;
  --color-surface-container-high: 33 47 74;
  --color-surface-container-highest: 38 54 84;
  --color-primary-container: 15 31 61;
  --color-on-primary-container: 156 176 217;
  --color-error: 255 180 171;
  --color-error-container: 147 0 10;
  --color-on-error-container: 255 218 214;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: rgb(var(--color-background));
  transition: background-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.elevation-1 {
  box-shadow: 0px 4px 12px rgba(0, 26, 61, 0.05);
}

.elevation-2 {
  box-shadow: 0px 8px 24px rgba(0, 26, 61, 0.10);
}

.gradient-mesh {
  background: radial-gradient(at 0% 0%, rgba(0, 26, 61, 0.05) 0%, transparent 50%),
              radial-gradient(at 100% 100%, rgba(0, 200, 0, 0.05) 0%, transparent 50%);
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  flex: 0 0 100%;
}

/* Âncoras (#planos, #faq...) param embaixo do cabeçalho fixo, que cobre o topo da seção e
   corta o título justamente de onde a pessoa acabou de pedir pra ir. O cabeçalho tem 74px
   em todas as telas — landing e área logada —, então a seção reserva essa altura antes de
   parar. Vale tanto para o menu da própria página quanto para quem chega de outra com a
   âncora na URL (ex.: "Ver os planos", em Configurações). */
section[id] {
    scroll-margin-top: 90px;
}