/**
 * login/_shared/card-tokens.css — PADRÃO ÚNICO do card de login (todos os temas).
 * ─────────────────────────────────────────────────────────────────────────────
 * Objetivo: o "menu de acesso" (card de login) tem SEMPRE o mesmo tamanho, respiro
 * e posição — não importa qual tema foi sorteado. Antes cada tema definia larguras
 * e paddings ligeiramente diferentes e o card "pulava" ao trocar de tema.
 *
 * Cada tema continua dono da sua ARTE (fundo) e da sua PALETA (via os tokens de cor
 * abaixo). A TINTURA da arte no card acontece sobrescrevendo --accent* em runtime
 * (ver o extractAndApply de cada tema) — por isso as cores são tokens, não fixas.
 *
 * Como usar: cada template.php inclui este arquivo ANTES do seu <style> próprio:
 *   <link rel="stylesheet" href="<?= b('/login/_shared/card-tokens.css') ?>">
 * e usa as classes .login-wrap / .login-card. O tema só ajusta cor de fundo/arte.
 */

:root {
  /* ── Dimensão e respiro do card (idêntico entre temas) ── */
  --login-card-w:        min(440px, 92vw);
  --login-card-pad-y:    clamp(20px, 3.5vh, 40px);
  --login-card-pad-x:    clamp(20px, 4vw, 44px);
  --login-card-maxh:     calc(100vh - 24px);
  --login-card-radius:   0px;               /* ateliê: cantos retos por padrão */

  /* ── Paleta base (a ARTE do tema sobrescreve --accent* em runtime) ── */
  --login-accent:        #BFA882;
  --login-accent-light:  #D4BC94;
  --login-accent-dim:    rgba(191,168,130,0.5);
  --login-card-bg:       #1A1A18;
  --login-card-border:   #2A2A28;
}

/* ── Wrapper: posição CONSISTENTE (centralizado vertical, respiro lateral) ──
   Os temas com arte à direita podem alinhar o card à direita trocando só
   justify-content no body; o tamanho interno do card não muda. */
.login-wrap {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 12px clamp(16px, 6vw, 80px);
  box-sizing: border-box;
}

/* ── Card: dimensão/respiro padronizados via tokens ── */
.login-card {
  position: relative;
  z-index: 5;
  width: var(--login-card-w);
  padding: var(--login-card-pad-y) var(--login-card-pad-x);
  max-height: var(--login-card-maxh);
  overflow-y: auto;
  scrollbar-width: none;
  background: var(--login-card-bg);
  border: 1px solid var(--login-card-border);
  border-radius: var(--login-card-radius);
  box-sizing: border-box;
}
.login-card::-webkit-scrollbar { display: none; }

/* Filete superior dourado — usa o accent tingível pela arte. */
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--login-accent-dim) 20%,
    var(--login-accent) 50%,
    var(--login-accent-dim) 80%,
    transparent);
  transition: background 0.8s ease;
}