/* Temas visuais do options: Órbita (padrão), Tipografia viva e Instrumento.
   O <head> de cada página define <html data-look> antes de desenhar. Aqui ficam as cores de cada
   tema e os acabamentos usados por mais de uma página; o resto fica no CSS de cada página. */
:root,:root[data-look="orbita"]{
  --paper:#060A26; --surface:#0D1340; --ink:#E9ECFB; --ink-2:#9AA2CF; --line:#1C2356;
  --accent:#2B35F0; --accent-strong:#4B55FF; --accent-ink:#8C95FF; --bar:#7C86FF;
  --code-bg:#0D1340; --code-bar:#141B4E; --code-ink:#E7EAFF; --code-dim:#7C84BD;
  --ok:#4FD1A1; --warn:#FFC266; --err:#FF7A70;
  color-scheme:dark;
}
:root[data-look="tipografia"]{
  --paper:#F2F3F8; --surface:#FFFFFF; --ink:#0A0F35; --ink-2:#4B5280; --line:#D6DAEA;
  --accent:#2B35F0; --accent-strong:#1F28CF; --accent-ink:#2B35F0; --bar:#2B35F0;
  --code-bg:#0A0F35; --code-bar:#121848; --code-ink:#E7EAFF; --code-dim:#7C84BD;
  --ok:#0B7F57; --warn:#9A5B00; --err:#C0302A;
  color-scheme:light;
}
:root[data-look="instrumento"]{
  --paper:#E8EAF2; --surface:#FFFFFF; --ink:#0A0F35; --ink-2:#4B5280; --line:#CDD1E1;
  --accent:#2B35F0; --accent-strong:#1F28CF; --accent-ink:#2B35F0; --bar:#2B35F0;
  --code-bg:#0A0F35; --code-bar:#121848; --code-ink:#E7EAFF; --code-dim:#7C84BD;
  --ok:#08704C; --warn:#8A5100; --err:#C0302A;
  --dev-top:#161D52; --dev-bot:#0A0F35; --slot:#DADDEA; --cap-edge:#C4C8DA;
  color-scheme:light;
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Órbita: brilho azul parado e grade de pontos que acende sob o mouse (looks.js move --mx e --my) */
[data-look="orbita"] body{isolation:isolate}
[data-look="orbita"] body::before,[data-look="orbita"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
[data-look="orbita"] body::before{background:radial-gradient(900px 700px at 88% -12%,rgba(43,53,240,.34),transparent 62%),radial-gradient(760px 620px at -12% 112%,rgba(43,53,240,.2),transparent 60%)}
[data-look="orbita"] body::after{background-image:radial-gradient(rgba(154,162,207,.2) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(420px circle at var(--mx,72%) var(--my,18%),#000,rgba(0,0,0,.22) 55%,rgba(0,0,0,.07));
  mask-image:radial-gradient(420px circle at var(--mx,72%) var(--my,18%),#000,rgba(0,0,0,.22) 55%,rgba(0,0,0,.07))}

/* Órbita: a borda das superfícies de vidro acende perto do mouse (looks.js move --gx e --gy) */
[data-look="orbita"] :is(.sect,.glass,.step,.section-errs){position:relative}
[data-look="orbita"] :is(.sect,.glass,.step,.section-errs)::after{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(280px circle at var(--gx,-999px) var(--gy,-999px),rgba(167,174,255,.8),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* seletor de tema: cartões com prévia (painel) ou pílulas (rodapé); o ponto é o radio do logo */
.looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-width:0;margin:0;padding:0;border:0}
.look-opt{position:relative;display:grid;align-content:start;gap:8px;padding:10px 10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);cursor:pointer}
.look-opt input{position:absolute;opacity:0;pointer-events:none}
.look-opt:has(input:checked){border-color:var(--accent-ink);box-shadow:0 0 0 1px var(--accent-ink)}
.look-opt:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:3px}
.look-prev svg{display:block;width:100%;height:auto;border-radius:10px}
.look-name{display:flex;align-items:center;gap:8px;padding:0 4px;font-weight:700}
.look-name .rd{position:relative;flex:none;width:16px;height:16px;border:2px solid currentColor;border-radius:50%}
.look-name .rd::after{content:"";position:absolute;inset:2px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .2s}
.look-opt:has(input:checked) .rd::after{transform:scale(1)}
.look-desc{padding:0 4px;color:var(--ink-2);font-size:.86rem;line-height:1.45}
@media (max-width:680px){
  .looks:not(.compact){grid-template-columns:minmax(0,1fr)}
  .looks:not(.compact) .look-opt{grid-template-columns:120px minmax(0,1fr);align-items:center}
  .looks:not(.compact) .look-prev{grid-row:span 2}
}
.looks.compact{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.looks.compact legend{float:left;margin-right:6px;padding:0;color:var(--ink-2);font-size:.88rem}
.looks.compact .look-opt{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:.88rem}
.looks.compact .look-name{padding:0}

/* troca de tema: um esmaecer simples (as trocas de página continuam com o deslize) */
:root.look-switch::view-transition-old(root){animation:.38s ease-in-out both lk-out}
:root.look-switch::view-transition-new(root){animation:.38s ease-in-out both lk-in}
@keyframes lk-out{to{opacity:0}}
@keyframes lk-in{from{opacity:0}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}