/* A família de botões da marca MegaMidia, da amostra aprovada pelo Leandro em
   27/10/2026 (docs/branding-novo/amostras/amostra-acabamento-27-10.html).
   Lê os tokens de /marca/tokens.css, que vem antes dela.

   Três níveis:
   - .mm-bt-prim: o degradê da haste laranja do M, com texto navy (4,84:1 na
     ponta mais escura). Um por tela ou peça.
   - .mm-bt-sec: o espectro do M no contorno, do quente ao frio.
   - .mm-bt-ter: texto sublinhado, para a ação que não disputa atenção.

   O fundo vem de um ancestral com data-mm-fundo="claro|navy|palco|foto"; sem
   ele, vale o claro. Cinco estados: repouso, passar o mouse, foco visível
   (anel de duas cores), pressionado e desabilitado. */

.mm-bt {
  --mm-bt-txt: var(--mm-navy, #071D35);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--mm-raio-controle, 6px);
  font: 600 16px/1 var(--texto, 'Source Sans 3', sans-serif);
  color: var(--mm-bt-txt);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), filter .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.mm-bt svg { width: 18px; height: 18px; flex: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.mm-bt:hover svg { transform: translateX(3px); }

/* Os quatro fundos: a cor do texto, o anel e a folga do anel. */
[data-mm-fundo="claro"] {
  --mm-bt-txt: var(--mm-navy, #071D35);
  --mm-bt-sec-fundo: #fff;
  --mm-anel: var(--mm-foco-sobre-claro, #071D35);
  --mm-anel-folga: #fff;
}
[data-mm-fundo="navy"] {
  --mm-bt-txt: #fff;
  --mm-bt-sec-fundo: var(--mm-navy, #071D35);
  --mm-anel: var(--mm-foco-sobre-escuro, #20DAFB);
  --mm-anel-folga: var(--mm-navy, #071D35);
}
[data-mm-fundo="palco"] {
  --mm-bt-txt: #fff;
  --mm-bt-sec-fundo: var(--mm-palco-claro, #023165);
  --mm-anel: var(--mm-foco-sobre-escuro, #20DAFB);
  --mm-anel-folga: var(--mm-palco-escuro, #002355);
}
[data-mm-fundo="foto"] {
  --mm-bt-txt: var(--mm-navy, #071D35);
  --mm-bt-sec-fundo: #fff;
  --mm-anel: var(--mm-navy, #071D35);
  --mm-anel-folga: #fff;
}
[data-mm-fundo] .mm-bt { --mm-bt-txt: inherit; }

/* Primário. */
.mm-bt-prim {
  color: var(--mm-acao-primaria-texto, #071D35);
  background: var(--mm-m-laranja, #EA5A20);
  background: linear-gradient(in oklab 100deg, var(--mm-m-laranja, #EA5A20), var(--mm-m-ambar, #F8B918));
}
.mm-bt-prim:hover { filter: brightness(1.06) saturate(1.05); }

/* Secundário: o fundo do próprio lugar por dentro, o espectro na borda. */
.mm-bt-sec {
  border: 2px solid var(--mm-m-laranja, #EA5A20);
  background: var(--mm-bt-sec-fundo, #fff);
  border-color: transparent;
  background:
    linear-gradient(var(--mm-bt-sec-fundo, #fff), var(--mm-bt-sec-fundo, #fff)) padding-box,
    linear-gradient(in oklab 90deg, var(--mm-m-laranja, #EA5A20), var(--mm-m-ambar, #F8B918), var(--mm-m-verde, #4FAE32), var(--mm-m-teal, #04A99D), var(--mm-m-azul, #1B9DD9)) border-box;
}
.mm-bt-sec:hover {
  background:
    linear-gradient(color-mix(in oklab, var(--mm-bt-sec-fundo, #fff), var(--mm-bt-txt) 8%), color-mix(in oklab, var(--mm-bt-sec-fundo, #fff), var(--mm-bt-txt) 8%)) padding-box,
    linear-gradient(in oklab 90deg, var(--mm-m-laranja, #EA5A20), var(--mm-m-ambar, #F8B918), var(--mm-m-verde, #4FAE32), var(--mm-m-teal, #04A99D), var(--mm-m-azul, #1B9DD9)) border-box;
}
/* Sobre a foto, o secundário é a placa branca: o contorno sumiria na cena. */
[data-mm-fundo="foto"] .mm-bt-sec { border: 0; background: #fff; color: var(--mm-navy, #071D35); }
[data-mm-fundo="foto"] .mm-bt-sec:hover { background: var(--mm-papel, #F7F9FA); }

/* Terciário. */
.mm-bt-ter {
  min-height: 40px;
  padding: 0 4px;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}
.mm-bt-ter:hover { text-decoration-thickness: 2.5px; }

/* Foco visível: anel de duas cores, a folga na cor do fundo e o anel por fora. */
.mm-bt-prim:focus-visible,
.mm-bt-sec:focus-visible,
.mm-bt-ter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--mm-anel-folga, #fff), 0 0 0 4px var(--mm-anel, var(--mm-navy, #071D35));
}

/* Pressionado. */
.mm-bt-prim:active,
.mm-bt-sec:active,
.mm-bt-ter:active { transform: translateY(1px) scale(.985); filter: none; }

/* Desabilitado: sem degradê, sem contorno, sem movimento. */
.mm-bt-prim:disabled, .mm-bt-prim[aria-disabled="true"],
.mm-bt-sec:disabled, .mm-bt-sec[aria-disabled="true"],
.mm-bt-ter:disabled, .mm-bt-ter[aria-disabled="true"] {
  border-color: transparent;
  background: color-mix(in oklab, var(--mm-bt-txt) 12%, transparent);
  color: color-mix(in oklab, var(--mm-bt-txt) 50%, transparent);
  cursor: not-allowed;
  filter: none;
  transform: none;
  text-decoration: none;
}
.mm-bt-prim:disabled svg, .mm-bt-sec:disabled svg { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mm-bt, .mm-bt svg { transition: none; }
}

@supports not (background: linear-gradient(in oklab 90deg, red, blue)) {
  .mm-bt-sec { border-color: var(--mm-m-laranja, #EA5A20); }
}