/* ============================================================
   HotLearn — telas de autenticação (login / cadastro / senha).
   Aplica a marca da home pública por cima do Tailwind do CORE, SEM
   editar as views/layout do CORE: este arquivo é injetado no
   @stack('head') apenas dessas telas, via View::composer da APP.
   Tailwind v4 usa @layer, então este CSS (sem layer) vence os
   utilitários por camada — sem precisar de !important.
   ============================================================ */
:root{
  --np-red-500:#d9534f; --np-red-600:#bd4340; --np-red-700:#9d3836;
  --np-teal-500:#1d8a9c;
  --np-ink:#141a1d; --np-paper:#f8fafb; --np-paper-2:#eef2f4;
  --np-n-200:#d9e2e7; --np-n-300:#b8c6cf; --np-n-500:#5d6e78; --np-n-600:#43515a; --np-n-700:#2e3940;
  --np-head:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --np-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
}

body{font-family:var(--np-body);background:var(--np-ink);color:var(--np-ink)}

/* Fundo: ink com um brilho vermelho suave no topo + textura de pontos (como o hero) */
.min-h-screen{position:relative;background:radial-gradient(1100px 560px at 50% -12%,rgba(157,56,54,.30),transparent 62%),var(--np-ink)}
.min-h-screen::before{content:"";position:absolute;inset:0;opacity:.05;background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:26px 26px;pointer-events:none}

/* Cartão branco flutuando sobre o ink — só sombra, sem borda (evita "ghost-card") */
.max-w-md{position:relative;z-index:1;background:#fff;border-radius:16px;padding:clamp(28px,4vw,44px);box-shadow:0 40px 90px -40px rgba(0,0,0,.62);font-family:var(--np-body)}

/* Logo HotLearn no topo do cartão */
.max-w-md>div:first-child{position:relative}
.max-w-md>div:first-child::before{content:"";display:block;height:32px;margin:0 auto 22px;background:url('../images/hotlearn.png') center/contain no-repeat}

/* Tipografia da marca */
.max-w-md h1{font-family:var(--np-head);font-weight:800;letter-spacing:-.02em;color:var(--np-ink)}
.max-w-md p{color:var(--np-n-600)}
.max-w-md label{color:var(--np-n-700)}

/* Inputs: borda de marca + foco teal */
.max-w-md input[type=email],.max-w-md input[type=password],.max-w-md input[type=text],.max-w-md input[type=tel]{
  border-color:var(--np-n-200);border-radius:8px;color:var(--np-ink)}
.max-w-md input:focus{border-color:var(--np-teal-500);box-shadow:0 0 0 3px rgba(29,138,156,.16);outline:none}
.max-w-md input[type=checkbox]{accent-color:var(--np-red-600)}

/* Botão primário = o botão da home (vermelho, quadrado, hover eleva) */
.max-w-md button[type=submit]{background:var(--np-red-600);border-radius:2px;box-shadow:0 12px 26px -14px rgba(157,56,54,.85);
  transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s,box-shadow .24s;font-family:var(--np-body)}
.max-w-md button[type=submit]:hover{background:var(--np-red-500);transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(217,83,79,1)}
.max-w-md button[type=submit]:active{transform:translateY(0)}

/* Links de destaque (azul no login/cadastro, âmbar no fluxo de senha) → vermelho de marca */
.text-blue-600,.text-amber-600,.text-amber-500{color:var(--np-red-600)}
.text-blue-600:hover,.text-amber-600:hover,.text-amber-500:hover{color:var(--np-red-700)}

/* Divisor + social sobre o cartão branco */
.border-gray-300{border-color:var(--np-n-200)}
.max-w-md .bg-gray-50{background:#fff}                 /* máscara do "ou" = cor do cartão */
.max-w-md .bg-gray-50.text-gray-500{color:var(--np-n-500)}

/* Banner de consentimento (tracking) do CORE — botão âmbar → vermelho de marca */
.bg-amber-600{background:var(--np-red-600)}
.bg-amber-600:hover{background:var(--np-red-700)}

@media (prefers-reduced-motion:reduce){
  .max-w-md button[type=submit]{transition:background .18s}
  .max-w-md button[type=submit]:hover{transform:none}
}