/* Acabamento só do tema escuro. As cores do escuro moram nos tokens (tokens.css, bloco :root); aqui ficam os
   efeitos que o claro não tem (brilho do fundo, profundidade de cartões e painéis). Carregado por último.
   Há dois caminhos até o escuro, por isso cada regra aparece duas vezes (mesma ordem nos dois blocos):
   A. sem JS, com o sistema escuro (ou sem preferência): o mesmo caminho dos tokens;
   B. o visitante escolheu o escuro no botão ☾ (com JS o site sempre abre no claro, e o theme.js marca o tema).
   O :where() zera o peso do seletor do tema: cada regra pesa o mesmo que a original, e os estados de motion.css
   e pages.css (:hover, :target) e as versões mais específicas (a do Campo, as fichas achatadas de Serviços)
   continuam valendo por cima. O claro nunca passa por aqui. */

/* ---------- A. escuro pelo sistema ---------- */
@media not all and (prefers-color-scheme: light) {
  /* Fundo: o brilho violeta atrás do orbe fica mais largo e macio, com um toque do rosa do orbe, sobre uma
     tinta que desce um tom (no lugar do preto chapado) */
  :where(:root:not([data-theme="light"])) body {
    background:
      radial-gradient(ellipse 70% 55% at 74% 18%, var(--color-accent-glow), transparent 70%),
      radial-gradient(ellipse 40% 30% at 80% 28%, color-mix(in srgb, var(--color-orb) 4.5%, transparent), transparent 70%),
      radial-gradient(1px 1px at 20% 30%, var(--color-star), transparent),
      radial-gradient(1px 1px at 80% 70%, var(--color-star), transparent),
      radial-gradient(1px 1px at 45% 85%, var(--color-star), transparent),
      radial-gradient(1px 1px at 10% 60%, var(--color-star), transparent),
      linear-gradient(180deg, var(--color-bg-top), var(--color-bg) 60%);
    background-attachment: fixed;
  }
  /* Cartões um degrau acima do fundo: luz de cima (1px), leve clarão no topo e sombra embaixo */
  :where(:root:not([data-theme="light"])) .item {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-text) 3.5%, transparent), transparent 140px), var(--color-panel);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent), 0 32px 64px -40px var(--color-shadow-deep);
  }
  /* Ficha com destino, ao passar o mouse: com a tinta do accent mais leve, o brilho de baixo quase sumia;
     aqui ele volta mais forte (violeta nas comuns, dourado na de sistema) e a luz de cima continua */
  @media (hover: hover) {
    :where(:root:not([data-theme="light"])) .item:has(> .item-foot):hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent), 0 0 0 1px var(--color-accent-soft), 0 22px 56px -22px var(--color-accent-halo); }
    :where(:root:not([data-theme="light"])) .item.exotic:has(> .item-foot):hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent), 0 0 0 1px var(--color-exotic-soft), 0 22px 56px -22px color-mix(in srgb, var(--color-exotic) 32%, transparent); }
  }
  /* Salão (o pedido viajando, na página e na prévia da home): a tela dos aparelhos acende um tom acima do
     fundo, como uma tela ligada; moldura, fios e nós seguem na cor da página. Tudo dentro da tela (campos,
     degradê do fim, linhas do telão) segue o mesmo tom */
  :where(:root:not([data-theme="light"])) .of-screen { --color-bg: var(--color-screen-on); }
  /* Campo (a coleta viajando, na página e na prévia de Produtos): o mesmo desenho de aparelho, a mesma tela acesa */
  :where(:root:not([data-theme="light"])) .ff-screen { --color-bg: var(--color-screen-on); }
  /* Vitrine da home no celular: a imagem e o vídeo do Salão foram gravados no tema claro; um pouco mais escuros,
     não ofuscam o texto em volta no fundo escuro */
  :where(:root:not([data-theme="light"])) :is(.showcase-media img, .showcase-video) { filter: brightness(.88); }
  /* Faixa de abas (Confiança e Privacidade): com 90% da cor do fundo ela virava uma tarja preta cortando o
     brilho do topo; no tom dos painéis ela lê como barra de ferramentas e segue escondendo o que rola por baixo */
  :where(:root:not([data-theme="light"])) .trust-tabs { background: color-mix(in srgb, var(--color-panel-solid) 88%, transparent); }
  /* Chat: o painel ganha a mesma luz de cima e assenta no fundo com sombra */
  :where(:root:not([data-theme="light"])) .chat .chat-panel {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent), 0 28px 60px -28px var(--color-shadow-deep), 0 24px 60px -20px var(--color-accent-glow);
  }
  @media (max-width: 860px) {
    /* Celular: o brilho sobe para o canto e encolhe, para não ficar atrás do título */
    :where(:root:not([data-theme="light"])) body {
      background:
        radial-gradient(ellipse 80% 40% at 92% 6%, var(--color-accent-glow), transparent 70%),
        radial-gradient(1px 1px at 20% 30%, var(--color-star), transparent),
        radial-gradient(1px 1px at 80% 70%, var(--color-star), transparent),
        radial-gradient(1px 1px at 45% 85%, var(--color-star), transparent),
        radial-gradient(1px 1px at 10% 60%, var(--color-star), transparent),
        linear-gradient(180deg, var(--color-bg-top), var(--color-bg) 60%);
      background-attachment: fixed;
    }
  }
}

