/* ============================================================
   TELA DE LOGIN — VARIÁVEIS DE DESIGN (TOKENS) E RESET
   Parte 1/9 da antiga style.css (linhas 1–91 do original).
   A ordem das <link> no index.html repete a ordem original do arquivo,
   então a cascata é exatamente a mesma de antes da divisão.
   ============================================================ */

/* ============================================================
   TELA DE LOGIN — CSS POR SEÇÃO (HTML puro)
   Originalmente um arquivo único (style.css); dividido em partes
   por seção em 2026-09-22 para respeitar o teto de ~900 linhas.
   Convertido do React para HTML+CSS+JS vanilla
   ============================================================ */
/* ===================== CSS VARIABLES (Root) =====================
 * Espelha os tokens de css/core/base.css (o chat). Antes esta tela tinha
 * paleta PRÓPRIA e mais fraca: texto secundário a 55%, bordas a 7% e fundo
 * preto puro. Em painel TN isso vira texto apagado e borda invisível, e o
 * preto puro estoura o contraste com o roxo. Agora é o mesmo cardápio do
 * chat: fundo #0b0b11, texto secundário a 78%, bordas a 14%.
 * ============================================================ */
:root {
  --color-brand: #8b5cf6;
  --color-brand-light: #b39dff;
  --color-brand-dark: #6d28d9;
  --color-brand-accent: #c084fc;
  /* Versões RGB, para rgba(var(--color-brand-rgb), α) — igual ao chat. */
  --color-brand-rgb: 139, 92, 246;
  --color-brand-light-rgb: 179, 157, 255;
  --color-brand-dark-rgb: 109, 40, 217;
  --color-error: #ef4444;
  --color-success: #10b981;

  --color-bg-page: #0b0b11;
  --color-bg-card: rgba(255, 255, 255, 0.06);

  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.78);
  --color-text-muted: rgba(255, 255, 255, 0.66);
  --color-text-subtle: rgba(255, 255, 255, 0.55);
  --color-icon-muted: rgba(255, 255, 255, 0.6);

  --color-border: rgba(255, 255, 255, 0.14);

  --radius-card: 24px;
  --radius-input: 12px;
  --radius-button: 12px;
  --radius-pill: 999px;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
  --color-bg-page: #f4f4f7;
  --color-bg-card: rgba(255, 255, 255, 0.86);
  --color-text-primary: #14141c;
  --color-text-secondary: rgba(20, 20, 28, 0.78);
  --color-text-muted: rgba(20, 20, 28, 0.64);
  --color-text-subtle: rgba(20, 20, 28, 0.55);
  --color-icon-muted: rgba(20, 20, 28, 0.62);
  --color-border: rgba(20, 20, 28, 0.14);
}

/* ===================== RESET ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  /* Era #000000 puro — o mesmo "preto de TV" que o chat abandonou: em TN
     estoura o contraste com o roxo e faz o gradiente da página faixar. */
  background: var(--color-bg-page);
  overflow-x: hidden;
  overflow-y: auto;
}

#root {
  height: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Animações sempre ativas nesta tela — decisão do produto: a identidade
 * visual (coroa flutuando, gradiente animado, frases alternadas) é parte
 * da experiência e não deve ser congelada pela configuração do Windows. */