/* Arch Hub Soluções — estilos dos componentes. Valores vêm dos tokens (tokens.css). */

/* Nomes usados no site (manual §8.2) apontando para as famílias dos tokens */
:root {
  --ah-fonte-apoio: var(--font-apoio);
  --ah-fonte-destaque: var(--font-destaque);
}

/* Todo elemento com data-theme pinta o próprio fundo: <section data-theme="claro"> vira uma seção branca */
[data-theme] { background-color: var(--ah-fundo); color: var(--ah-texto); }
body { margin: 0; font-family: var(--font-apoio); }

/* Grafismos */
.ah-seta, .ah-hexagono, .ah-icone { display: inline-block; vertical-align: middle; flex: none; }

.ah-gradiente {
  background-color: #08116B;
  background-image:
    radial-gradient(48% 75% at 0% 0%, rgb(138 218 246) 0%, rgb(100 180 230 / .9) 45%, rgb(50 186 236 / 0) 100%),
    radial-gradient(50% 65% at 100% 100%, rgb(147 226 188 / .9) 0%, rgb(147 226 188 / 0) 100%),
    linear-gradient(115deg, #3F8FD0 0%, #0E2072 20%, #08116B 32%, #0A146B 50%, #2E5A80 66%, #5A9595 82%, #7CCFB0 100%);
}

/* Botão */
.ah-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ah-espaco-2);
  box-sizing: border-box; min-height: 48px;
  padding: calc(var(--ah-espaco-3) - 1px) var(--ah-espaco-6);
  border: 1px solid transparent; border-radius: var(--ah-raio-md);
  font-family: var(--font-apoio); text-decoration: none; cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease;
}
.ah-botao--principal { background-color: var(--ah-acao); color: var(--ah-sobre-acao); }
.ah-botao--principal-azul { background-color: var(--ah-azul-claro); color: var(--ah-sobre-acao); }
.ah-botao--secundario { background-color: transparent; color: var(--ah-texto); border-color: var(--ah-borda-controle); }
.ah-botao--principal:hover, .ah-botao--principal-azul:hover { opacity: .88; }
.ah-botao--secundario:hover { background-color: var(--ah-borda-sutil); }
.ah-botao:disabled, .ah-botao[aria-disabled="true"] { opacity: .5; cursor: default; }
.ah-botao .ah-seta { width: 6px; height: 12px; }

/* Link */
.ah-link {
  color: var(--ah-link); border-radius: 2px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.ah-link:hover { text-decoration-thickness: 2px; }
.ah-link--seta { display: inline-flex; align-items: center; gap: var(--ah-espaco-2); }
.ah-link .ah-seta { width: .3em; height: .6em; }

/* Foco */
.ah-botao:focus-visible, .ah-link:focus-visible, .ah-logo:focus-visible { outline: 2px solid var(--ah-foco); outline-offset: 2px; }

/* Rótulo */
.ah-rotulo { margin: 0 0 var(--ah-espaco-2); font-family: var(--font-apoio); }
.ah-rotulo--azul { color: var(--ah-destaque-azul); }
.ah-rotulo--verde { color: var(--ah-destaque-verde); }

/* Título de seção: seta com 1em de altura, 0,28em antes do texto, na cor do título */
.ah-titulo-secao { display: flex; align-items: center; gap: .28em; margin: 0; font-family: var(--font-apoio); }
.ah-titulo-secao__seta { width: .5em; height: 1em; }
.ah-titulo-secao--branco { color: var(--ah-texto); }
.ah-titulo-secao--azul-claro { color: var(--ah-destaque-azul); }
.ah-titulo-secao--verde { color: var(--ah-destaque-verde); }

/* Card */
.ah-card {
  box-sizing: border-box; padding: var(--ah-espaco-6);
  background-color: var(--ah-fundo-alternado); color: var(--ah-texto);
  border: 1px solid var(--ah-borda-sutil); border-radius: var(--ah-raio-lg);
  font-family: var(--font-apoio);
}
.ah-card--invertido { background-color: var(--ah-fundo); }
.ah-card__titulo { margin: 0 0 var(--ah-espaco-2); }
.ah-card > :first-child { margin-top: 0; }
.ah-card > :last-child { margin-bottom: 0; }

/* Logo: o padding (margem de segurança) é calculado pelo componente */
.ah-logo { display: inline-block; line-height: 0; border-radius: 2px; }
.ah-logo img { display: block; }