/* ===========================================================================
   AZZA ACADEMY: tokens do sistema de design
   Importe este arquivo e você já nasce com a identidade da plataforma.
   Documentação completa: docs/design/SISTEMA-DESIGN.md
   =========================================================================== */

:root{
  /* ---- superfícies e texto: iguais para TODO cliente ---- */
  --bg:#08080c;
  --bg-grad:#0d0d16;
  --surface:#14141d;          /* é contra ele que o contraste é medido */
  --surface-2:#1c1c29;
  --surface-3:rgba(36,36,51,.25);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#f4f4f8;             /* contraste 16,7 no painel */
  --text-2:#9a9aac;           /* contraste  6,6 */
  --text-3:#5e5e6c;           /* contraste  2,9: só apoio, nunca informação */

  /* ---- marca AZZA: trocar estes 5 troca o cliente inteiro ---- */
  --accent:#0400f0;           /* PREENCHIMENTO. 1,97 de contraste: nunca como texto */
  --accent-2:#4643ff;         /* 2º tom do gradiente, a MESMA cor mais clara */
  --accent-text:#6e6bff;      /* TEXTO, ícone, linha fina. 4,54 de contraste */
  --accent-ink:#ffffff;       /* texto POR CIMA do preenchimento */
  --accent-soft:color-mix(in srgb,#0400f0 14%,transparent);
  --ouro:#e9a835;             /* terciária: referência, média, 2º dado. 8,8 */

  /* ---- semântica: NÃO é cor de marca ---- */
  --ok:#3ddc79;
  --aviso:#f2c811;
  --ruim:#e5564e;

  --radius:14px;
  --ease:cubic-bezier(.4,0,.2,1);
  --maxw:1180px;
}

*{ box-sizing:border-box }

/* Trava contra deslocamento lateral no celular.
   `clip` e não `hidden`: hidden quebra o position:sticky da barra de navegação. */
html,body{ max-width:100vw; overflow-x:clip }
html{ scroll-behavior:smooth }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* A camada de luz que dá profundidade a toda tela.
   ⚠️ É position:fixed com z-index:0 — todo conteúdo precisa de
   position:relative e z-index:1, senão a página abre PRETA. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% -8%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%),
    radial-gradient(900px 500px at 6% 4%,   color-mix(in srgb,var(--accent-2) 12%,transparent), transparent 55%),
    linear-gradient(180deg, var(--bg-grad), var(--bg) 42%);
  transition:background .6s var(--ease);
}

h1,h2,h3,h4{ font-family:'Sora',sans-serif; margin:0; letter-spacing:-.02em; text-wrap:balance }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }

/* Invólucro padrão do conteúdo */
.stage{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(18px,4vw,46px);
}

/* --------------------------------------------------------------------------
   Feedback de clique: sem isto, clicar não muda nada na tela enquanto o
   servidor responde, e a pessoa clica de novo achando que não pegou.
   -------------------------------------------------------------------------- */
button:not(:disabled):active,
a:active,
[role="button"]:active{ transform:scale(.97); filter:brightness(1.1) }
button,a,[role="button"]{ transition:transform .12s var(--ease), filter .12s var(--ease) }
button:disabled{ cursor:not-allowed }

[data-busy="1"]{ pointer-events:none; transform:none !important }
[data-busy="1"]::after{
  content:''; display:inline-block; vertical-align:-2px;
  width:12px; height:12px; margin-left:8px; border-radius:50%;
  border:2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color:currentColor;
  animation:iaf-spin .6s linear infinite;
}
@keyframes iaf-spin{ to{ transform:rotate(360deg) } }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; border-radius:11px;
  font-weight:600; font-size:14.5px;
  transition:transform .15s var(--ease), filter .2s, box-shadow .28s var(--ease);
}
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);
  box-shadow:0 0 28px -4px color-mix(in srgb,var(--accent) 65%,transparent);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px -2px color-mix(in srgb,var(--accent) 90%,transparent);
}
.btn-ghost{
  background:rgba(255,255,255,.08); color:var(--text);
  border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.14) }

/* --------------------------------------------------------------------------
   Vidro
   -------------------------------------------------------------------------- */
.vidro-leve{
  background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line); border-radius:var(--radius);
}
.vidro-denso{
  background:rgba(12,14,22,.82);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line); border-radius:16px;
}

/* --------------------------------------------------------------------------
   Celular
   -------------------------------------------------------------------------- */
/* iOS dá zoom ao focar campo com fonte < 16px. O `:root` sobe a especificidade
   para vencer folhas de estilo carregadas depois desta. */
@media (max-width:640px){
  :root input, :root textarea, :root select{ font-size:16px }
}
@media (pointer:coarse){
  .btn,.mini,button{ min-height:44px }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
  button:not(:disabled):active, a:active, [role="button"]:active{ transform:none }
}