/* ---------- cor de destaque das áreas Produtividade, Tecnologia e Pessoas ----------
   O layout marca a página com data-acento conforme a área do app (acentoDoApp, em
   src/lib/suporte-secoes.ts): laranja em Produtividade, roxo em Tecnologia e rosa em Pessoas,
   como no sistema de áreas do design system. O azul de Receita e do Marvin continua em lp.css
   e guia-video.css; o teal vale nas outras áreas.

   Cada área tem dois tons:
   --ac      a cor da área, para elemento (barra do passo aberto, seta, fundo do botão, borda);
   --ac-ink  o tom legível para texto e link sobre o fundo claro (contraste de 4,6 ou mais).
   O texto do botão é navy: branco sobre o laranja, o roxo ou o rosa fica abaixo do mínimo
   de leitura. */

[data-acento="laranja"] { --ac: #FA9800; --ac-ink: #A06100; }
[data-acento="roxo"]    { --ac: #A364FF; --ac-ink: #8954D6; }
[data-acento="rosa"]    { --ac: #FA3D85; --ac-ink: #CD326D; }

/* página inteira (layout) */
.hc:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"]) {
  --hc-teal-ink: var(--ac-ink);
  --hc-teal-soft: color-mix(in srgb, var(--ac) 11%, #fff);
}
.hc:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"]) .hc-cta { --app: var(--ac); color: #04081F !important; }
.hc:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"]) .hc-rel-card:hover { border-color: color-mix(in srgb, var(--ac) 55%, transparent); }

/* artigo e página do app */
.hc-article-shell:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"]) {
  --hc-teal-ink: var(--ac-ink);
  --hc-teal-soft: color-mix(in srgb, var(--ac) 11%, #fff);
}
.hc-article-shell:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"]) .hc-kind::before { background: var(--ac); }
.hc-article-shell:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"]) .hc-rel-card:hover { border-color: color-mix(in srgb, var(--ac) 55%, transparent); }
.hc-article-shell:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"]) .hc-app-hero { border-color: color-mix(in srgb, var(--ac) 24%, transparent); }
.hc-article-shell:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"]) .hc-category-article:hover { background: color-mix(in srgb, var(--ac) 5%, transparent); }

/* guia em vídeo */
.gv-shell:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"]) {
  --gd-acento: var(--ac); --gd-acento-suave: color-mix(in srgb, var(--ac) 55%, #fff);
}
.hc:has(.gv-shell:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"])) .hc-cta {
  --app: var(--ac);
  background: var(--app); color: #04081F !important; border: 1.7px solid color-mix(in srgb, var(--app) 72%, #fff);
  box-shadow: 0 12px 34px -12px color-mix(in srgb, var(--app) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(4, 8, 31, 0.16);
}
.hc:has(.gv-shell:is([data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"])) .hc-cta:hover { filter: brightness(1.05); }

/* ---------- caixa do vídeo do guia na cor da área ----------
   A caixa que emoldura o vídeo é um degradê só com os tons da cor da área (do mais fechado ao
   mais claro), sem misturar com o navy: teal em Geral e Backoffice (sem data-acento), laranja,
   roxo e rosa nas áreas acima. Receita e o Marvin seguem com o azul original de guia-video.css,
   que já é feito só de tons de azul. */
.gv-shell:not([data-acento]) { --box-c: #1FA8A5; }
.gv-shell[data-acento="laranja"] { --box-c: #F59300; }
.gv-shell[data-acento="roxo"]    { --box-c: #9A5BFA; }
.gv-shell[data-acento="rosa"]    { --box-c: #F2397F; }
.gv-shell:is(:not([data-acento]), [data-acento="laranja"], [data-acento="roxo"], [data-acento="rosa"]) .gd-box {
  border-color: color-mix(in srgb, var(--box-c) 45%, #fff);
  background:
    radial-gradient(90% 70% at 88% 0%, color-mix(in srgb, var(--box-c) 85%, #fff) 0%, color-mix(in srgb, var(--box-c) 70%, transparent) 30%, transparent 68%),
    radial-gradient(70% 60% at 0% 62%, color-mix(in srgb, var(--box-c) 55%, transparent) 0%, transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--box-c) 62%, #000) 0%, color-mix(in srgb, var(--box-c) 50%, #000) 48%, color-mix(in srgb, var(--box-c) 40%, #000) 100%);
  box-shadow: 0 2px 4px rgba(11, 19, 43, 0.08), 0 30px 70px -34px color-mix(in srgb, var(--box-c) 70%, #000);
}