/* =====================================================================
   Marvin — paleta (psicologia das cores aplicada ao nicho de agência)
   Carregada depois do CSS base. Muda só cores e sombras, não o layout.

   Referência: as grandes agências digitais (AKQA, R/GA, Media.Monks,
   Pentagram, Huge) trabalham com base preta e branca e UMA cor forte de
   assinatura. É o que passa a imagem de agência estabelecida: sóbria,
   confiante, e o destaque vira marca registrada.

   Regra 60 · 30 · 10
   · 60% claros   off-white quente #F5F3EE e branco nos cartões
                  → clareza e sofisticação; menos frio que o branco puro
   · 30% grafite  quase preto #0C0D12 nas seções escuras e nos textos
                  → autoridade, elegância e foco: o preto é a cor-base das
                    agências premium e faz o trabalho (portfólio) aparecer
   · 10% amarelo  #FFC83D, o amarelo da marca, só em ações e destaques
                  → otimismo, criatividade e atenção imediata; sobre o preto
                    tem o maior contraste possível e guia o olho para o botão
   · Apoio        azul royal #2433B0 em ícones, links e no cartão de lojas
                  → confiança e tecnologia, herdado da marca em dose pequena
   ===================================================================== */

:root{
  --paper:#f5f3ee;
  --surface:#ffffff;
  --line:#e4e1d9;
  --ink:#111216;
  --soft:#5c5d66;
  --pri:#2433b0;
  --prisoft:#ecebe6;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:#0c0d12;--surface:#16171d;--line:#272830;--ink:#f2f0ea;--soft:#a3a4ad;--pri:#a7afff;--prisoft:#1d1e26;
  }
}

/* seções escuras: grafite quase preto no lugar do azul-marinho */
.bg-navy-950{background-color:#0c0d12}
.bg-navy-950\/90{background-color:rgba(12,13,18,.88)}
.bg-navy-900{background-color:#17181f}
.text-navy-950{color:#0c0d12}
/* textos de apoio no escuro: cinza neutro no lugar do lilás */
.text-navy-200{color:#a9aab3}
.text-navy-100{color:#dddde2}
.border-white\/10{border-color:rgba(255,255,255,.09)}

/* azul só como apoio: cartão "Lojas virtuais" em royal */
.bg-navy-600{background-color:#2433b0}

/* amarelo só para ação; hover um tom mais claro */
.bg-sol{background-color:#ffc83d}
.hover\:bg-\[\#FFD666\]:hover{background-color:#ffd45e}

/* botão principal nas seções claras: grafite (o "preto" das agências) */
.bg-pri{background-color:#111216}
.bg-pri:hover{background-color:#2433b0;opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .bg-pri{background-color:#ffc83d;color:#241a00}}

/* ícones dos cartões claros: fundo neutro, traço royal */
.bg-prisoft{background-color:var(--prisoft)}

/* chamada final: bloco grafite com o botão amarelo em destaque */
.rounded-\[32px\].bg-navy-600{background-color:#0c0d12;box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}

/* brilhos azuis viram sombras neutras e profundas */
[class*="rgba(42,53,184"]{box-shadow:0 40px 80px -36px rgba(0,0,0,.6)!important}

/* topo: fundo grafite com as telas dos trabalhos ao fundo */
.hero-bg{background-color:#0c0d12}
.hero-bg:after{background:radial-gradient(ellipse at 50% 30%,rgba(12,13,18,.55),rgba(12,13,18,.92) 70%),linear-gradient(180deg,transparent 60%,#0c0d12)}

/* mockup do topo no mesmo sistema */
.pv{--ac:#2433b0;--bg:#f5f3ee;--soft:#ecebe6;--mut:#d9d7cf;--card:#fff}
.pv[data-l="2"]{--ac:#ffc83d;--bg:#0c0d12;--fg:#f2f0ea;--mut:#2a2b33;--soft:#1d1e26;--card:#17181f}
.pv-media{background:linear-gradient(135deg,#2433b0,#4a56c9 55%,#d6d8ee)}

/* setas do portfólio e menu */
.w-arrow{background:rgba(12,13,18,.6)}
@media (min-width:1024px){.lg\:bg-transparent{background-color:transparent}}