/* =====================================================================
   UHOST — TEMA CLARO (opt-in). O dark segue sendo o padrão da marca.
   Ativa com html[data-tema="claro"] (botão no header + localStorage).

   🚨 CONTRASTE (revisto em 2026-09-10, axe-core em 6 páginas = 200 nós
   reprovados). O #E3A81C que estava aqui NÃO era suficiente como cor de
   TEXTO: dava 2,12:1 no branco, 1,96:1 no #F5F6F8 e 1,84:1 no #EDEFF3,
   contra os 4,5:1 que a WCAG pede. Pegava eyebrow, nome do plano, os
   contadores, o "/mês", o link do rodapé — 121 nós só na /planos.

   A saída NÃO é escurecer o dourado inteiro: é separar os dois papéis.
     --uh-gold      = dourado de TEXTO/ícone/borda  -> escuro, legível
     --uh-gold-fill = dourado de PREENCHIMENTO      -> o da marca, vivo
   Onde o dourado é FUNDO (badge "Mais popular", bolinha do mock, botão de
   play), a marca continua igual, porque ali a legibilidade vem do texto
   escuro por cima. Onde o dourado é LETRA, ele escurece.
   Ao mexer nestes valores, remedir: `axe.run(document,{runOnly:['color-contrast']})`
   com html[data-tema="claro"] e a página rolada até o fim.
   ===================================================================== */

html[data-tema="claro"]{
  --uh-bg:#F5F6F8;
  --uh-surface:#FFFFFF;
  --uh-surface-2:#EDEFF3;
  --uh-border:#E2E4EA;
  --uh-border-strong:#C7CAD3;
  --uh-divider:#E5E7EB;

  --uh-white:#15161A;
  --uh-text:#494A54;
  --uh-text-dim:#666770;      /* era #82838E = 3,75:1; agora 5,62:1 no branco e 4,88:1 no #EDEFF3 */

  --uh-gold:#8A6200;          /* TEXTO/ícone/borda: 5,49:1 no branco, 5,07:1 no #F5F6F8, 4,77:1 no #EDEFF3 */
  --uh-gold-hover:#6E4E00;
  --uh-gold-fill:#E3A81C;     /* PREENCHIMENTO: o dourado da marca, onde a letra vai escura por cima */
  --uh-on-gold:#1A1503;

  --surface-page:var(--uh-bg);
  --surface-card:var(--uh-surface);
  --surface-card-alt:var(--uh-surface-2);
  --border-card:var(--uh-border);
  --border-emphasis:var(--uh-border-strong);
  --divider:var(--uh-divider);
  --text-title:#15161A;
  --text-body:var(--uh-text);
  --text-muted:var(--uh-text-dim);
  --text-accent:var(--uh-gold);
  --cta-primary-bg:#FAC643;          /* botão dourado original segura bem no claro */
  --cta-primary-bg-hover:#F0B71F;
  --cta-primary-fg:#1A1503;
  --cta-ghost-border:#15161A;
  --cta-ghost-border-hover:var(--uh-gold);
  --focus-ring:var(--uh-gold);
  --link:var(--uh-gold);
  --link-hover:var(--uh-gold-hover);

  --shadow-card:0 8px 24px rgba(22,24,32,.07);
  --shadow-lift:0 18px 44px rgba(22,24,32,.13);
  --glow-gold:0 0 0 1px rgba(201,147,18,.35), 0 8px 32px rgba(201,147,18,.14);
}

/* header/vidro e bordas suaves que eram rgba branco */
html[data-tema="claro"] .uh-hd{ background:rgba(255,255,255,.88); border-bottom-color:var(--uh-border); }
html[data-tema="claro"] .uh-topbar{ border-bottom-color:var(--uh-divider); }
html[data-tema="claro"] .uh-mega__footwrap,
html[data-tema="claro"] .uh-mega__side{ border-color:var(--uh-divider); }
html[data-tema="claro"] .uh-mnav{ background:var(--uh-bg); }
html[data-tema="claro"] .uh-mnav a{ border-bottom-color:var(--uh-divider); }
html[data-tema="claro"] .uh-burger{ border-color:var(--uh-border); }
html[data-tema="claro"] .uh-burger i,
html[data-tema="claro"] .uh-burger i::before,
html[data-tema="claro"] .uh-burger i::after{ background:#15161A; }
html[data-tema="claro"] .uh-ft__bar,
html[data-tema="claro"] .uh-plan__linhas,
html[data-tema="claro"] .uh-nums,
html[data-tema="claro"] .uh-stats{ border-color:var(--uh-divider); }

/* ---- o dourado de PREENCHIMENTO continua o da marca ----
   São os únicos lugares em que --uh-gold pinta fundo em vez de letra; em todos
   eles o texto por cima é escuro (--uh-on-gold), então o contraste vem daí. */
html[data-tema="claro"] .uh-badge--gold,
html[data-tema="claro"] .uh-shot__dot--gold,
html[data-tema="claro"] .uh-frame__dots i:nth-child(3),
html[data-tema="claro"] .uh-vmock__play,
html[data-tema="claro"] .uh-podmock__play,
html[data-tema="claro"] .uh-promock__btn,
html[data-tema="claro"] .uh-mega__list a::before{ background:var(--uh-gold-fill); }

/* números decorativos: no claro a mesma opacidade do dark não alcança 3:1
   (dourado escuro a .46 sobre #F5F6F8 = 1,93:1). .85 = 3,81:1. */
html[data-tema="claro"] .uh-dor__n{ opacity:.85; }
html[data-tema="claro"] .uh-faixa__n{ opacity:.85; }

/* estados apagados */
html[data-tema="claro"] .uh-plan__linhas .off{ color:#A9AAB4; }
html[data-tema="claro"] .uh-plan__linhas .off .uh-plan__lico{ color:#C2C3CC; }
html[data-tema="claro"] .uh-tab .nao{ color:#B4B5BE; }

/* hero: esferas mais discretas, sombra do full-bleed some */
html[data-tema="claro"] .uh-orb--a{ background:radial-gradient(circle, rgba(227,168,28,.12), transparent 65%); }
html[data-tema="claro"] .uh-orb--b{ opacity:.4; }
html[data-tema="claro"] .uh-wide::after{ box-shadow:inset 0 -30px 40px -34px rgba(22,24,32,.25), inset 0 30px 40px -34px rgba(22,24,32,.25); }

/* showcase sangrado: máscara funde com o fundo claro naturalmente (mesma técnica) */
html[data-tema="claro"] .uh-show__media::before{ background:radial-gradient(closest-side, rgba(227,168,28,.10), transparent 72%); }
html[data-tema="claro"] .uh-hero__mock::before{ background:radial-gradient(closest-side, rgba(227,168,28,.12), transparent 72%); }

/* lightbox continua escuro (foto amplia melhor no escuro) — mantém */

/* logos: no claro entra o wordmark escuro */
html[data-tema="claro"] .uh-logo--dark{ display:none; }
html[data-tema="claro"] .uh-logo--claro{ display:block; }

/* botão de tema: mostra sol no claro, lua no escuro */
html[data-tema="claro"] .uh-temabtn__lua{ display:none; }
html[data-tema="claro"] .uh-temabtn__sol{ display:block; }