/*
  Sales Vision — bridge local (nao faz parte do Wortic UI Kit).

  Os templates usam classes wm-hero, wm-brand-logo, wm-auth, wm-auth-card,
  wm-shell, wm-topbar, wm-content, wm-field (ver base.html/landing.html/
  auth/login.html) que nunca foram implementadas em nenhum componente do
  kit -- so a camada foundation (reset/tokens/colors/...) e o componente
  button existem prontos e foram encontrados em /opt/war-room/kit. Sem
  este arquivo a logo (assets/logo.svg, ~1400px de largura nativa) rendia
  em tamanho natural cobrindo a tela inteira, e o card de auth/hero ficava
  sem nenhum espacamento.

  Regra seguida aqui: só tokens do kit (var(--wm-...)), nunca cor/medida
  solta -- para herdar automaticamente claro/escuro e qualquer ajuste
  futuro de tema. Isto e um bridge minimo pra tela nao ficar quebrada;
  não substitui um componente wm-hero/wm-auth desenhado de verdade.
*/

@layer components {
  html, body {
    color: var(--wm-label-primary);
    font-family: var(--wm-font-family);
  }

  /* Wallpaper claro e frio atrás do vidro -- sem isto, o blur do
     .wm-hero/.wm-auth-card não tem o que desfocar e "glass" vira só
     cinza chapado. Fixo (não rola) pra dar profundidade real.

     18/08/2026 (correção 2): alphas 0.10-0.16 liam quase branco puro --
     card de login saiu chapado no print (mesma causa raiz do IA
     Influencer: sem profundidade real por trás, o blur não muda nada).
     Subidos para dar contraste visível ao "vidro". */
  body {
    min-height: 100dvh;
    background:
      radial-gradient(650px 650px at 50% 42%, rgba(91, 91, 214, 0.22), transparent 68%),
      radial-gradient(1200px 680px at 10% -10%, rgba(29, 89, 240, 0.34), transparent 62%),
      radial-gradient(1000px 620px at 94% 8%, rgba(122, 92, 255, 0.30), transparent 58%),
      radial-gradient(1100px 780px at 50% 112%, rgba(0, 200, 210, 0.22), transparent 62%),
      var(--wm-surface-base);
    background-attachment: fixed;
  }

  .wm-brand-logo {
    width: 96px;
    height: auto;
    margin-inline: auto;
  }

  /* Liquid Glass de verdade: blur + saturação sobre o wallpaper acima,
     não uma superfície opaca. Mesma receita de .wm-material-glass
     (materials.css), com a borda hairline clara por dentro.

     18/08/2026 (correção 2): o gradiente branco .72->.42 ficava opaco
     demais no topo do card (quase sem ver o wallpaper por trás) e o teste
     do Will (comentar o backdrop-filter e comparar) dava tela quase
     idêntica. Trocado por alpha único .60 -- dentro da faixa .55-.75 que
     ele pediu -- pra deixar o card visivelmente mais translúcido. */
  .wm-hero,
  .wm-auth-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wm-space-8);
    width: 100%;
    max-width: 420px;
    margin: var(--wm-space-14) auto;
    padding: var(--wm-space-11) var(--wm-space-10);
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(var(--wm-material-blur, 40px)) saturate(var(--wm-material-saturate, 2));
    -webkit-backdrop-filter: blur(var(--wm-material-blur, 40px)) saturate(var(--wm-material-saturate, 2));
    border-radius: var(--wm-radius-panel);
    border: var(--wm-border-width-hairline, 1px) solid var(--wm-material-glass-border, rgba(255, 255, 255, 0.6));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 20px 60px -20px rgba(20, 30, 70, 0.25);
    transition: transform var(--wm-duration-normal, 200ms) var(--wm-ease-standard, ease),
      box-shadow var(--wm-duration-normal, 200ms) var(--wm-ease-standard, ease);
  }
  @media (prefers-reduced-motion: reduce) {
    .wm-hero, .wm-auth-card { transition: none; }
  }
  .wm-hero h1,
  .wm-auth-card h1 {
    font-size: var(--wm-font-size-title1);
    margin: 0;
  }
  .wm-hero p {
    color: var(--wm-label-secondary);
    margin: 0;
  }

  .wm-auth-card {
    text-align: left;
    align-items: stretch;
  }
  .wm-auth-card form {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-8);
  }

  .wm-field {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
  }
  .wm-field label {
    font-size: var(--wm-font-size-callout);
    color: var(--wm-label-secondary);
  }
  .wm-field input {
    height: var(--wm-control-height-lg);
    padding-inline: var(--wm-space-6);
    border-radius: var(--wm-radius-sm);
    border: var(--wm-border-width-hairline, 1px) solid var(--wm-separator-strong);
    background: var(--wm-surface-base);
    color: var(--wm-label-primary);
    font: inherit;
  }
  .wm-field-group__error {
    color: var(--wm-error);
    font-size: var(--wm-font-size-callout);
    margin: 0;
  }

  main.wm-auth {
    display: flex;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: var(--wm-space-8);
  }

  .wm-shell {
    display: flex;
    min-height: 100dvh;
  }
  .wm-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .wm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wm-space-8) var(--wm-space-10);
    border-bottom: var(--wm-border-width-hairline, 1px) solid var(--wm-separator);
  }
  .wm-topbar__title {
    font-size: var(--wm-font-size-title2);
    margin: 0;
  }
  .wm-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--wm-space-6);
  }
  .wm-user {
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-callout);
  }
  .wm-content {
    padding: var(--wm-space-10);
    flex: 1;
  }
}