/* ---------- B. escuro pelo botão ---------- */
:where(:root[data-theme="dark"]) body {
  background:
    radial-gradient(ellipse 70% 55% at 74% 18%, var(--color-accent-glow), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 28%, color-mix(in srgb, var(--color-orb) 4.5%, transparent), transparent 70%),
    radial-gradient(1px 1px at 20% 30%, var(--color-star), transparent),
    radial-gradient(1px 1px at 80% 70%, var(--color-star), transparent),
    radial-gradient(1px 1px at 45% 85%, var(--color-star), transparent),
    radial-gradient(1px 1px at 10% 60%, var(--color-star), transparent),
    linear-gradient(180deg, var(--color-bg-top), var(--color-bg) 60%);
  background-attachment: fixed;
}
:where(:root[data-theme="dark"]) .item {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-text) 3.5%, transparent), transparent 140px), var(--color-panel);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent), 0 32px 64px -40px var(--color-shadow-deep);
}
@media (hover: hover) {
  :where(:root[data-theme="dark"]) .item:has(> .item-foot):hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent), 0 0 0 1px var(--color-accent-soft), 0 22px 56px -22px var(--color-accent-halo); }
  :where(:root[data-theme="dark"]) .item.exotic:has(> .item-foot):hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent), 0 0 0 1px var(--color-exotic-soft), 0 22px 56px -22px color-mix(in srgb, var(--color-exotic) 32%, transparent); }
}
:where(:root[data-theme="dark"]) .of-screen { --color-bg: var(--color-screen-on); }
:where(:root[data-theme="dark"]) .ff-screen { --color-bg: var(--color-screen-on); }
:where(:root[data-theme="dark"]) :is(.showcase-media img, .showcase-video) { filter: brightness(.88); }
:where(:root[data-theme="dark"]) .trust-tabs { background: color-mix(in srgb, var(--color-panel-solid) 88%, transparent); }
:where(:root[data-theme="dark"]) .chat .chat-panel {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent), 0 28px 60px -28px var(--color-shadow-deep), 0 24px 60px -20px var(--color-accent-glow);
}
@media (max-width: 860px) {
  :where(:root[data-theme="dark"]) body {
    background:
      radial-gradient(ellipse 80% 40% at 92% 6%, var(--color-accent-glow), transparent 70%),
      radial-gradient(1px 1px at 20% 30%, var(--color-star), transparent),
      radial-gradient(1px 1px at 80% 70%, var(--color-star), transparent),
      radial-gradient(1px 1px at 45% 85%, var(--color-star), transparent),
      radial-gradient(1px 1px at 10% 60%, var(--color-star), transparent),
      linear-gradient(180deg, var(--color-bg-top), var(--color-bg) 60%);
    background-attachment: fixed;
  }
}