/* ============================================================
   AMF — camada de identidade institucional do app de Marketing
   Origem dos valores: SITE AMF/site/assets/amf.css e a referencia
   extraida do site no ar (SITE AMF/tools/theme/REFERENCIA-DESIGN.md).

   As CORES deste app ja eram as institucionais (ver o :root de cada
   pagina). O que faltava e o que entra aqui:

   1. A tipografia. O app estava em DM Sans + Lora italica — a leitura
      antiga da identidade. O site de referencia usa Inter em tudo e
      Times New Roman italica nos destaques, e o destaque e MAIOR que o
      texto ao redor (5.5rem de destaque para 4.5rem de titulo = 1,2x).
   2. A animacao de entrada (tela azul + brasao vazado), que o app nao
      tinha em nenhuma pagina.
   3. A curva de movimento do site.

   Este arquivo entra DEPOIS do <style> de cada pagina para ganhar dos
   empates de especificidade.
   ============================================================ */

:root {
  /* A curva que o site usa em praticamente tudo. O app tinha
     --ease-spring com uma curva propria; aqui as duas convergem. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
}

/* ===================== ASSINATURA TIPOGRAFICA =========================== */

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* -0.04em nos titulos e entrelinha perto de 1 nos grandes: e o que da o
   "ar" do site. O app usava -0.02em. */
h1, h2, h3, h4 { letter-spacing: -.04em; }
h1 { line-height: 1.04; }
h2 { line-height: 1.06; }
h3 { line-height: 1.1; }

/* Numeros grandes com largura fixa: coluna de KPI nao dança quando o
   valor muda. */
.kpi .value, .num, .valor, .big { font-variant-numeric: tabular-nums; }

/* ===================== PRELOADER — brasao vazado ========================
   Mesma peca do site. Ao contrario do que foi feito no Painel de Projetos,
   aqui NAO existe regra escondendo o conteudo da pagina durante a intro:
   sao oito telas com estruturas diferentes, varias com cabecalho fixo e
   elementos sticky, e por opacity/transform num ancestral o position:fixed
   dos filhos quebraria. O azul e opaco e cobre tudo de qualquer forma; o
   que se ve no fim e o zoom atravessando o brasao e revelando a pagina. */

.amf-preloader {
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background: #055FFB;
  overflow: hidden; isolation: isolate;
}
.amf-preloader-reveal {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  visibility: hidden; opacity: 0;
  overflow: hidden; pointer-events: none;
}
.amf-preloader-logo-wrap {
  position: relative; z-index: 2;
  width: clamp(150px, 13vw, 230px); aspect-ratio: 40 / 30;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.94);
  will-change: transform, opacity;
}
.amf-preloader-logo { display: block; width: 100%; height: 100%; overflow: visible; }
.amf-preloader-logo path {
  fill: transparent;
  /* 2.5 em vez dos 1.25 do site: o brasao tem muito mais detalhe que um
     logotipo em texto e o traco fino desaparecia no azul. */
  stroke: #FFFFFF; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
html.amf-preloader-active, body.amf-preloader-active {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* Rede de seguranca sem JS: se amf-intro.js nao carregar, o azul sai
   sozinho em vez de cobrir o app para sempre. Com o script funcionando o
   preloader e removido em ~2,7s e isto nunca dispara. JS desligado e
   coberto pelo <noscript> na propria pagina. */
.amf-preloader { animation: amf-preloader-escape 0s linear 8s forwards; }
@keyframes amf-preloader-escape {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ===================== movimento reduzido ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ===================== TEMA ESCURO =====================================
   Paleta institucional pedida: #001e33 (azul profundo), #c4986b (dourado) e
   #ffffff. Três cores não fazem uma interface: uma tela precisa de superfície,
   superfície elevada, divisa, texto forte e texto fraco. Os tons abaixo são
   TIRADOS dessas três — o azul clareado em degraus para as superfícies, o
   branco puxado para o azul nos textos secundários — em vez de cinzas de fora,
   que quebrariam a identidade.

   Vale para as oito telas de uma vez: os nomes de token são os mesmos em todas
   (--bg, --card, --text, --brand…), então trocar os VALORES aqui troca o app
   inteiro. Este arquivo entra depois do <style> de cada página.

   O dourado vira a cor de ação no escuro, no lugar do azul da marca — azul
   sobre azul-escuro não se lê. E como texto branco sobre dourado tem contraste
   ruim, existe --on-brand: o que se escreve EM CIMA da cor de ação. No claro
   ele é branco; no escuro, o próprio azul profundo.
   ====================================================================== */

:root[data-tema="claro"], :root:not([data-tema]) {
  /* No claro, escrever sobre o azul da marca continua sendo branco. O token
     existe nos dois temas para o CSS das telas nunca precisar de um `if`. */
  --on-brand: #ffffff;
  /* Os componentes de --brand em RGB. rgba() não aceita cor em hex vinda de
     token (rgba(var(--brand), .6) não é CSS válido), e é por isso que sombra e
     anel de foco precisam deste aqui para acompanhar o tema. */
  --brand-rgb: 5,95,251;
}

:root[data-tema="escuro"] {
  color-scheme: dark;

  /* --- superfícies: o azul institucional em degraus --- */
  --bg:        #011E39;
  --bg-2:      #062B4E;
  --card:      #062B4E;
  --card-2:    #0B3A64;
  --mist:      #0B3A64;
  --grid:      #0E4470;

  /* --- divisas --- */
  --line:       #1D6193;
  --border:     #1D6193;
  --ring:       #2B82C0;
  --ring-hover: #4AA3E0;

  /* --- texto --- */
  --text:       #FFFFFF;
  --ink:        #FFFFFF;
  --navy:       #FFFFFF;      /* no claro é a tinta mais escura; aqui, a mais clara */
  --text-dim:   #9FB6C7;
  --muted:      #9FB6C7;
  --ink-muted:  #6F8DA3;

  /* --- ação: o dourado assume TODO o lugar do azul --- */
  --brand:     #C4986B;
  --brand-600: #D8B189;
  --brand-50:  #0E3350;
  --brand-rgb: 196,152,107;
  --accent:    #C4986B;
  --accent-2:  #D8B189;
  --unit:      #C4986B;
  --on-brand:  #011E39;       /* o que se escreve EM CIMA do dourado */

  /* --- status: os tons claros não se leem sobre o azul; estes são os mesmos
         significados, clareados até ficarem legíveis --- */
  --green:  #46C98A;
  --yellow: #E5C36B;
  --orange: #E29455;
  --red:    #E4726A;

  --good-ink: #5FD195;  --good-bg: #0A3328;
  --warn-ink: #E5C36B;  --warn-bg: #33290F;
  --orange-ink: #E8A05C;
  --crit-ink: #F0908A;  --crit-bg: #3A1A18;
  --crit:     #E4726A;
  --st-good:  #46C98A;
  --st-warn:  #E5C36B;
  --st-crit:  #E4726A;

  /* --- rampa sequencial: funil, estágio, mês da verba ---
     No claro é o azul da marca, clara para escura. Aqui é o dourado — e o
     degrau mais escuro não desce tanto quanto no tema claro, senão a última
     etapa do funil desapareceria dentro do fundo. */
  --r1: #F2E0C8;  --r2: #DCB88C;  --r3: #C4986B;  --r4: #96704A;

  /* --- escala categórica: uma cor por campanha ---
     Mesmos matizes do tema claro, com luminosidade suficiente para o azul
     escuro. O --s1 é o slot da marca e acompanha o dourado. */
  --s1:  #C4986B;  --s2:  #F4855A;  --s3:  #46C98A;  --s4:  #F0BC3A;
  --s5:  #F09BBD;  --s6:  #4FBE5E;  --s7:  #9B8BE0;  --s8:  #F0797A;
  --s9:  #3FC2D1;  --s10: #A8CC4A;  --s11: #D089E0;  --s12: #E8C53C;
  --s13: #D08A50;  --s14: #74C4EE;  --s15: #E0607F;  --s16: #9A85C4;

  /* --- etapas do quadro (Sala de Guerra e Projetos) --- */
  --todo:  #6F8DA3;  --doing: #C4986B;  --done: #46C98A;
  --stage-todo: #6F8DA3;  --stage-doing: #C4986B;  --stage-done: #46C98A;
  --canva-ink: #9FB6C7;

  /* --- sombra: no escuro, sombra colorida some. O que dá relevo é preto
         mesmo, e uma linha clara no topo da peça (feita pelas divisas). --- */
  --shadow-card:  0 1px 2px rgba(0,0,0,.5), 0 18px 34px -20px rgba(0,0,0,.75);
  --shadow-float: 0 10px 22px -8px rgba(0,0,0,.55), 0 34px 60px -26px rgba(0,0,0,.8);
  --shadow: var(--shadow-card);
}

/* A página pinta o próprio fundo, senão sobra o branco do navegador nas bordas
   e no que passar do conteúdo. */
:root[data-tema="escuro"] body { background: var(--bg); color: var(--text); }

/* A intro azul da marca continua azul no escuro — é a assinatura da AMF e não
   é superfície de leitura. O que muda é só o que vem depois dela. */