/* ==========================================================================
   Midmark Studio — modo claro / escuro
   O tema escuro é o padrão (o da arte). O claro troca os tokens de cor no
   :root. Hero (planeta), slides de projeto, CTA e legendas da galeria ficam
   sempre escuros: são "ilhas" sobre foto, com os tokens escuros redeclarados.
   ========================================================================== */

/* ---- Botão de tema (header) ---- */
.header-sun{ display:none; }
.theme-toggle{
  position:absolute; top:50%;
  right:max(var(--sp-3), calc(var(--gutter) - var(--sp-8)));
  width:var(--sp-7); height:var(--sp-7);
  display:grid; place-items:center;
  margin-top:calc(-1 * var(--sp-7) / 2);
  padding:0; border:0; border-radius:50%;
  background:none;
  color:var(--c-accent);
  transition:color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out);
}
.theme-toggle:hover{ transform:rotate(30deg); }
.theme-icon{ grid-area:1 / 1; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out); }
.theme-icon--moon{ opacity:0; transform:scale(.6) rotate(-40deg); }
:root[data-theme="light"] .theme-icon--sun{ opacity:0; transform:scale(.6) rotate(40deg); }
:root[data-theme="light"] .theme-icon--moon{ opacity:1; transform:none; }

@media (max-width:1100px){
  .theme-toggle{ right:calc(var(--gutter) + var(--sp-7) - var(--sp-3)); }
}

/* Logo: versão com texto escuro só no tema claro, fora do hero */
.logo .logo-dark{ display:none; }

/* ==========================================================================
   TEMA CLARO
   ========================================================================== */
:root[data-theme="light"]{
  color-scheme:light;
  --c-bg:        #f6f6f7;
  --c-bg-2:      #ececee;
  --c-surface:   #ffffff;
  --c-line:      #dcdce1;
  --c-text:      #0e0e10;
  --c-muted:     #4f4f57;   /* 7.6:1 sobre --c-bg */
  --c-dim:       #65656d;   /* 5.5:1 sobre --c-bg */
  --c-ghost:     #e9e9ec;
  --c-accent:    #5a4fe6;   /* roxo da marca escurecido para texto: 5.6:1 sobre --c-bg */
}

/* Ilhas sempre escuras (sobre foto ou planeta) */
:root[data-theme="light"] :is(.showcase, .cta, .pf-cell){
  --c-bg:        #0a0a0a;
  --c-bg-2:      #0f0f10;
  --c-line:      #262628;
  --c-text:      #f5f5f6;
  --c-muted:     #a6a6ad;
  --c-dim:       #8c8c94;
  --c-ghost:     #161617;
  --c-accent:    #918bff;
  color:var(--c-text);
}

/* Header: no tema claro o hero também é claro, então texto e logo escuros sempre */
:root[data-theme="light"] .site-header{ color:var(--c-text); }
:root[data-theme="light"] .nav-burger span{ background:var(--c-text); }
:root[data-theme="light"] .logo-light{ display:none; }
:root[data-theme="light"] .logo-dark{ display:block; }

/* Hero claro: céu lavanda, planeta luminoso (paleta via uniform no shader), foto do arco oculta */
:root[data-theme="light"] .hero{
  --hero-title-c: var(--c-text);
  --hero-kicker-c: var(--c-muted);
  --hero-amp-glow: rgba(90,79,230,.45);
  background:linear-gradient(180deg, var(--c-bg) 0%, #ecebff 100%);
}
:root[data-theme="light"] .hero-arc{ visibility:hidden; }
:root[data-theme="light"] .hero-stars{ display:none; }
:root[data-theme="light"] .hero-wordmark{ mix-blend-mode:multiply; color:var(--c-ghost); }
:root[data-theme="light"] .hero-planet{ display:block; }
:root[data-theme="light"] .hero-planet::before{ display:block; }
/* Anel/atmosfera do claro em CSS (nítido em DPR 2–3); o canvas pinta só o corpo por baixo */
:root[data-theme="light"] .hero-planet::after{
  display:block; mix-blend-mode:normal;
  --planet-atm: radial-gradient(circle closest-side at 50% 50%,
    rgba(90,79,230,0) 75.8%, #5a4fe6 76.8%, #918bff 81%, rgba(145,139,255,.55) 86.5%,
    rgba(145,139,255,.18) 92%, rgba(145,139,255,0) 98.5%);
}

/* Botões e setas: escuros sobre fundo claro, brancos nas ilhas escuras */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .round-arrow,
:root[data-theme="light"] .round-arrow:disabled{
  background:var(--c-text);
  color:var(--c-bg);
}
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .btn:focus-visible,
:root[data-theme="light"] .round-arrow:hover,
:root[data-theme="light"] .round-arrow:focus-visible{
  background:var(--c-accent);
  color:var(--c-white);
}

/* Cards de serviço: superfície branca com contorno */
:root[data-theme="light"] .service-card{ box-shadow:inset 0 0 0 1px var(--c-line); }

/* Rodapé: logos de clientes em preto, ícones sociais escuros */
:root[data-theme="light"] .brand-img{ filter:brightness(0); }
:root[data-theme="light"] .footer-social a{ background:var(--c-text); color:var(--c-bg); }
:root[data-theme="light"] .footer-social a:hover,
:root[data-theme="light"] .footer-social a:focus-visible{ background:var(--c-accent); color:var(--c-white); }

/* Troca de tema suave (só cores; desligada com movimento reduzido) */
:root.theme-switching,
:root.theme-switching *{
  transition:background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out) !important;
}
@media (prefers-reduced-motion:reduce){
  :root.theme-switching, :root.theme-switching *{ transition:none !important; }
  .theme-toggle, .theme-icon{ transition:none; }
}

/* Passagem hero → projetos no claro: lavanda → roxo da marca → preto do slide (sem cinza) */
:root[data-theme="light"] .hero::after{
  background:linear-gradient(180deg, transparent 0%, rgba(90,79,230,.28) 35%, rgba(43,36,130,.78) 70%, var(--hero-fade-to) 100%);
}

/* Cortina no claro: o hero escurece para o roxo profundo da marca, não para cinza */
:root[data-theme="light"]{ --curtain-dim-c:#1e1a5a; }