/* ============================================================
   MovelTech — identidade visual
   GERADO por packages/marca/gerar-css.php. NÃO EDITE À MÃO:
   altere packages/marca/Marca.php e rode

       bash bin/sincronizar-marca.sh

   Paleta oficial (manual da marca, seção 2):
     Deep Navy #0D1B2A · Teal #3D6F78 · Wood Bronze #B6844A
     Light Gray #E6E9EC
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --mt-navy:          #0D1B2A;
  --mt-navy-claro:    #1A2D42;
  --mt-navy-escuro:   #071019;
  --mt-teal:          #3D6F78;
  --mt-teal-claro:    #4D8A94;
  --mt-teal-suave:    #E2EDEF;
  --mt-bronze:        #B6844A;
  --mt-bronze-claro:  #C99A63;
  --mt-bronze-suave:  #F5EBDC;
  --mt-branco:        #FFFFFF;
  --mt-fundo:         #F4F7F8;
  --mt-superficie:    #FFFFFF;
  --mt-borda:         #D3DDE1;
  --mt-borda-suave:   #E6E9EC;
  --mt-texto:         #0D1B2A;
  --mt-texto-2:       #33505F;
  --mt-texto-fraco:   #63808D;
  --mt-ok:            #2E6B4F;
  --mt-ok-suave:      #E1F0E8;
  --mt-atencao:       #8A5B12;
  --mt-atencao-suave: #FAEEDA;
  --mt-erro:          #9B3226;
  --mt-erro-suave:    #F9E5E2;
  --mt-info:          #2F6470;
  --mt-info-suave:    #E2EDEF;
  --mt-raio:          8px;
  --mt-raio-grande:   14px;

  --mt-titulo-familia: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mt-texto-familia:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mt-mono-familia:   'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --mt-titulo-peso:    800;

  --mt-sombra:       0 1px 2px rgba(13,27,42,.06), 0 8px 24px -12px rgba(13,27,42,.18);
  --mt-sombra-forte: 0 16px 48px -16px rgba(13,27,42,.28);

  /* Escala tipográfica. Uma só, para as telas não flutuarem. */
  --mt-t--1: .8125rem;
  --mt-t-0:  1rem;
  --mt-t-1:  1.125rem;
  --mt-t-2:  1.375rem;
  --mt-t-3:  1.75rem;
  --mt-t-4:  2.25rem;
}

/* ── Base ──────────────────────────────────────────────────── */
.mt body, body.mt {
  font-family: var(--mt-texto-familia);
  color: var(--mt-texto);
  background: var(--mt-fundo);
  -webkit-font-smoothing: antialiased;
}

/* ── Títulos ───────────────────────────────────────────────── */
.mt-titulo {
  font-family: var(--mt-titulo-familia);
  font-weight: var(--mt-titulo-peso);
  letter-spacing: -.02em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--mt-navy);
}

/* ── Etiqueta em versalete ─────────────────────────────────── */
/*  O espaçamento largo vem da assinatura do logotipo
    ("B U I L D I N G   S M A R T E R"). É a assinatura da marca
    aplicada à interface, não enfeite. */
.mt-etiqueta {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mt-teal);
}

/* ── Marca no topo ─────────────────────────────────────────── */
.mt-marca { display: inline-flex; align-items: center; gap: .6rem; }
.mt-marca img { height: 30px; width: auto; display: block; }

/* ── Botões ────────────────────────────────────────────────── */
.mt-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--mt-raio);
  font-family: var(--mt-texto-familia);
  font-size: .9375rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.mt-btn-primario { background: var(--mt-teal); color: #fff; }
.mt-btn-primario:hover { background: var(--mt-teal-claro); color: #fff; }

.mt-btn-secundario { border-color: var(--mt-borda); color: var(--mt-texto-2); background: #fff; }
.mt-btn-secundario:hover { background: var(--mt-fundo); }

.mt-btn-bronze { background: var(--mt-bronze); color: #fff; }
.mt-btn-bronze:hover { background: var(--mt-bronze-claro); }

.mt-btn:focus-visible { outline: 2px solid var(--mt-teal); outline-offset: 2px; }

/* ── Cartão ────────────────────────────────────────────────── */
.mt-cartao {
  background: var(--mt-superficie);
  border: 1px solid var(--mt-borda);
  border-radius: var(--mt-raio);
  box-shadow: var(--mt-sombra);
}

/* ── Avisos ────────────────────────────────────────────────── */
.mt-aviso {
  border-left: 3px solid var(--mt-teal);
  background: var(--mt-teal-suave);
  padding: .95rem 1.2rem;
  border-radius: 0 var(--mt-raio) var(--mt-raio) 0;
}
.mt-aviso-atencao { border-left-color: var(--mt-atencao); background: var(--mt-atencao-suave); }
.mt-aviso-erro    { border-left-color: var(--mt-erro);    background: var(--mt-erro-suave); }
.mt-aviso-ok      { border-left-color: var(--mt-ok);      background: var(--mt-ok-suave); }

/* ── Números em coluna ─────────────────────────────────────── */
/*  Dígito com largura fixa: sem isso, valores em coluna dançam
    de linha para linha e ficam difíceis de comparar. */
.mt-numero { font-variant-numeric: tabular-nums; }

/* ── Movimento ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}